連載 :
Webの限界を超えるリアルタイムWebHTML5+WebSocketsで作るリアルタイムWeb
2011年3月29日(火)
HTML5+WebSocketsアプリケーションの作成
WebSocketsのプログラムは非常にシンプルです。その理由はクライアントとサーバーにそれぞれイベントモデルを提供するプログラムが存在するためです。クライアント側のイベントと、イベントハンドリングに実装する機能は以下の通りです。
初期表示および終了処理ではWebSocketコネクションを生成、明示的な切断が必要になります。
［リスト 01］初期表示、終了処理
1 | <!--//--><![CDATA[// ><!-- |
2 |
3 | //サーバーとの接続 |
4 | var ws = new WebSocket("ws://localhost:8080/DesktopStateService"); |
5 | //サーバーとの切断 |
6 | ws.close();//明示的に接続を閉じます。 |
7 |
8 | //--><! |
在席状態の変更では、コネクションが開いていることを確認してコネクションに文字列データを送ります。文字列データのみ扱えることに注意してください。
また、プロトコル拡張によって継続的にコネクションを維持するWebSocketsは、途中に介在するプロキシサーバーから見ると、そのコネクションは使われていないと認識される可能性があり、切断されてしまうことがあるため、接続が生きていることを確認します。
［リスト 02］在席状態変更時
1 | <!--//--><![CDATA[// ><!-- |
2 |
3 | If(ws.readyState == 1){//「0:接続中」「1:開いてる」「2:閉じている」※ |
4 | ws.send(“666/Leave”);//社員番号「666」が離席 |
5 | } |
6 |
7 | //--><! |
サーバーとのコネクション開始では、コネクションが開いた時に発生するonopenイベントを使うことができます。
［リスト 03］サーバーとのコネクション開始
1 | <!--//--><![CDATA[// ><!-- |
2 |
3 | //自分の在席状態を更新 |
4 | ws.onopen = function() { |
5 | ws.send(“666/On”);//社員番号「666」が在席中 |
6 | }; |
7 |
8 | //--><! |
サーバーからメッセージが到着するとonmessageイベントが発生するため、イベントにメソッドを定義しておくことで、イベント駆動型のプログラムを実装できます。WebSocketsは文字列のみの受送信になりますので、クライアント側で文字列を分解します。
［リスト 04］サーバーからのメッセージ到着
01 | <!--//--><![CDATA[// ><!-- |
02 |
03 | //メッセージ到着時に実行するメソッドの定義※ |
04 | ws.onmessage = function(e) { |
05 | var result = ""; |
06 | if (e.data != null) { |
07 | //サーバー側で「”666/On;777/DayOff”」といった |
08 | //データが作成されると仮定しています。 |
09 | var state = e.data.split(";"); |
10 | for (i = 0; i < state.length; i++) { |
11 | result += state[i] + "<br>"; |
12 | } |
13 | } |
14 | document.getElementById("label1").innerHTML = "在席状況一覧：" + "<br>" + result; |
15 | }; |
16 |
17 | //--><! |
oncloseイベントも受け取ることができます。再接続やアイコンによるユーザーへのネットワーク状態の通知など、ソリューションの要件に応じて実装します。
「HTML5+WebSocketsで作るリアルタイムWeb」サンプルプログラム
連載バックナンバー
Think ITメルマガ会員登録受付中
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
