PR

HTML5+WebSocketsで作るリアルタイムWeb

2011年3月29日(火)
高尾 哲朗(監修:山田祥寛)

HTML5+WebSocketsアプリケーションの作成

WebSocketsのプログラムは非常にシンプルです。その理由はクライアントとサーバーにそれぞれイベントモデルを提供するプログラムが存在するためです。クライアント側のイベントと、イベントハンドリングに実装する機能は以下の通りです。

初期表示および終了処理ではWebSocketコネクションを生成、明示的な切断が必要になります。

[リスト 01]初期表示、終了処理

在席状態の変更では、コネクションが開いていることを確認してコネクションに文字列データを送ります。文字列データのみ扱えることに注意してください。

また、プロトコル拡張によって継続的にコネクションを維持するWebSocketsは、途中に介在するプロキシサーバーから見ると、そのコネクションは使われていないと認識される可能性があり、切断されてしまうことがあるため、接続が生きていることを確認します。

[リスト 02]在席状態変更時

サーバーとのコネクション開始では、コネクションが開いた時に発生するonopenイベントを使うことができます。

[リスト 03]サーバーとのコネクション開始

サーバーからメッセージが到着するとonmessageイベントが発生するため、イベントにメソッドを定義しておくことで、イベント駆動型のプログラムを実装できます。WebSocketsは文字列のみの受送信になりますので、クライアント側で文字列を分解します。

[リスト 04]サーバーからのメッセージ到着

oncloseイベントも受け取ることができます。再接続やアイコンによるユーザーへのネットワーク状態の通知など、ソリューションの要件に応じて実装します。

  • 「HTML5+WebSocketsで作るリアルタイムWeb」サンプルプログラム

著者
高尾 哲朗(監修:山田祥寛)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています