WebSocketによるクライアント＝サーバー通信 (4/7)

では、WebSocketをどのようにして使っているのか、スクリプトを見てみましょう。ここでは、init関数で基本的な設定を行い、action関数でボタンクリック時の処理をしています。

init関数では、まずWebSocketオブジェクトを作成し、グローバル変数に保管しています。WebSocketは、ページを開いている間、常に利用しますから、グローバル変数に保管しておくのが一般的です。

socket = new WebSocket("ws://localhost:8800/echo");

WebSocketオブジェクトは、このようにnewでオブジェクトが作成できます。引数には、アクセスするアドレスを指定します。ここでは、サーバーの「echo」というアドレスにアクセスをしています。

pywebsocketのサーバーに用意するスクリプトは、ファイル名によって公開アドレスが自動的に設定されるようになっています。スクリプトファイルは、必ず「○○_whs.py」というファイル名で保存します。このファイルは、○○というアドレスに公開されます。ここでは「echo_wsh.py」というサンプルスクリプトにアクセスをしていますので、「echo」にアクセスをしているというわけです。

WebSocketオブジェクトを作成したら、オブジェクトに用意されているイベントにコールバック関数を設定します。用意されているイベントには以下のようなものがあります。

onopen ――接続を開始したときのイベント。
onmessage ――メッセージが送られてきたときのイベント。
onerror ――エラーが発生したときのイベント。
onclose ――接続を閉じたときのイベント。

※組み込み方

[WebSocket].onopen = function(e){……処理……}
[WebSocket].onmessage = function(e){……処理……}
[WebSocket].onerror = function(e){……処理……}
[WebSocket].onclose = function(e){……処理……}

これらの内、もっとも重要なのは「onmessage」です。サーバーから何らかのデータが送られてくると、必ずこのイベントが発生するのです。それ以外のものは、とりあえず何も設定しなくともかまいませんが、このonmessageだけは必ず用意しなければいけません（そうしないと、サーバーから何も受け取ることができません）。

このonmessageに設定される関数では、引数に発生したイベントのオブジェクトが渡されます。そのオブジェクトの「data」プロパティに、送られてきたデータが格納されています。関数内で、この値を取り出して処理すればいいわけです。

さて、サーバーへの送信を行っているのが、action関数です。送信の処理は非常に簡単です。

[WebSocket].send( 送信するテキスト );

たったこれだけです。これでサーバーに引数のテキストが送られます。送信してサーバーから何か結果が返ってくる場合は、onmessageの関数で処理を行えばいいわけです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。