ノート：AjaxとWebSocket

Web系

Webページで、画面遷移せずにサーバと非同期通信をして画面を部分的に書き換えたりする方法としてAjaxとWebSocketがある。Ajaxは必ずブラウザからのリクエストに応じてサーバがレスポンスを返す。そのため、サーバ側の変化をモニタしたい場合には周期的にポーリングするしかない。これに対してWebSocketはブラウザ側からもサーバ側からもいつでもデータの送信ができる。

(1) Ajax

AjaxにはXMLHttpRequestオブジェクトを用いる。XMLという名前がついているがデータはJSON形式でもかまわない。最近ではXMLHttpRequestよりもモダンなAPIとしてfetchというものもあるが、ここではふれないでおく。

使い方は、まずXMLHttpRequestオブジェクトを作り、イベントハンドラを定義し、メソッド(GET/POST)とURLを指定し、リクエストヘッダを設定し、ボディを渡して送信するという流れである。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    イベントハンドラ処理;
};
xhr.open('POST', 'https://hogehoge.hoge/piyopiyo');
xhr.setRequestHeader( 'Content-Type', 'application/json' );
xhr.send(json_text); // GETの場合は引数なしにする

受信データはonreadystatechangeハンドラで状態とレスポンスコードをチェックしてからresponseTextを取得する。XMLの場合にはresponseTextに代えてresponseXMLを取得する。

xhr.onreadystatechange = function() {
  if (this.readyState == 4){ // 4=DONE
    if(this.status == 200) { // 200=OK
      var json_text = this.responseText; // JSONの場合
      var domDoc = this.responseXML; // XMLの場合
      受信データの処理;
    }
  }
};
JSONデータの扱い

JavaScriptオブジェクトをJSON形式の文字列に変換するにはJSON.stringify()を用いる。

var json_text = JSON.stringify(js_obj);

JSON形式の文字列をJavaScriptオブジェクトに変換するにはJSON.parse()を用いる。

var js_obj = JSON.parse(json_text);
XMLデータの扱い

XMLデータの扱いは少しめんどくさい。
XMLドキュメントから要素の値を取得するにはgetElementsByTagName()を用いる。

var hoge = domDoc.getElementsByTagName('hoge')[0].childNodes[0].nodeValue;

(2) WebSocket

WebSocketにはWebSocketオブジェクトを用いる。

まず、window.onloadなどでURLを指定してWebSocketオブジェクトを生成し、ハンドラを定義する。

var ws = new WebSocket('wss://hogehoge.hoge');
ws.onmessage = function(evt){
  受信時の処理;
};
ws.onopen = function (evt) {
  接続時の処理;
};
ws.onclose = function (evt) {
  切断時の処理;
};
ws.onerror = function (err) {
  エラー時の処理;
};

受信したデータはonmessageハンドラの引数として取得する。

ws.onmessage = function(evt){
  const json_text = evt.data;
  受信データの処理;
};

データを送信する場合はsend()メソッドを用いる。

ws.send(json_text);

もしも一定時間で接続が切られるような場合は、定期的にデータを送信することで接続を維持できる。

var aliveTimer = setInterval( function () {
  ws.send("keep alive");
}, 30*1000);