JavaScript Advent Calendar 2010 の23日目です。

最近WebSocketを色々試してました。 WebSocketはブラウザとサーバ間で双方向通信が出来るプロトコルです。

WebSocketChatWebSocketSlideとかを作りましたが、Javascript側があまり慣れていないこともあってどうしても表示処理部分とWebSocketオブジェクトの管理がごちゃごちゃになりすぎるので、WebSocket接続イベント登録用のライブラリを作りました。

使う人は中身を知らなくてもwebsocketのイベント時の表示を考えるだけで大丈夫なように作ったつもりです。 表示部分がないのでライブラリファイルの使い回しが可能ですね。

本当ならecho serverを作って試してもらうとかする方が良かったんですが、すいませんタイムリミットです。

jWebSocketDelegate.js

使い方


<script type="text/javascript" src="js/jWebSocketDelegate.js"></script>
<script type="text/javascript">
    //デリゲートオブジェクト取得
    var ws = jWebSocketDelegate( "exsample.com/ws/", true );

    //websocket自動接続しない場合(第ニ引数isAutoStart = false や 省略時)
    //var ws = jWebSocketDelegate( "exsample.com/ws/");
    //window.onloadやボタンクリックで接続を開始
    //window.addEventListener( "load", function(){  ws.start(); }, false );

    ws.open = function() { ... /*接続通知*/ };
    ws.message = function( event ) { alert( event.data ); ... /* event.dataがサーバから送られてくる文字列*/ };
    ws.close = function() { ... /*切断通知*/ };

    ws.send( msg ); /*サーバ側へ送る文字列、お好みでjsonなどで送る*/
</script>
Delegateオブジェクト取得

jWebSocketDelegate( hostpath, isAutoStart )

hostpath

『ws( or wss )://』 以降のパスを指定します。

例:exsample.com/ws/

isAutoStart(省略可能)

デフォルトはfalseです。 その場合、任意のタイミングで start()を実行して下さい。

trueに設定するとwindow.openのタイミングで自動的にstart()を実行します。

その他

unload時にwebsocketがcloseしていない時は内部で自動的にclose()を実行します。

イベント登録

イベントの登録は次の3つです。

  • ・open
  • ・message
  • ・close

ソース

githubに置いてあります