使用node.js和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填充文本正在做什么，您能在服务器代码中尝试这一点吗？此外，我假设不带params的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);
});