Jettyで始めるWebSocket超入門

第1回 WebSocket登場までの歴史

この記事を読むのに必要な時間:およそ 2.5 分

はじめに

初めまして。NTTアドバンステクノロジの金城と申します。幸運にも記事を執筆させていただけることになりました。WebSocketという新しいウェブの規格についての連載を,全4回の予定でお届けします。

用語統一について

WebSocketは「WebSocket」「WebSockets」,単語を切り離した「Web Socket」等,表記に揺れがあります。2009年12月22日のワーキングドラフトのタイトルはThe Web Sockets APIとなっていますが,2010年4月26日のエディターズドラフトではThe WebSocket APIとなっています。この連載では,最新の仕様書に則り,用語を「WebSocket」で統一します。

HTML5とWebSocketの関係

WebSocketは,もともとHTML5の一機能として仕様の策定が進められていました。しかし,Web Storage等の技術とともにHTML5からは切り離され,現在はWebSocket単独での規格化が進められています。切り出されはしましたが,その生い立ちからも分かる通り,HTML5の周辺技術として重要な役割を担っていくでしょう。

クライアント・サーバ間の通信の歴史

連載初回は,WebSocket登場までのウェブページの歴史を,チャットアプリケーションを作ることを念頭に置きながら,クライアント・サーバ間の通信を中心に振り返ってみたいと思います。

なお,説明の都合上,CSSファイルやJavaScriptファイル,FRAME要素等は考慮せず,ウェブページは単一のHTMLファイルで作成されるものと仮定します。

静的なウェブページ

インターネットが一般化し始めた頃のウェブページは静的でした。クライアントからの要求があると,表示させたいコンテンツを画面のレイアウトに組み込んだHTMLをサーバで生成し,クライアントに返します。クライアントのブラウザは,受け取ったHTMLを画面に表示します。コンテンツを取得し表示した後は,画面を読み込み直さない限りその表示内容を変更されることはありません。

チャットアプリケーションでは,チャットの発言とレイアウト用のタグが混在したHTMLが生成されます。新しい発言を取得するには,レイアウトとすべてのコンテンツを再度取得する必要があります。新しい発言が複数あっても,発言がひとつもなかったとしても,全データを取得し画面をすべて書き換えるしかないのです。

図1 静的なウェブページ

図1 静的なウェブページ

DHTMLとiframe

JavaScriptの登場により,それまで静的だったウェブページが動的になり,サーバとの通信なしにウェブページに対話性を持たせることが可能になりました。DHTMLは視覚効果のためのものというイメージが先行してしまいますが,ウェブページの一部のコンテンツだけを書き換えられるようになったことに注目してください。レイアウトを操作しなくても,コンテンツの置き換えや追加が可能ですが,追加等により表示される内容は最新の情報ではありません。つまり,ウェブページを最初に読み込んだ時に取得したコンテンツでしかありません。

しかし,ここでトリッキーな手法が生まれます。iframeを使った通信です。後述するAjaxで非同期通信※1が可能になったと説明されることもありますが,正確には静的なウェブページでもimg要素やiframeでは非同期通信が行なわれていました。この特性を利用し,ウェブページ上で動的にiframeタグを生成して,サーバとの非同期通信を任意のタイミングで行なわせる方法が誕生しました※2)。様々な実装方法がありますが,例えば,コンテンツの要求をiframe内で行ない,読み込まれたコンテンツを親フレームから取得するか,iframe内でJavaScriptを実行し親フレームに反映させます。

例えばチャットでは,iframeで新しい発言を要求し親フレームに発言を反映させることで,ウェブページを読み込み直さなくてもよくなりました。

図2 DHTMLによるコンテンツの追加

図2 DHTMLによるコンテンツの追加

図3 img要素の変更で画像はサーバから取得可能

図3 img要素の変更で画像はサーバから取得可能

図4 iframeによるコンテンツの取得

図4 iframeによるコンテンツの取得

※1
非同期通信は,読み込みの最中でもユーザの操作を受け付けつける通信方法です。これに対して,同期通信では,ブラウザは読み込み完了までユーザの操作を受け付けません。
※2
iframeによる通信に似た手法で,script要素を使用するJSONPと呼ばれている方法があります。「通信の発生する要素」をDHTMLで応用するため,ここに分類すべきなのでしょうが,JSONPの発明は歴史的にはずっと後になるため,ここでは言及しません。

著者プロフィール

金城雄(きんじょうゆう)

NTTアドバンステクノロジ株式会社 アプリケーションソリューション事業本部 情報機器テクノロジセンタ所属。

Webテクノロジに関心を寄せるJavaScript好きのプログラマ。

コメント

コメントの記入