4

I would like to send a message every second from the main page to the embedded stackBlitz without reloading the main page. I have found a way by sending it by creating a json file as bellow. I am using Angular.

sdk.embedGithubProject(
    'stackblitz-frame',
    userName + '//' + repoName,
    { height: 500, width: 1500 }
).then(vm => {

    const source = interval(1000);

    const subscribe = source.subscribe(val => {

        var message = new Message();

        message.timeInfo = this.Currenttime;

        this.vm2 = vm;
        vm.applyFsDiff({
            create: {
                'src/assets/input.json': JSON.stringify({ message })
            },
            destroy: ['randomFile.ts']
        });
    });

});

In the example above I am sending videoInfo every second. The problem is that when it starts it doesn't allow me to edit the rest of the stackblitz project. I noticed that in StackBlitz there is a possibility to communicate through postMessage between iframes, but when trying to use it is a private variable.

vm.rdc.port.postMessage

that I believe it works like: https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage

But this is set as a private property, the problem of creating a file for communication is that the view of the application is reloading all the time. I embedded the stackblitz: https://stackblitz.com/edit/adding-links-app as an example of child, the View Mode of this VM container is not allowing me to create a view mode and edit while the input.json is updated.

Do you know any other way for communication between the embedded StackBlitz and the parent page where it is?

Thanks

VnoitKumar
  • 1,350
  • 15
  • 29
Tito
  • 722
  • 4
  • 26
  • 55
  • `The problem is that when it starts it doesn't allow me to edit the rest of the stackblitz project` can you please explain how it doesn't allow you to edit? – yurzui May 04 '20 at 09:42
  • Because it keeps reloading I can't type in anything, imagine that while I am typing in here someone is clicking F5 every second. The pages reloads and I lost what I was typing. – Tito May 04 '20 at 09:51
  • I just tried it and stackblitz only updates `input.json` but I can change other files – yurzui May 04 '20 at 09:56
  • Sorry, I mean the view gets reloaded, I can't edit the edit mode, save and check the view mode in this project, for example: https://stackblitz.com/edit/adding-links-app – Tito May 04 '20 at 10:06
  • You can change stackblitz option `Hot reload trigger` to `Save` then stackblitz won't update preview on change until you save project – yurzui May 04 '20 at 18:03
  • There is not this option on the options tab also I checked on the SDK, there isn't for the embedGithubProject. The options that are available are: Reload mechanism, Page reload trigger and Clear console on HMR – Tito May 04 '20 at 19:16
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/213120/discussion-between-tito-and-yurzui). – Tito May 04 '20 at 19:45
  • Do you have a sample stackblitz link for your issue? Also why you want to send the message? What is the use case? – Tarun Lalwani May 12 '20 at 14:59
  • @TarunLalwani the stackblitz link is the one I have on post. I would like the parent page to communicate with the embedded stackblitz page. I would like to send a video information every second, like the time where the video is and depending on this time the embedded stackblitz would behave differently. – Tito May 16 '20 at 09:43

0 Answers0