使用Node.和 socket.io 的协作文本工具

Question

我正在做一个带有节点和套接字的协作应用程序，我有一个简单的文本工具。如果其中一个用户键入文本并将其应用于画布，我希望另一个连接的用户也能看到该文本。

这是我尝试过的：

使用文本工具的客户端

$input.keyup(function(e) {
  if (e.which === 13) {
    e.preventDefault();
    ctx.font = (2 * texttool.lineWidth) + "px sans-serif";
    ctx.fillStyle = texttool.color;
    //call fillText to push the content of input to the page
    //this parses out the input's left and top coordinates and then sets the text to be at those coordinates
    ctx.fillText($input.val(), parseInt($input.css("left")), parseInt($input.css("top")));
    //save the context
    ctx.save();
    //set the display to none for the input and erase its value
    $input.css("display", "none").val("");
    console.log("sendtxt: ");
    socket.emit('txt', ctx.fillText());
  }
});
socket.on('txt', function() {
    console.log("Text");
    ctx.fillText();
});

服务器

socket.on('txt', function() {
   console.log("Text");
   socket.broadcast.emit('txt', ctx.fillText());
});

提前谢谢。

Answer 1

不完全知道 cox 填充文本在做什么，你能在服务器代码中试试这个吗？此外，我假设没有参数的ctx.fillText((将返回当前文本。

客户

$input.keyup(function(e) {
  if (e.which === 13) {
    e.preventDefault();
    ctx.font = (2 * texttool.lineWidth) + "px sans-serif";
    ctx.fillStyle = texttool.color;
    //call fillText to push the content of input to the page
    //this parses out the input's left and top coordinates and then sets the text to be at those coordinates
    ctx.fillText($input.val(), parseInt($input.css("left")), parseInt($input.css("top")));
    //save the context
    ctx.save();
    //set the display to none for the input and erase its value
    $input.css("display", "none").val("");
    console.log("sendtxt: ");
    socket.emit('txt', $input.val());
  }
});
socket.on('txt', function(msg) {
    console.log(msg);
    ctx.fillText(msg);
});

服务器

socket.on('txt', function(msg) {
   console.log(msg);
   socket.broadcast.emit('txt', msg);
});