How to integrate Makecode into React.js or Vue.js frameworks with a custom simulator.

[kartikbhargav11]

No description provided.

[resolute-support]

I am also curious about how this would work, I know to register an external simulator you would have to fork pxt, and edit pxtarget.json as shown here. this will launch the iframe when an extension is loaded to the custom simulator you want.

however, the iframe will only load if the extension uses the channel specified in pxtarget.json, and sends a command through. the channel:

(this is from the pxt-jacdac)

However, there is very little documentation on how to integrate and use external simulators with pxt and/or what APIs to use.
@abchatra is there any update on this? any information would be helpful.

[resolute-support]

Just an Update

I have made considerable progress with communication with an external simulator and Makecode, using control.simmessages.send() on Makecode and setting a listener for the "message" event you can send data from Makecode to the simulator and parse the data:

However I am now struggling with sending data to Makecode from the simulator, You can use: window.parent.postMessage(sensorData, "*") to send Json to Makecode.

However I am unsure of how to listen for the incoming data on the Makecode side, I assume it must be done through the extension but I am unsure of how to implement it. @abchatra do you have any knowledge on how to listen for data?

[abchatra]

Unfortunately, there is no support for custom simulator today as all the URL loaded has to be from the Microsoft domain. Saying this, we always evaluate improvement to the platform. I will discuss with my team.