WebSocketとNode.jsで試しにピンポンゲームを作ってみた - 最高のコンピューティング環境とは？

WebSocketを使えば、これまでFlashで作られていたユーザー対戦のあるアクションゲームをhtml + javascriptで作れるようになると思っていたけど、実際に現実的かどうか試してみた。

テストなので、とりあえずゲームとして遊べるようには作ってない。

デモ

接続しているブラウザ全てに、板とボールの動きが反映される。

Socket.io未使用版: http://syspri.org/test/websocket_pingpong_nosocketio/pingpong.htm
- WebSocketを使っているので、対応ブラウザはsafariとchromeの最新版。firefoxでは動かない。

Socket.io使用版: http://syspri.org/test/websocket_pingpong/pingpong.htm
- firefoxでも動くが、flashで通信され檄重
- safari/chromeでもSocket.io未使用版に比べて遅くなっている。WiresharkでSocket.io未使用版と比較すると、TCPパケットが大きく、複数のsend()が1つのTCPパケットに入っている。フラッシュするサイズの設定とかが異なるのかも。 2010/12/23 修正: npmのパッケージを利用するようにしたら軽くなった。ライブラリの利用の仕方が間違っていた模様。

ソース

Socket.io未使用版
- http://ndruger.lolipop.jp/hatena/20101107/pingpong.htm
  - ブラウザで開くページ
- http://ndruger.lolipop.jp/hatena/20101107/pingpong.js
  - Node.jsで動かすサーバーサイドのjavascriptファイル
- miksago-node-websocket-server
- Node.jsでWebSocketを利用可能にする素晴らしい外部ライブラリ。~~https://github.com/miksago/node-websocket-server からダウンロードして利用。~~ 2010/12/28 修正: npmのものを利用するように変更。

Socket.io使用版
- http://ndruger.lolipop.jp/hatena/20101109/pingpong.htm
- http://ndruger.lolipop.jp/hatena/20101109/pingpong.js
- Socket.ioのサーバー用ライブラリを利用するので、miksago-node-websocket-serverは使わない。

何をしているのか？

クライアント(pingpong.htm)
- ユーザーのキー入力を受け取り、板の移動要求をWebSocketで通知
- サーバーから板やボールの移動がWebSocketで通知されると、canvasを更新
サーバー(pingpong.js)
- 板やボールの移動を行い、現在の位置をWebSocketで接続しているブラウザ全てにブロードキャスト

感想

今回は送信タイミングやcanvasの描画を適当にしているが、そこらへんをきちんと考えて作ると、くにおくんの大運動会のようなレベルのゲームなら十分作れそう。

あと、Node.jsでのサーバーサイドの開発が恐ろしく楽。setInterval()とイベントリスナーが最強すぎる。Node.jsを利用することで、サーバーサイドのプログラミングの敷居がすごく下がる。
今はSNSアプリというユーザーの集まるアプリ提供場所があるので、Google App Engineみたいな初めは無料で拡張時に課金するタイプでNode.jsが使えるサービスを始めてくれれば、ブラウザで動くアクションゲームが多数でてきそう。

今度、もう少しまともに動くようにして、SNSアプリとしてユーザー同士対戦できるようにしてみよう。

2010/11/09 追記

id:t_43zさんから下記のはてぶコメントでSocket.ioを教えてもらったので、早速Socket.ioを使う版も試してみました。http://no.deも早速クーポンの依頼をしましたが、試すのが非常に楽しみです。

Socket.io使えばWebSocket対応してないブラウザでもFlash Socketその他で代替してくれるから便利ですよ。 / GAEみたいなという点ではhttp://no.deの課金体系がどうなるか気になるなー 2010/11/07