Firefox, websockets and odd behaviours

Question

Background:

• Using WebSockets with JavaScript + Play! framework (2.2).
• Can send and receive data fine in Chrome.
• Can only receive data (from server) in Firefox as send() doesn't trigger any callbacks.

In addition to the send issue, and in Firefox only again, the tab for the page is always stuck on "connecting" while the spinner keeps spinning (see figure 1).

Misbehaving Browser: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0)(Firefox 24.0)

                                                       

                               (Figure 1. Firefox tab after page has loaded and data is shown)

Any time I refresh the web page, I receive the error below, attributed to the constant page loading behaviour I'm sure.

The connection to ws://localhost:9000/ was interrupted while the page was loading.

The entire JavaScript code:

---

$(function() {
    var chatSocket = new WebSocket("@routes.Application.getMetaData().webSocketURL(request)");

    var sendMessage = function() {
        chatSocket.send(JSON.stringify({
            id: "unique",
            name: "a name",
            age: 22
        }));
    }

    var receiveEvent = function(event) {
        var data = JSON.parse(event.data)
        document.write(data.age);
        document.write(data.name);
        document.write(data.message);
        document.write("\n");
        sendMessage();
        chatSocket.close();
    }
    chatSocket.onmessage = receiveEvent
})

Now In the past, I've been trying with MozWebSocket instead of the standard WebSocket, but I get nothing rendered on screen using that module therefore unless there is an angle I've missed, WebSocket is the better one to use.

The relevant Play! block:

---

public static WebSocket<JsonNode> getMetaData() {
    return new WebSocket<JsonNode>() {

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

            // For each event received on the socket,
            in.onMessage(new Callback<JsonNode>() {
                @Override
                public void invoke(JsonNode jsonNode) {
                    System.out.println("Message Incoming!");
                    System.out.println(jsonNode.get("id"));
                    System.out.println(jsonNode.get("name"));
                    System.out.println(jsonNode.get("age"));
                }
            });


            // When the socket is closed.
            in.onClose(new Callback0() {
                public void invoke() {
                    System.out.println("Disconnected");

                }
            });

            ObjectNode node = Json.newObject();
            node.put("message", "hello");
            node.put("name", "client");
            node.put("age", 1);

            out.write(node);

            //same result commented/uncommented
            out.close();
        }
    };
}

So in Chrome, the flow would be:

1. document.write(...)
2. "Message Incoming!"
3. ... JSON attributes
4. "Disconnected"

But in Firefox, the flow is:

1. document.write(...)
2. "Disconnected"

Any help in diagnosing these problems would be greatly appreciated. I have no intention of supporting IE, but having both Mozilla and Chrome working would be great.

Other JavaScript Warnings:

Below is a warning I occasionally get in Firefox's console while pointing at the "ws" protocol as the culprit. What its relevance is to my problem, I do not know.

Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

Answer 1

You call document.write() after the document is loaded, which then implies document.open() which in turn replaces the document and by that unloads the old one and aborts stuff like timeouts or websockets.

Use something other than document.write() and you should be fine.