Question

我正在尝试使用HTML canvas，javascript，node.js和socket.io创建一个共享的绘图空间。这是我的个人项目，我将以此为扩展我的javascript知识的方法。

目前，每个客户都可以按照他们希望的任何颜色或厚度实时为空间做出贡献。我似乎遇到了一个问题，那就是当新客户加入该空间时，我希望他们从其他所有人看到的内容开始。我将对绘图空间的任何贡献存储在一个二维数组中，该数组包含每个笔触的属性< / p>

计划是将数组发送到新连接的客户端，并具有在空白画布上绘制每个点的功能。

但是，由于某种原因，当我使用服务器的套接字ID将其从服务器发射到指定的客户端时，不会收到发送的数组。

是否可以针对此问题显示更多解决方案，或者采用更明智的方式解决此问题？

server.js

function newConnection(socket){
  console.log("new connection:"+socket.id);
  socket.on('connect',newPlayer);

  if((!playerStore.includes(socket.id))){
    newPlayer();
    console.log("new player");
  }

  socket.on('mouse',mouseMsg);
  function newPlayer(){
    io.to(socket.id).emit("join",lines);
    console.log("sent to:"+socket.id);
    //console.log('recieving:'+JSON.stringify(lines));
  } 

  function mouseMsg(data){
    data.user=socket.id;
    //console.log('recieving:'+JSON.stringify(data));
    //socket.broadcast.emit('mouse',data);
    lines.push(data);
    //console.log( io.sockets.emit('mouse',data));
  }
}

draw.js

socket = io.connect("http://localhost:3000");

console.log(socket);

socket.on('mouse',update);
socket.on('join',catchUp);

function catchUp(lines){
  var output='';
  for (var property in lines) {
    output += property + ': ' + property[property]+'; ';
  }
  console.log("list:"+output);
}

从服务器到客户端接收多个数据变量

0 个答案: