node.js+socket.ioの技術を用いて、お絵かきチャットを作りたいが、懸念事項があります

Question

お絵かきチャットの実装を考えています。
使用ソフトとソースは下記のサイト様のものをそのまま流用しています。

使用ソースとデモ動画

さくらのVPS環境で構築を行い、上記のシステムが動作するところまで進めました。
ただ、今のままのシステムですと、Ａさんが絵を描いている途中でＢさんが入室しても、途中まで描かれているＡさんの絵は描画されず、真っ白のまま になってしまいます。
Ｂさんが入室した時に、Ａさんが描いていた絵を表示させるようにしたいです。

なので、描くと同時に絵の情報を保存していく機能が必要になると思うのですが、知識不足でどのようにしたらいいか検討もつきません。
この手(node.js+socket.io+canvasでお絵かきチャット)の参考サイトはいくつか見てきましたが、どれもＢさんが入室した時には真っ白になるものでした。

何かそういったことが実現できる技術、参考サイトなどがあれば詳しく教えていただきたいです。
どなたか救いの手を・・・よろしくお願いします。

Answer 1

描画情報はサーバーサイドへ都度、JSON形式で送信されているようなので、それをメモリ上に保存しておいて、他の人が入室したタイミングでその情報を送信してやればいいと思います。

試せてはないですが、サーバーサイドのサンプルとして。

// 描画情報
var draws = [];

io.sockets.on('connection', function (socket) {
    
    // 接続時、描画情報があれば送信
    if (draws.length > 0) {
	    socket.emit('first send', draws);
    }
    
    // クライアントからメッセージ受信
    socket.on('clear send', function () {
 
        // 自分以外の全員に送る
        socket.broadcast.emit('clear user');

        // 描画情報クリア
        draws = [];
    });
 
    // クライアントからメッセージ受信
    socket.on('server send', function (msg) {
 
        // 自分以外の全員に送る
        socket.broadcast.emit('send user', msg);
        
        // 描画情報追加
        draws.push(msg);
    });
 
    // 切断
    socket.on('disconnect', function () {
        io.sockets.emit('user disconnected');
    });
});

後はクライアントにfirst sendの受信処理を入れて、描画情報分、描画処理をやってやれば実装できると思います。

Comments

[sanset]

上記のコードに訂正して、クライアントに
socket.on('first send', function (msg) {
//console.log(msg);
for(key in msg){
context.strokeStyle = msg[key].color;
context.lineWidth = 2;
context.beginPath();
context.moveTo(msg[key].fx, msg[key].fy);
context.lineTo(msg[key].tx, msg[key].ty);
context.stroke();
context.closePath();
}
});
という記述を載せたところ成功しました！素早く丁寧な回答に感謝致します。
ベストアンサーにさせていただいた上で、もしよろしければお聞きしたいのですが、
このやり方を導入することで懸念されるような問題点などございますか？
個人的には、drawsの配列が常に増えていくので、配列の最大件数などを設けて描画情報の上限は決めたほうがいいのかなって思っているのですが・・・