Javascript 使用node.js和socket.io的协作文本工具

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

这就是我所尝试的：

使用文本工具的客户端

$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());
});

---

提前感谢。

不完全知道cox fill text在做什么，可以在服务器代码中尝试一下吗。我还假设不带参数的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);
});

---

由于不完全知道cox fill text在做什么，您可以在服务器代码中尝试这一点。我还假设不带参数的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);
});

---

填充文本应该是将文本应用于画布的内容。它不起作用：我已将发送val更改为$input.val（）。请检查该字符是否在控制台中发送和接收。LOG仍然不起作用，但我认为您发送$input.val（）可能是正确的。其他用户将获得fillText。fill text应该是将文本应用于画布的内容。它不起作用：我已将发送val更改为$input.val（）。请检查该字符是否在控制台中发送和接收。LOG仍然不起作用，但我认为您发送$input.val（）可能是正确的。其他用户将获得fillText。