クライアント側の送受信の処理を実装するには?
解説
クライアント側の実装は、WebSocketオブジェクトを利用します。
WebSocketオブジェクトはコンストラクター「WebSocket(url,[protocol])」でインスタンス化します。引数urlは接続先のurlで通常は「ws://」スキーム、暗号化されたセキュアな通信の場合は「wss://」スキームで始まる文字列です。
サーバーからのデータの受信はonmessageイベントハンドラを実装します。送信されてきたデータはハンドラのevent引数のdata属性で取得します。
サーバーへのデータの送信は「send(data)」メソッドを使用します。「send(data)」の呼び出しは、データを送信待ち行列に追加し、送信の完了や応答は待ちません。
// infoは情報表示用のdiv要素
var ws = new WebSocket("ws://example.com/app");
// メッセージ受信イベントハンドラ
ws.onmessage = function(event){
//受信時の処理
info.innerHTML += event.data + "<br>";
}
ws.onerror = function(event){
//エラー処理
}
// メッセージ送信
ws.send("送信メッセージ");
正式仕様では文字列以外にバイナリーデータ型(Blob型、ArrayBuffer型。File API参照)の送信が可能ですが、対応がほとんど進んでいません。
エラー処理も同様にonerrorイベントハンドラで行います。onerrorの引数eventはEventオブジェクトで、追加の属性はありません。
関連項目