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のテキストが何をしているのか分かりません。サーバーコードでこれを試すことができますか？また、私はctx.fillText（）paramsなしで現在のテキストを返すと仮定します。

クライアント

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