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

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!

Start with the share menu and the proposed deploy/upload flow, then read the p5live README's “How it works” and “Next” sections alongside the sketch.js integration shown in the issue. Done would mean a live remote sketch can be deployed from the editor and refreshed when the user deploys a new version.