双方向通信を実現する代表的な技術

2011年3月1日(火)
高尾 哲朗(監修:山田祥寛)

はじめに

今回から全4回でリアルタイムWebの現状をとらえていきたいと思います。1回目となる今回は、リアルタイムWebについての概要です。

リアルタイムWebとは、データが集約されているサーバーの情報をリアルタイムで参照できる仕組みです。現在のWebシステムの場合、リアルタイムでサーバーの情報を得ようとすると、定期的にサーバーに問合せを行う必要があります。具体的には、クライアントスクリプトでリクエストを生成し、タイマーを使ってリクエストを投げるAjaxやMetaタグのリフレッシュ機能で、ブラウザからリクエストを定期的に投げるポーリングといった技術を使います。

図1:在席管理システムを例にした場合の従来のWebとリアルタイムWebの違い(クリックで拡大)

これは、従来のWebシステムがHTTP通信を使ってクライアント、サーバー間の通信を行っているためです。

HTTP通信では、リクエストに応じてレスポンスを返すという1往復の通信の安全性を確保するための通信手順がとられています。そのため、メッセージ交換は必ずクライアントから要求が発生し、サーバーの状態を知るためには、定期的にクライアントからサーバーにリクエストを発行する仕組みが必要になります。

このHTTP通信を拡張し、サーバー主導でメッセージを送信できるようにしたものが双方向通信です。双方向通信が可能なら、定期的なリクエストを必要とすることなく、サーバーのデータの状態が変わったら、リアルタイムでクライアントに通知するといったことが可能になります。

本稿では、リアルタイムWebを実現する双方向通信の仕組みを解説していきたいと思います。

双方向通信とは

双方向通信は、さまざまな利用方法が考えられます。代表的な利用方法としては、株価チャートやチャットといった情報のリアルタイム性がそのままユーザビリティにつながるようなシステムが考えられます。これらのシステムで情報のタイムラグが発生するとシステム自体が使いにくいものになってしまうのですが、従来のWebシステムの定期的なリクエストによる画面更新といった仕組みではタイムラグを解消することができません。また、できる限りタイムラグを解消しようとすると多くのネットワークトラフィックが発生します。
このような問題に対して、双方向通信というアプローチが考えられます。サーバーの状態が変わったらクライアントに通知するという仕組みを実現するさまざまな技術が開発されました。

以下に具体的な例を挙げてみましょう。

(1)Ajax+Comet

Ajax+Cometでは、HTTP通信を拡張することなく、Webサーバー側で複数のリクエストをセットで扱うよう拡張が行われます。これにより、ブラウザが提供するXMLHttpRequestを通してサーバーに送られた“サーバー状態の確認用のリクエスト”と“サーバーの状態を変更するためのリクエスト ”がセットで扱われます。

書込用リクエストがサーバーに到達すると、読込用リクエストに対しサーバーから返答が返されるため、あたかもサーバーからメッセージ交換を開始しているかのような双方向通信が可能になります。読込用リクエストも書込用リクエストも一つ一つは従来のAjaxによる通信と変わりません。

図2:在席管理システムでのAjax+Cometの振る舞い(クリックで拡大)

(2)WCF(Windows Communication Foundation)+ Silverlight

WCF + Silverlightでは、WCFサービスのエンドポイントをサーバーとクライアントが相互に公開しあうことで、サーバーからのメッセージ交換開始を可能にするという実現方法をとります。

図3:在席管理システムでのSilverlightの振る舞い(クリックで拡大)

エンドポイントとは一般にネットワーク端末を指しますが、双方向通信を行うWCFの場合は、サーバーからもメッセージ交換を開始することができるため、サーバー側にもエンドポイントが存在します。この場合のエンドポイントとは、URLを含んだコンテキストのことで、サーバーとクライアントはお互いにエンドポイントを公開します。

(3)HTML5 + WebSockets

HTML5 + WebSocketsでは、リクエストを開始した通信を張りっぱなしにするようサーバーに要求する機能(WebSockets API)を持つブラウザを使い、サーバーからのメッセージ交換開始を常時受け取れるように待機します(通信の終了は明示的に行います)。

図3:在席管理システムでのHTML5 + WebSocketsの振る舞い(クリックで拡大)

本連載では、同じ双方向通信を行うという目的のために、異なるアプローチを行っている技術を3つ紹介しますので、双方向通信の設計に役立つかと思います。

  • 第2回 Ajax + Cometによる双方向通信の仕組み
  • 第3回 WCF + Silverlightによる双方向通信の仕組み
  • 第4回 HTML5 + WebSocketsによる双方向通信の仕組み
著者
高尾 哲朗(監修:山田祥寛)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています