I created a WebSocket connection to my webserver to receive some data. However, when I log the event that I receive in the onmessage
function, then I cannot see the real content of the data.
When I copy the network connection that my Chrome browser v32 opens as a curl command and run it on my OS console, then everything works fine. So I think that somehow my WebSocket setup must be wrong. The event.data
object is an instance of Blob
.
Here is my code (actually CoffeeScript, but easy to understand):
JavaScript
x
14
14
1
socket = new WebSocket "wss://myserverurl/some-endpoint"
2
3
socket.onopen = (event) ->
4
console.log 'Connection opened (WebSocket)'
5
6
socket.onclose = (event) ->
7
console.log 'Connection closed (WebSocket)'
8
code = event.code
9
reason = event.reason
10
wasClean = event.wasClean
11
12
socket.onmessage = (event) ->
13
console.log JSON.stringify event
14
The event
that I get:
JavaScript
1
41
41
1
{
2
"ports": [],
3
"data": {
4
"type": "",
5
"size": 594
6
},
7
8
"cancelBubble": false,
9
"returnValue": true,
10
"srcElement": {
11
"binaryType": "blob",
12
"extensions": "",
13
"protocol": "",
14
"onerror": null,
15
"bufferedAmount": 0,
16
"readyState": 1
17
},
18
"defaultPrevented": false,
19
"timeStamp": 1390578698613,
20
"cancelable": false,
21
"bubbles": false,
22
"eventPhase": 2,
23
"currentTarget": {
24
"binaryType": "blob",
25
"extensions": "",
26
"protocol": "",
27
"onerror": null,
28
"bufferedAmount": 0,
29
"readyState": 1
30
},
31
"target": {
32
"binaryType": "blob",
33
"extensions": "",
34
"protocol": "",
35
"onerror": null,
36
"bufferedAmount": 0,
37
"readyState": 1
38
},
39
"type": "message"
40
}
41
Advertisement
Answer
Ok, I found the solution! I have to read the data that comes as a Blob
with a FileReader
:
JavaScript
1
19
19
1
socket = new WebSocket 'wss://myserverurl/some-endpoint'
2
socket.binaryType = 'blob'
3
4
socket.onopen = (event) ->
5
console.log 'Connection opened (WebSocket)'
6
7
socket.onclose = (event) ->
8
console.log 'Connection closed (WebSocket)'
9
code = event.code
10
reason = event.reason
11
wasClean = event.wasClean
12
13
socket.onmessage = (event) ->
14
if event.data instanceof Blob
15
reader = new FileReader()
16
reader.onload = ->
17
console.log reader.result
18
reader.readAsText event.data
19
Alternatively, in ES2015:
JavaScript
1
27
27
1
// Create socket
2
socket = new WebSocket("wss://example.org/ws");
3
socket.binaryType = "blob";
4
5
// Log socket opening and closing
6
socket.addEventListener("open", event => {
7
console.log("Websocket connection opened");
8
});
9
socket.addEventListener("close", event => {
10
console.log("Websocket connection closed");
11
});
12
13
// Handle the message
14
socket.addEventListener("message", event => {
15
if (event.data instanceof Blob) {
16
reader = new FileReader();
17
18
reader.onload = () => {
19
console.log("Result: " + reader.result);
20
};
21
22
reader.readAsText(event.data);
23
} else {
24
console.log("Result: " + event.data);
25
}
26
});
27