Multiuser on the Canvas

// load in these urls
// https://zimjs.org/cdn/2.3.0/socket.io.js
// https://zimjs.org/cdn/zimserver_urls.js
// https://zimjs.org/cdn/zimsocket_1.1.js

// Make a single Ball that multiple people can drag around
// In the ZIM Frame here is the preparation and the code

const socket = new Socket(zimSocketURL, "sharedball");

// For the first parameter:
// The zimSocketURL comes from zimserver_urls.js 
// and points to the ZIM Socket server.
// This way, if we change the server, the app will still work.

// For the second parameter:
// Went to this URL https://zimjs.com/request.html 
// from the ZIM Socket page
// and requested a keyword "sharedball" for this app
// do not use a keyword that is already in use

// When the socket is ready we get this event
// It receives a data event of all the current data
// or just ask socket.
// There is also a history of any data stored in history
// like for a chat.

socket.on("ready", ()=>{
   const ball = new Circle(100, red).drag(stage);

   // We will get the lastest x and y of the ball
   // all latest values are automatically loaded by Socket
   let x = socket.getLatestValue("x");
   let y = socket.getLatestValue("y");

   // if someone has moved the ball then start at that position
   // otherwise, tell others to come where the ball is located
   if (x != null) {
      ball.loc(x,y);
   } else {
      ball.center();
      // we can set a single property like:
      // socket.setProperty("x", ball.x);
      // but each time we do it is a call to the server
      // so it is better to set multiple properties like so:
      socket.setProperties({x:ball.x, y:ball.y});
   }
   stage.update();

   // here is the event for when we receive data from others
   // so set the ball to the latest value
   // we can also grab this information from the data parameter
   socket.on("data", data=>{
      let x = socket.getLatestValue("x");
      let y = socket.getLatestValue("y");
      if (x != null) ball.loc(x,y);
      stage.update();
   });

   // send data when ball is moved
   ball.on("pressmove", ()=>{
      socket.setProperties({x:ball.x, y:ball.y});
   });

});

socket.on("error", ()=>{
   new Pane(600,300, "SORRY, COULD NOT CONNECT").show();
});