javascriptwebsocketplayframeworkdom-eventsplayframework-2.1

Play Framework 2.1 websockets in Chrome

I can't seem to get websocket communication to work in the Play Framework version 2.1.

I created a simple test that does nothing but send messages back and forth with a push of a button. All the code for it is below. But nothing shows up except for the button.

Has anybody seen this problem or can someone tell me what I may be doing wrong in the code below?

I am using the latest version of Chrome.

Here is my simple setup.

In Application.java

public static Result index() {
    return ok(index.render());
}

public static WebSocket<String> sockHandler() {
    return new WebSocket<String>() {
        // called when the websocket is established
        public void onReady(WebSocket.In<String> in,
                WebSocket.Out<String> out) {
            // register a callback for processing instream events
            in.onMessage(new Callback<String>() {
                public void invoke(String event) {
                    System.out.println(event);
                }
            });

            // write out a greeting
            out.write("I'm contacting you regarding your recent websocket.");
        }
    };
}

In Routes File GET / controllers.Application.index()

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.at(path="/public", file)
GET     /greeter                    controllers.Application.sockHandler()

In Index.Scala.html

@main(null) {

<div class="greeting"></div>
<button class="send">Send</button>

<script type="text/javascript" charset="utf-8">

    $(function() {
        var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
        var sock = new WS("@routes.Application.sockHandler()")

        sock.onmessage = function(event) {
            $('.greeting').append(event.data)
        }

        $('button.send').click(function() {
            sock.send("I'm sending a message now.")
        });            
    })

</script>

}

In Main.scala.html

@(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
    <title>@title</title>
    <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
    <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>
<body>
    @content
</body>

Solution

  • The problem is in

    var sock = new WS("@routes.Application.sockHandler()")

    you have to specify the protocol and the complete url in the format: ws://localhost:9000/greeter.

    Check this question to do it in javascript: How to construct a WebSocket URI relative to the page URI?