（3）サーバからコマンドを受け取り、黒板を更新する
（3）はクライアント側のJavaScriptコードになります。"command"イベントを受け取ってCanvasへの描画を行う処理になりますが、Socket.IOを使用すると以下のようなコードになります。
// "command"イベントの監視
socket.on('command', function(command) {
...
processCommand(command);
});
サンプルのパフォーマンスについて
このサンプルのコードをもう少し読むと、パフォーマンスを高めるような努力が一切行われていないことがわかります。マウスイベントが発生するたびにサーバに対して送信を行っているため、非常に頻繁にサーバとの通信を行っています。
しかしWebSocketのパフォーマンスが非常に良いため、これほどシンプルな実装でも、5,6人程度の同時接続数であれば、全く遅延なくアプリを利用できます。今回は本格的なサービスではなく、あくまでデモンストレーションですので、このレベルのパフォーマンスで十分と判断しました。
まとめ
この記事でお伝えしたかったことは以下の2つです。
- Node.jsやSocket.IOの生産性の高さ：サンプルのコア部分は、非常にシンプルなコードで実現できています。
- WebSocketのパフォーマンスの高さ：全くパフォーマンスチューニングを行っていないにもかかわらず、一定のリアルタイム性を備えています。
Node.jsとSocket.IOを使えば、リアルタイムなアプリケーションを非常に容易に実現できます。そこにHTML5の表現力が加われば、魅力的なアプリケーションを短期間で実装することができます。
今後やってくるリアルタイムWebのイノベーションに備えて、今からWebSocketに親しんでおくとよいのではないでしょうか。
