opamp_sando's blog

クソザコが割りと適当なことを書くためにある備忘録です。あとたまに普通の日記も書きます

PlayではじめてのWebSocket

websocketなる技術をPlay with scalaな感じで使ってみた。

作ったサンプルコードはこちら

playwebsocketsample1

参考にさせて頂いた資料はこちら

http://www.playframework-ja.org/documentation/2.0.2/ScalaWebSockets
http://www.slideshare.net/kamekoopa/playwebsocket
http://numa08.hateblo.jp/entry/2013/06/26/010046

controllers/Application.scala

若干説明を書いておく...

def index = Action{request =>
   Ok(views.html.index("test"))
} 

は、views/main.scala.htmlをブラウザに返す。これにはwebsocket client用のコードが記述されている。

def wsindex = WebSocket.using[String]{request => 
    (Iteratee.foreach[String]{str => println(str)}.mapDone { _ => println("Disconnected")},Enumerator("Hello"))
}

は、WebSocket用のindexで従来のActionの代わりにWebSocketを使う。
[String]はどうやらString型のデータをやりとりするという意味らしい。
このusingに渡している関数はinとoutのチャンネルを含むタプルを返す。 それぞれ取り出すと...

Iteratee.foreach[String]{str => println(str)}.mapDone { _ => println("Disconnected")}

Enumerator("Hello")

はじめのやつはclientから飛んできたデータを標準出力に出力(println)して、切断(EOF)が飛んできた場合は"Disconnected"をprintlnする。
で、2番目のやつは"Hello"という文字列をクライアントに送る。という意味らしい。
公式ドキュメントによると2番目のoutにあたるチャンネルにEOFを送るとサーバー側から接続を切断できるらしい。

views/main.scala.index

bodyだけ取り出すと...

<button id="start_ws">start</button>
<script type="text/javascript">
    (function($){
        console.log("script start");
        var webSock;

        var onMessage = function(message){
            console.log("server send " + message.data);
        };

        var onError = function(error){
            console.log("error was occurrd " + error);
        };

        var clickTurnOn = function(){
            var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket;
            webSock = new WS("ws://localhost:9000/ws");//ここはそのうち書き換えたい
            webSock.onmessage = onMessage;
            webSock.onerror = onError;
            webSock.onopen = function(){
                webSock.send("onopen was called");
                console.log("open ws");
            };
        };

        $("#start_ws").click(function(){clickTurnOn();});
    })(jQuery);
</script>

ブラウザに表示されるボタンを押すとclickTurnOn()が呼ばれてサーバーの/wsにアクセスしてWebSocket接続が開始される。

ブラウザに何か表示させるようにしてもよかったがJSあたりが怪しいのでconsole.logで色々表示するようにしてみた。

Firefox ブラウザ無料ダウンロード