I'm trying to send a MessagePack-encoded message from Cowboy to a browser over WebSocket, and received data is always empty or invalid. I'm able to send binary data from JS to my cowboy handler, but not vice versa. I'm using Cowboy 1.0.4 with official msgpack-erlang application. I also use msgpack-lite for my in-browser javascript.

Examples:

websocket_handler:

websocket_handle({text, <<"return encoded">>}, Req, State) ->
    %% sends encoded message to client. Client is unable to decode and fails
    {reply, {binary, msgpack:pack(<<"message">>)}, Req, State};
websocket_handle({binary, Encoded}, Req, State) ->
    %% Works as expected
    lager:info("Received encoded message: ~p", [msgpack:unpack(Encoded)]),
    {ok, Req, State};

JS:

var host = "ws://" + window.location.host + "/websocket";
window.socket = new WebSocket(host);
socket.binaryType = 'arraybuffer';
socket.onmessage = function(event) {
    var message = msgpack.decode(event.data);
    console.log(message);
};

Browser returns an error inside msgpack.min.js:

Error: Invalid type: undefined
...ion n(t){var r=i(t),e=f[r];if(!e)throw new Error("Invalid type: "+(r?"0x"+r.toSt...

If I try to output raw event.data to console, here's what I'm getting:

 ArrayBuffer {}

It seems to be empty for some reason. I'm new both to erlang and msgpack, and don't know what is going wrong. Thanks for your help!

I'm trying to send a MessagePack-encoded message from Cowboy to a browser over WebSocket, and received data is always empty or invalid. I'm able to send binary data from JS to my cowboy handler, but not vice versa. I'm using Cowboy 1.0.4 with official msgpack-erlang application. I also use msgpack-lite for my in-browser javascript.

Examples:

websocket_handler:

websocket_handle({text, <<"return encoded">>}, Req, State) ->
    %% sends encoded message to client. Client is unable to decode and fails
    {reply, {binary, msgpack:pack(<<"message">>)}, Req, State};
websocket_handle({binary, Encoded}, Req, State) ->
    %% Works as expected
    lager:info("Received encoded message: ~p", [msgpack:unpack(Encoded)]),
    {ok, Req, State};

JS:

var host = "ws://" + window.location.host + "/websocket";
window.socket = new WebSocket(host);
socket.binaryType = 'arraybuffer';
socket.onmessage = function(event) {
    var message = msgpack.decode(event.data);
    console.log(message);
};

Browser returns an error inside msgpack.min.js:

Error: Invalid type: undefined
...ion n(t){var r=i(t),e=f[r];if(!e)throw new Error("Invalid type: "+(r?"0x"+r.toSt...

If I try to output raw event.data to console, here's what I'm getting:

 ArrayBuffer {}

It seems to be empty for some reason. I'm new both to erlang and msgpack, and don't know what is going wrong. Thanks for your help!

• javascript
• websocket
• erlang
• cowboy
• messagepack

Share Improve this question Follow edited Mar 22, 2016 at 13:15 Hynek -Pichi- Vychodil 26.1k55 gold badges5555 silver badges7575 bronze badges asked Mar 22, 2016 at 11:31 Constantine EmeraldMasterConstantine EmeraldMaster 18333 silver badges77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Found the reason of my problem. The way how I tried to decode message on the client was wrong:

socket.onmessage = function(event) {
  var message = msgpack.decode(event.data);
  console.log(message);
};

The right way:

socket.onmessage = function(event) {
    var raw_binary_data = new Uint8Array(event.data);
    var message = msgpack.decode(raw_binary_data);
    console.log(message);
};

It seems like msgpack-lite doesn't support binary type. Try pack your data as a string.

{binary, msgpack:pack("message", [{enable_str, true}])}

Using Uint8Array is a valid solution for client side issue. On server to pack strings use:

msgpack:pack(<<"message">>,[{pack_str,from_binary}])

Source : Article