リアルタイムＷｅｂ

リアルタイムＷｅｂとは

双方向Ｗｅｂ、双方向通信ともいいます。地図の移動・拡大や株価の表示など、リアルタイムにＷｅｂページを動的に更新する技術です。

リアルタイムＷｅｂの技術

多様な実現技術がありますが、ＷｅｂブラウザとJavaScriptだけで構築できるものが主流です。その代表的なものに Ajax、 Comet、WebSocketがあります。

Ａｊａｘ（Asynchronous JavaScript + XML ）

JavaScriptのXMLHttpRequestオブジェクトを使って，ＷｅｂブラウザとＷｅｂサーバとがＸＭＬ形式のデータを用いて非同期の通信をし、動的に画面を再描画する仕組みです。
　主に、サーバのコンテンツには変化が少なく、利用者の操作を便利にしたいような目的に用います。

代表的な利用例にGoogleマップがあります。ここではＷｅｂページの一部に地図があり、マウス操作などで地図だけをを拡大したり移動したりしたいとします。

Ajaxを用いないとき

• Ｗｅｂブラウザは、Ｗｅｂページ内に記述されたJavascriptにより、マウスのクリック操作から地図指定パラメタ（中心の緯度・経度やズームなど）を取得し、内部でリンク（ＵＲＬ）の形式に編集してＨＴＴＰによりＷｅｂサーバに送ります。
• Ｗｅｂサーバは、地図指定パラメタにより処理を行い、新しいＨＴＭＬファイルと地図ファイル、ＨＴＭＬに関連する他のファイルなどをＷｅｂブラウザに返します。
  
• ＨＴＭＬでは、このＷｅｂブラウザとＷｅｂサーバの一往復でセッションが切れます。
  そのため、Ｗｅｂブラウザは、変更部分は地図だけなのに、Ｗｅｂページ全体をゼロから再表示することになります。逆に言えば、Ｗｅｂサーバは、Ｗｅｂページ再表示のために新たにすべてのファイルを送らなければなりません。

このように、送信－返信の繰り返しで通信することを同期通信といいます。Ajaxを用いないときは同期通信ですので、Ｗｅｂサーバから返信がくるまでは、Ｗｅｂブラウザは他の操作ができません。

Ajaxを用いるとき

Ajaxを用いると、JavaScriptがマウスの動きを検知し、現在表示されていない地図のデータ部分を計算し、足りない部分をＷｅｂサーバにリクエストします。Ｗｅｂサーバは不足部分の地図データをJavaScriptに返し、JavaScriptは地図を補正して表示します。

• Ajaxでは、Ｗｅｂブラウザは地図更新には直接関与していません。それでJavascriptとＷｅｂブラウザでの通信中も他の操作ができます。これが非同期（Asynchronous）通信です。
• ＤＯＭとは、ＨＴＭＬやＸＭＬのタグの構造を示す定義体です。これを参照することにより、ＨＴＭＬでの地図表示の内容や表示場所がわかります。
• Ajaxで地図の不足部分を示したり、不足地図の内容を示したりするのには、多数のデータが必要になります。それをＤＯＭと関連付けて記述するにはＸＭＬが適しています。それでAjaxではＸＭＬ形式のデータを送受信します。

Ｃｏｍｅｔ

Ajaxはクライアントからのリクエストで動作するプル型のリアルタイムＷｅｂなのに対して、Cometはサーバで発生したイベントをクライアントからの要請なしにクライアントに送信するプッシュ型のリアルタイムＷｅｂです。
　サーバのコンテンツが頻繁に変化し、更新があったときにＷｅｂページを更新するような用途に適しています。

代表的な例がチャット（インスタントメッセンジャ）です。
　チャットとは、ネットワーク上で、リアルタイムに複数の人が会話（通常は文章）を交わすことです。メーリングリストや電子掲示板などは、入力してから見るまでに時間がかかりますし、入力するまでの手続きが煩雑です。チャットでは、黒板に相互に書き入れるように、簡単にリアルタイムに会話ができます。

Ｃｏｍｅｔの仕組み

チャットには幾つかの形式がありますが、ここではCometを使ったＷｅｂチャットを対象にします。このアプリケーションは、ＷｅｂブラウザとJavaScriptで構築できます。JavaScriptは発言用と受信用のモジュールがあり、自由に切り替えることができます。

• 参加
  ブラウザからサーバへ参加のリクエストをすると、チャットのページが返されます。これは通常のＨＴＴＰリクエストとＨＴＴＰレスポンスですが、セッションは切られません。
• 発言
  発言用JavaScriptは、発言内容をＨＴＴＰリクエストとして、サーバに送ります。サーバは、発言を受け取ると、参加者（待ちスレッド）へＨＴＴＰレスポンスとして通知します。
• 受信
  受信状態になると、Ｗｅｂブラウザはサーバに受信状態であることをＨＴＴＰリクエストとして送ります。通常のＨＴＴＰではすぐにレスポンスがあるのですが、Cometでは誰かの発言を受け取るまで、レスポンスを延期します。ＨＴＴＰリクエストは待ちスレッドになります。
  、誰かからの発言があったときに待ちスレッドに通知を返します。
  　通知を受けたスレッドは、受信用JavaScriptに発言内容をＨＴＴＰレスポンスとして返します。受信用JavaScriptはそれを表示します。

ポーリング

ポーリングとは、主となるシステムが他のシステムに対して一定間隔で順繰りに要求がないか尋ねる方式です。
　Ajaxでチャットを構築しようとすると、他人の発言があったかどうかを短い時間間隔でサーバに問合せなければなりません。ブラウザ側が主システムとなるポーリング になります。
　それに対してCometではサーバに更新がないときには，クライアントからサーバにポーリングする必要はありません。

WebSocket

AjaxやCometは，通信プロトコルにＨＴＴＰを用いています。基本的にＨＴＴＰは
　　　コネクション確立の手続きが煩雑である
　　　一回のリクエスト／レスポンスでコネクションが切れてしまう
などリアルタイムの双方向通信には不適切です。AjaxやCometでは，それを低減する工夫がされていますが限界があります。

WebSocketは、最初一回のコネクション確立にはＨＴＴＰを使う以外は、専用のWebSocketプロトコルを使うことにより、高速化・軽量化を図りました。
　WebSocketもＷｅｂブラウザとJavascriptで構築できます。ＨＴＭＬ５の仕様の一部として策定されましたが、現在は単独のプロトコルとして扱われています。

• ＵＲＬでは、http://～やhttps://～ではなく、ws://～、wss://～とします。「ws」と「wss」の違いは「http」「https」の違いとほとんど同じです。
• Javascriptの記述は簡単です。
  　　送信　var connection = new WebSocket('wss://～');
  　　　　　connection.send('入力文');
  　　受信　connection.onmessage = function(e) { // コンテンツに変化があったら、
  　　　　　　　console.log(e.data);　　　　　　 // e.data にレスポンスを得る
  　　　　　};