libwebsocketを使ってZynqにWebsocketサーバを実装してみる：JavaScript編

前回の記事でWebsocketサーバーをC言語で実装する方法を書いた．今回はクライアント側のアプリケーションとして，JavaScriptでWebsocket通信を行う方法についてまとめておく．

HTMLファイル

Websocket通信をするときは，クライアントからサーバーへまずHTTPでコネクションを確立し，その後Websocket通信を行うのであった．実際のアプリケーションとして，Websocket通信を行う前に何らかのHTMLファイルを取得して，その中のデータなり文字列なりをWebsocket通信を用いてリアルタイムに更新していくことが多い．HTMLファイルの中にJavaScriptを埋め込み，スクリプトからWebsocket通信を開始する．

以下のようなHTMLファイルを用意して，HTTPサーバーが読み出せる位置に置いておく．ZYNQ上でApacheサーバーを使っている場合，/var/www/htmlがデフォルトのドキュメントルートになっているのでここに置くといい．

JavaScript

Websocketインスタンスの生成

サンプルのHTMLファイル(example.html)ではscriptタブの中に直接JavaScriptを記述している．
JavaScriptでWebscoket通信を使うにはWebsocketのインスタンスを生成する．

var ws = new Websocket( "ws://" + document.domain + ':' + location.port, "example-protocol" );

第一引数はWebsocketサーバのホスト名(あるいはIPアドレス)とWebsocketサーバが動いているポート番号を指定する．ws://はWebsocketで通信するという意味である．
第二引数には，Websocketサーバで定義した*1プロトコル名を指定する．
後はwsインスタンスを通してWebsocket通信が可能になる．

イベントハンドラの設定

イベントハンドラとは，何かが起きた(イベントが発生した)ときに実行される処理のことである．Websocketの文脈でイベントが発生したと言うと，次の4つのイベントを指すことが多い．

ハンドラ	内容
onopen	Websocket通信が接続されたことを表す
onclose	Websocket通信が切断されたことを表す
onmessage	Websocketからメッセージ(データ)を受信したことを表す
onerror	エラーが起きたことを表す

Websocket通信はHTTP通信などとは異なり，双方任意のタイミングでデータを送信する非同期通信となっている．したがって，データ受信などはイベントハンドラとして設定する必要がある．イベントハンドラは設定しておくと，Websocketの方で勝手に実行してくれる．libwebsocketでコールバック関数が勝手に実行されたのと似ている．便利である．

イベントハンドラは次のように設定する．

ws.onopen = function() {
    console.log("socket open");
    // Websocket通信が確立したらコンソールに"socket open"と表示する
}

こういう書き方を無名関数というらしい．

onmessageの場合，Websocketから受信したメッセージを無名関数の引数として取得できる．

ws.onmessage = function(e) {
    console.log(e);
    // メッセージ受信ごとにWebsocketのメッセージを表示する
    console.log(e.data);
    // e.dataとすると，Websocketで送られてきたデータを取得できる

*1:lws_protocols配列で定義したもの