Playframework付属のサンプル'websocket-chat'を見てみる(2/4) ref: http://qiita.com/yyyske/items/0d00e5e352b7078a501e

Application.java

public static WebSocket<JsonNode> chat(final String username) {
    return new WebSocket<JsonNode>() {

        // Called when the Websocket Handshake is done.
        public void onReady(WebSocket.In<JsonNode> in, WebSocket.Out<JsonNode> out){

            // Join the chat room.
            try { 
                ChatRoom.join(username, in, out);
            } catch (Exception ex) {
                ex.printStackTrace();
            }
        }
    };
}

chatRoom.scala.html

@(username: String)

@main(username) {

    <div class="page-header">
        <h1>Welcome to the chat room 
            <small>You are chatting as @username</small></h1>
    </div>

    <div id="onError" class="alert-message error">
        <p>
            <strong>Oops!</strong> <span></span>
        </p>
    </div>

    <div id="onChat" class="row">
        <div class="span10" id="main">
            <div id="messages">
            </div>
            <textarea id="talk"></textarea>
        </div>
        <div class="span4">
            <h2>Members</h2>
            <ul id="members">
            </ul>
        </div>
    </div>

    <script type="text/javascript" charset="utf-8"
        src="@routes.Application.chatRoomJs(username)"></script>

}

chatRoom.scala.js

@(username: String)

$(function() {
    var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
    var chatSocket = 
        new WS("@routes.Application.chat(username).webSocketURL(request)")

    var sendMessage = function() {
        chatSocket.send(JSON.stringify(
            {text: $("#talk").val()}
        ))
        $("#talk").val('')
    }

    var receiveEvent = function(event) {
        var data = JSON.parse(event.data)

        // Handle errors
        if(data.error) {
            chatSocket.close()
            $("#onError span").text(data.error)
            $("#onError").show()
            return
        } else {
            $("#onChat").show()
        }

        // Create the message element
        var el = $('<div class="message"><span></span><p></p></div>')
        $("span", el).text(data.user)
        $("p", el).text(data.message)
        $(el).addClass(data.kind)
        if(data.user == '@username') $(el).addClass('me')
        $('#messages').append(el)

        // Update the members list
        $("#members").html('')
        $(data.members).each(function() {
            var li = document.createElement('li');
            li.textContent = this;
            $("#members").append(li);
        })
    }

    var handleReturnKey = function(e) {
        if(e.charCode == 13 || e.keyCode == 13) {
            e.preventDefault()
            sendMessage()
        }
    }

    $("#talk").keypress(handleReturnKey)

    chatSocket.onmessage = receiveEvent

})

file2.html

src="/assets/javascripts/chatroom.js?username=a"

file5.js

var chatSocket = 
    new WS("@routes.Application.chat(username).webSocketURL(request)")

file6.js

var chatSocket = new WS("ws:\/\/localhost:9000\/room\/chat?username=a")

routes

GET    /room/chat    controllers.Application.chat(username)