WebSocket未対応ブラウザにも対応「Socket.IO」技術登場

Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

クライアントサーバ間で非同期双方向通信を実現するWebSocket APIの実装が進んでいる。今のところFirefox 4、Chrome 4、Opera 10.70、Safari 5がWebSocket APIの実装を取り込んでいる。1日現在、WebSocket APIはW3Cドラフトの段階にあり仕様は固まっていない。またIEもサポートしていない。しかしWebページやWebアプリがクライアントサーバ間通信を実施するための有用なツールになっており、優れたユーザ体験を提供するためには活用を検討したい技術になっている。

クライアントサーバ間通信はすでにAjax技術で実現されているため、WebSocket APIの利点がよくわからかいユーザも多いようだ。既存のAjax技術とWebSocket APIには大きな違いがある。主な違いは次のとおり。

Ajax技術は基本的にクライアントからサーバにリクエストを送ることで通信する。WebSocket APIではサーバからもクライアントからも通信を実施でき、完全な双方向通信が可能。
Ajax技術は同一のドメイン内での通信に限定されるものの、WebSocket APIはクロスドメインでの通信に対応している。
Ajax技術はHTTP通信をベースにしているためセッションレス通信やヘッダの転送など通信効率が悪い。WetSocketは直接wsプロトコルやwssプロトコルを使って通信を実施し、Ajax技術と比較して通信効率がいい。
WebSocket APIは双方向通信を前提として設計されており、APIがシンプルで扱いやすい。

Ajax技術はもともとの目的と実際に使われている用途が異なっているため、多少無理をしているところがある。WebSocket APIは最初から双方向通信を前提として設計されており、優れたユーザ体験を提供するためのシンプルで強力な機能を提供している。今後のWebページ、Webアプリケーション開発において欠かせない機能になるとみられる。

// WebSocket APIの利用例
// http://davidwalsh.name/websocket より抜粋


// ソケットインスタンスの作成
var socket = new WebSocket('ws://localhost:8080');
// ソケットのオープン
socket.onopen = function(event) {
  // 最初のメッセージの送信
  socket.send('I am the client and I\'m listening!');
  // メッセージ待ち
  socket.onmessage = function(event) {
    console.log('Client received a message',event);
  };
  // ソケット終了待ち
  socket.onclose = function(event) {
    console.log('Client notified socket has closed',event);
  };
  // ソケットクローズ
  //socket.close()
};

しかし、ほかのHTML5技術やCSS3と同じだが、ユーザが利用するすべてのブラウザが一気にWebSocketに対応するという状況は訪れない。こうした機能を使う場合、常に既存のブラウザとの互換性を実現する必要がある。悩ましいところだが、こうした場合に活用できるライブラリがWebSocket and Socket.IOで紹介されており参考になる。

WebSocket and Socket.IOでは互換性を提供するライブラリとしてSocket.IOを紹介。WebSocket API、Ajax、Flash、IFrameなど利用できる機能を検出して可能な技術を使った通信を実現する。Socket.IOはNodeJS向けのAPIも提供しているため、サーバサイドでも同じようにコーディングできるという特徴がある。

WebSocket and Socket.IOではほかのライブラリとしてdojox.Socketも紹介。Dojoフレームワークを使ってWebページやWebアプリケーションを開発している場合には、dojox.Socketを使えばWebSocketを利用できる。その場合、サーバサイドにはNodeJS向けのSocket.IOを利用すればいいという。