How to send a message to StackBlitz VM from the parent window using Angular?

Viewed 378

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

0 Answers
Related