Situation:
- WebSockets are being utilized with JavaScript and the Play! framework (version 2.2).
- Data can be successfully sent and received in Chrome.
- In Firefox, data can only be received from the server as the send() function does not trigger any callbacks.
Furthermore, in Firefox exclusively, the tab for the page always remains stuck on "connecting" while the spinner keeps spinning (refer to figure 1).
Problematic Browser: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0)(Firefox 24.0)
Figure 1: Firefox tab displaying the page after it has loaded and data is being shown.
Upon refreshing the web page, the following error message is received due to the continuous page loading behavior:
The connection to ws://localhost:9000/ was interrupted while the page was loading.
The provided 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
})
Past attempts were made using MozWebSocket instead of the standard WebSocket, but no content was displayed on screen with that module. Therefore, unless I have overlooked something, WebSocket seems to be the better choice.
The relevant Play! code block:
public static WebSocket<JsonNode> getMetaData() {
return new WebSocket<JsonNode>() {
// Executed upon WebSocket Handshake completion.
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();
}
};
}
Therefore, in Chrome, the sequence would be:
- document.write(...)
- "Message Incoming!"
- ... JSON attributes
- "Disconnected"
However, in Firefox, the sequence is:
- document.write(...)
- "Disconnected"
Any assistance in troubleshooting these issues would be highly appreciated. While I do not intend to support IE, having both Mozilla and Chrome functioning correctly would be ideal.
Additional JavaScript Suggestions:
Occasionally, the following warning appears in Firefox's console, pointing to the "ws" protocol as the potential cause. Its relevance to my issue remains unclear.
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.