協作文本工具如何使用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（）將返回當前文本。

客戶

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