Kotalog: WebSocketを古いブラウザで使用する時のTips

かなり久しぶりの更新ですね。

うちの会社で提供しているGlueSupportというライブチャットサービスがあるのですが、中はFlashで実装されています。なんだかんだでやっぱりまだFlashは現役ですよね。

しかしながらトレンドを追っかけてみるとだいぶFlashはレガシーな扱いです。最新のトレンドを反映させたバージョンもあってよいなと。

というわけで、GlueSupportのテキストチャットバージョンをリニューアルし、それをHTML5のWebSocketベースに置き換えるプロジェクトを進めています。今月末にはリリース出来るかなと思ってます。

# 色々課題があって、残念ながらビデオチャットバージョンは当面Flashになりそうです。

さてさて、そのWebSocketですが、これがまた古いIEでは動かないのですね。
IE10でしか動きません。IE10インストールしている人いますか？身近な人でも誰もIE10を使っている人がいません。どうしよう。

そこで、古いIEでもWebSocketを使えるFlashの擬似環境を提供してくれるモジュールを使用します。

https://github.com/gimite/web-socket-js/

基本的にはreadmeにあるようにこのモジュールを以下のように組み込めばOKです。

<!-- Import JavaScript Libraries. -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="web_socket.js"></script>

<script type="text/javascript">

  // Let the library know where WebSocketMain.swf is:
  WEB_SOCKET_SWF_LOCATION = "WebSocketMain.swf";

  // Write your code in the same way as for native WebSocket:
  var ws = new WebSocket("ws://example.com:10081/");
  ws.onopen = function() {
    ws.send("Hello");  // Sends a message.
  };
  ws.onmessage = function(e) {
    // Receives a message.
    alert(e.data);
  };
  ws.onclose = function() {
    alert("closed");
  };

</script>

しかしながら、実はこれだけでは通信出来ません。

Put Flash socket policy file to your server unless you use web-socket-ruby or em-websocket as your WebSocket server. See "Flash socket policy file" section below for details.

とあるように、サーバ側のWebSocketの実装にweb-socket-rubyもしくはem-websocketを以外のものを使っている場合、Flash socket policy fileというものを送出しなければなりません。

今回WebSocketの実装にはnode.jsを使用している為、
https://github.com/3rd-Eden/FlashPolicyFileServer
これを組み込めばよさそうです。

が、色々ググってみると、もっと簡単な方法があるようです。

http://gimite.net/pukiwiki/index.php?Flash%A4%CE%A5%BD%A5%B1%A5%C3%A5%C8%A5%DD%A5%EA%A5%B7%A1%BC%A5%D5%A5%A1%A5%A4%A5%EB#x9735172

こちらの記事にあるように、単純にサーバの843ポートから以下のXMLを出力すればいいだけのようですね。今回はこちらの方法を使用してみます。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <allow-access-from domain="*" to-ports="6666"/>
</cross-domain-policy>

この例では、6666番のポートを全てのドメインに対して許可する。という感じです。
上記の記事の例ではinetdを使ったものになっていますが、うちのサーバはCentOS6を使っている為、これをxinetdで動かすようにしてみます。

まずは in.flashpolicyd.rb をダウンロード
/path/to/cross-domain.xmlというファイルを用意し、上記のXMLを記入
/etc/servicesに以下を追記
flashpolicy 843/tcp

/etc/xinetd.d/flashpolicy を作成し、以下をコードを書く

service flashpolicy
{
        disable                 = no
        port                    = 843
        socket_type             = stream
        wait                    = no
        user                    = nobody
        server                  = /path/to/in.flashpolicyd.rb
        server_args             = /path/to/cross-domain.xml
}

sudo /etc/init.d/xinetd restart

これで無事に843番ポートが開き、IEでもFlashを使った擬似WebSocketを利用した通信が可能になりました！

いやーJavaScriptって面白いですね！

さてさて、久しぶりの技術系のエントリでございました。
GlueSupportの新バージョンにご期待下さいませ。

# 先日の役員会議で社長はもっとブログを書け！と喝を頂きましたので続けられるよう頑張ります！

Kotalog

2013年4月4日木曜日

WebSocketを古いブラウザで使用する時のTips

0 件のコメント:

久しぶりにブログを書く

このブログを検索