WEB+DB 2012 vol.71にWebSocketの解説とサンプルコードが載っていて面白そうだったので動かしてみた。そのメモ。
ソースはWEB+DB公式サイトにあります
単純に動かしただけなので、私からはソースの公開はしません。WEB+DB公式サイトにzipで置いてあるので、ソースを見る際はそれをダウンロードしてください。
実際に動いているデモはここです。
複数ウインドウで起動してください。十字キーでくまの画像を動かせます。1つのウインドウで動かすと、他のウインドウでも動きます。
このページの目次は以下の通りです。
- サーバー側の構成について
- サーバー側の構成で気を付けるべき点
- クライアント側の構成について
- クライアント側の構成で気を付けるべき点
- 全体的に気を付けるべき点
用語の解説もついでに。
WebSocket
サーバからのpush通信を簡単に実現できるプロトコル。元々はHTML5の一部だったが、今はWebSocketだけでも開発が進んでいる。
Socket.IO
WebSocketの低レイヤーなAPIを高機能なAPIでラップしたライブラリ。
node.js
JavaScriptで書かれたイベント駆動のWebサーバプログラム。
HTML5
新しいHTMLの仕様。
※自分用メモなのでほんとにざっくりしか書きません。
サーバー側の構成
Worldクラス
├メインループの周期(15回/秒とか)、ユーザー一覧の保持
└各クライアントからのキー入力を各ユーザーに保存
Playerクラス
├自分の位置(x, y)、自分のキー入力状態(上下左右それぞれのtrue, false)の保持
├メインループからのmove()の呼び出しにより位置を更新
└各クライアントからWorld経由で非同期にキー入力状態の更新
メインループ
└ループで全クライアントに全ユーザーの位置を通知
サーバー側の構成で気を付けるべき点
なんとなく思った疑問点とその回答。
Q. 各ユーザーにキー入力状態を持たせず、キー入力があった時に位置の値を更新するだけでもいいのでは？
A. その実装だと、各クライアントからフレームレート以上の速度でのキー入力があった時にユーザーの位置が一気に進んでしまう問題が起きる。
クライアント側の構成
walker.js
└特筆すべき点は特になし。
クライアント側の構成で気を付けるべき点
なんとなく思った疑問点とその回答。
Q. FPS値を持たずに、サーバーからのpush時(メインループからの更新通知時)に画面を更新してもいいのでは？
A. ネットワーク回線が切れないならそれでもOK。現実的には、「ぶつぶつ切れる＝その度に画面更新が止まる」という問題が起きるので、クライアント側で(サーバーのメインループ周期よりも小さい)FPSを持つ方がよい。
全体的に気を付けるべき点
なんとなく思った疑問点とその回答。
問題
ユーザーの追加・削除、各ユーザーの位置の更新をインクリメント(又はデクリメント)に行う実装になっているため、どこかでデータの不整合が起きた場合にその不整合がずっと続いてしまう。
対策
何らかのタイミングで、各ユーザーの生存確認、各ユーザーの位置の不整合(画面の外にいるとか)確認を行う必要がある。
