Как справиться со многими клиентами с помощью веб-сокетов?

Question

Эй, я переписал код с помощью интерактивной доски. Я хотел написать это с обычными Websockets. Теперь у меня есть проблема, у меня может быть только один клиент. Когда я открываю два окна, они не могут работать вместе. Вот сайт, на котором у меня есть код: http://code -and.coffee / post / 2015 / joint-drawing-canvas-node-websocket /

Мой сервер:

let server = require('ws').Server;
let s = new server({port: 3000 });

// alle bisher gezeichneten Lines
let line_history = [];


s.on('connection', function(ws) {

     for (let i in line_history) {
          var object = { line: line_history[i]}
          ws.send(JSON.stringify(object) );
     }   


     ws.on('message', function (data) {

      // add received line to history 
       data = JSON.parse(data);
      line_history.push(data);
      // send line to all clients
      ws.send(JSON.stringify(data));

   });



});

Мой клиент:

document.addEventListener("DOMContentLoaded", function() {
   var mouse = { 
      click: false,
      move: false,
      pos: {x:0, y:0},
      pos_prev: false
   };
   // get canvas element and create context
   var canvas  = document.getElementById('drawing');
   var context = canvas.getContext('2d');
   var width   = window.innerWidth;
   var height  = window.innerHeight;
   var socket  = new WebSocket("ws://localhost:3000");

   // set canvas to full browser width/height
   canvas.width = width;
   canvas.height = height;

   // register mouse event handlers
   canvas.onmousedown = function(e){ mouse.click = true; };
   canvas.onmouseup = function(e){ mouse.click = false; };

   canvas.onmousemove = function(e) {
      // normalize mouse position to range 0.0 - 1.0
      mouse.pos.x = e.clientX / width;
      mouse.pos.y = e.clientY / height;
      mouse.move = true;
   };

   // draw line received from server

      socket.onmessage = function (event) {
      const data = JSON.parse(event.data);
      const line = data.line;
      console.log(line);
      context.beginPath();
      context.moveTo(line[0].x * width, line[0].y * height);
      context.lineTo(line[1].x * width, line[1].y * height);
      context.stroke();
   };


   // main loop, running every 25ms
   function mainLoop() {
      // check if the user is drawing
      if (mouse.click && mouse.move && mouse.pos_prev) {
         // send line to to the server
         var object = { line: [ mouse.pos, mouse.pos_prev ] };
         socket.send(JSON.stringify(object));
         mouse.move = false;
      }
      mouse.pos_prev = {x: mouse.pos.x, y: mouse.pos.y};
      setTimeout(mainLoop, 25);
   }
   mainLoop();
});

Спасибо:)