[js][html5][websocket] web_socket.js - HTML5のWeb SocketをFlashを使って実装

HTML5のWeb Socketを、Flashの力を借りて実装してみました。

gimite / web-socket-js - GitHub

Web SocketはHTML5に入る（予定の？）機能で、JavaScriptから生のTCP Socketに近いもの*1を使えるようにしよう、というものです。

2009年11月頃にChromeの開発版で実装されましたが、ほかのブラウザでは未実装です。このライブラリを使うと、すべてのブラウザで（Flashが入っていれば）Web Socketが使えるようになります。

使い方はこんな感じです。

  // おまじないその1: JavaScriptライブラリの読み込み
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript" src="web_socket.js"></script>
 
  <script type="text/javascript">
    
    // おまじないその2: Flashファイルの場所を教える
    WEB_SOCKET_SWF_LOCATION = "WebSocketMain.swf";

    // あとは本物のWebSocketと同じ
    var ws = new WebSocket("ws://example.com:10081/");
    ws.onopen = function() {
      ws.send("Hello"); // メッセージの送信
    };
    ws.onmessage = function(e) {
      // メッセージの受信
      alert(e.data);
    };
    ws.onclose = function() {
      alert("closed");
    };
 
  </script>

注意点として、Flashのソケット機能を使うので、サーバ側に（Flash経由でのソケットのアクセスを許可するための）ソケットポリシーファイルというものが必要です。後述のweb-socket-rubyを使う場合は、web-socket-ruby自身がソケットポリシーファイルを提供するので、何もする必要はありません。が、以下の場合は手動でソケットポリシーファイルを設置する必要があります。

• すでに843番ポートにソケットポリシーファイルを設置している場合。843番ポートのものが優先されるので、こちらにWeb Socketのポートへの接続を許可する設定を追加する必要があります。
• web-socket-ruby以外のWeb Socketサーバの実装を使う場合。Flashのソケットポリシーファイル - namespace gimiteの「おすすめの設置方法」に従って設置するのがおすすめです。

クライアントだけ書いてもテストできないので、ついでにRubyでWeb Socketサーバを作るライブラリと、それをテストするために、RubyでWeb Socketクライアントを作るライブラリを書きました。

gimite / web-socket-ruby - GitHub

そんなに仕様をまじめに読んだわけではないので、一部仕様と違っていたり、未実装だったりするかもしれません。

2009/8/29追記: web-socket-rubyがソケットポリシーファイルを提供するようになったので、文面を修正しました。
2009/12/2追記: Chromeの開発版でWeb Socketが実装されたので、文面を修正しました。

*1:近いもの、であって、TCPそのものを自由に使えるようになるわけではありません。