[Feature request] Deploy sketches live to remote instances -- with proof of concept

[jgrizou]

Nature of issue?

• New feature request

New feature details:

A new option in the share menu to share a "live version". A live version host a "deployed" version of the sketch that is automatically refreshed when the user hit the deploy button.

This is useful when your work is hard to access physically but needs to be debugged/tweaked interactively and iteratively.

This is similar in concept with #1651 and #166. To explain the idea better, I developed and host p5live. p5live allows you to host live versions of your sketches, and each time you press play in the editor, all live versions will refresh automatically.

For more details and testing see:

• Twitter thread: https://twitter.com/jgrizou/status/1371882296375132162
• Intro video: https://www.youtube.com/watch?v=_MkSuxJA6Rs
• Try it online by opening both https://editor.p5js.org/jgrizou/sketches/Keik1He5v and https://p5live.jgrizou.repl.co/jgrizou/Keik1He5v. Pressing the play button in the editor will reload the p5live version.
• Read the Github readme file: https://github.com/jgrizou/p5live
• Try it on your own sketch following the getting started guide: https://github.com/jgrizou/p5live#getting-started

Technical implementation

I am sharing here my implementation details, as a possible route for implementing within the editor and depending on your current roadmap.

As a hack around, I implemented p5live on my own server and it requires adding a small piece of code in the sketch.js code, see:

• How it works section of the readme: https://github.com/jgrizou/p5live#how-it-works
• Technical tour video: https://youtu.be/jMjfwORo1RE

The p5live version is a full screen embedding (via iframe) of the user sketch. This page connect to a server and listen to reload events. When a reload event is received, the iframe is refreshed and the lastest version of the p5.js sketch is shown.

To trigger the reload event, we need to add a small code on the sketch.js as follows

// we check if this is running in the editor
if (location.href == 'about:srcdoc') {
  // if yes, we connect ot the socket.io server
  const socket = io("https://p5live.jgrizou.repl.co/");
  socket.on('connect', () => {
    // on connect, we emit a reload message for our sketch
    socket.emit('reload', { username : YOUR_USERNAME, sketchId : YOUR_SKETCH_ID });
  });
}

This is a bit hacky but works very well which might help the community decide if this functionality is useful.

Suggested integration

In light of #1651 and #166, and because my background is in robotics, I can see this added as a third button on the interface called "upload" or "deploy" that explicit push the current version to all remote live instances of the sketch. A bit like when programming an Arduino board. This allows to develop locally, and deploy to all remote instances the work is displayed on.

More details at https://github.com/jgrizou/p5live#next

Thanks

I hope this will be of help to the community and I would be very happy to help in working out how to best implement this in the editor.

Thanks for all the work the p5js community is doing!

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

Thank you for making this and thank you for sharing this!!!! This is so rad and I would love to integrate this with the web editor. I've been slowly but surely working on #166 which will affect this but in a small way (the URL for the iframe embed will change).

[sflanker]

FYI @jgrizou, you've got a bit of a name collision with the preexisting https://teddavis.org/p5live/

[jgrizou]

FYI @jgrizou, you've got a bit of a name collision with the preexisting https://teddavis.org/p5live/

Yeah didn't see it before :/ Let's live with it, I am not pushing this as a product/service, just to show a concept here. If it turns out to be useful it might be integrated in the official editor at some point.

[kjhollen]

Just making a note that this is related to #1337!