Protobuf.js: how to use protobuf with websocket

[tywo45]

how to use protobuf with websocket, i want to sent binary data to server use websocket. thanks!

[dcodeIO]

Make sure to set binaryType = 'arraybuffer' on the WebSocket instance and you are ready to go.

Send out the backing ArrayBuffer of the Uint8Array returned by

SomeMessage.encode(someMessageInstance).finish()

over your WebSocket (slice it if necessary), and decode the ArrayBuffer on the other side through

SomeMessage.decode(new Uint8Array(receivedArrayBuffer))

Sending, for example:

var buffer = SomeMessage.encode(someMessageInstance).finish();
mySocket.send(buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.length));

If you are planning to use WebSockets with node.js, there is the ws module (see: Sending binary data).

[tywo45]

thanks very much!
my project: https://git.oschina.net/tywo45/talent-aio, it used your long.js, protobuf.js and bytebuffer.js。

your js'code is in dist/nginx/html/ dir.

[dcodeIO]

Closing this issue for now as it hasn't received any replies recently. Feel free to reopen it if necessary!

[sust4in]

Hello, i might have some misunderstanding about websockets but let me ask you,

when ws.send(someMessage) has been called in clientside, how can i verify which message instance has been sent to servers.

const WebSocket = require('uws');
var protobuf = require("protobufjs/minimal");
var model = require("../models/bundle.js")
var protos =  model.awesomepackage
// example code
const wss = new WebSocket.Server({ port: 8180 });


wss.on('connection', function connection(ws) {


  ws.on('message', function incoming(data) {
    //which protobuf message instance coming? so i can trigger some events.
  });

});

[dcodeIO]

You could either wrap your messages in an envelope message, for example ...

message Envelope {
  oneof kind {
    SomeMessage a = 1:
    SomeOtherMessage b = 2;
  }
}

or implement a custom header for your purpose.

[opengpu]

var buf = SomeMessage.encode(someMessageInstance).finish();
mySocket.send(buf .buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.length));//1
mySocket.send(buf);//2
what's the difference between method line 1 and 2 ?

[For-thewin]

Make sure to set binaryType = 'arraybuffer' on the WebSocket instance and you are ready to go.

Send out the backing ArrayBuffer of the Uint8Array returned by

SomeMessage.encode(someMessageInstance).finish()

over your WebSocket (slice it if necessary), and decode the ArrayBuffer on the other side through

SomeMessage.decode(new Uint8Array(receivedArrayBuffer))

Sending, for example:

var buffer = SomeMessage.encode(someMessageInstance).finish();
mySocket.send(buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.length));

If you are planning to use WebSockets with node.js, there is the ws module (see: Sending binary data).

Hello, actually i meet a similar issue. In my javascript client, i get the data which type is "string" from my C++ server by webSocket. And i can not deserialize it directly. And i have tested to turn it to arraybuffer which doesn't works.

function stringToArrayBuffer(str) {
var buf = new ArrayBuffer(str.length * 2);
var bufView = new Uint16Array(buf);
for (var i = 0, strLen = str.length; i < strLen; i++) {
bufView[i] = str.charCodeAt(i);
}
return buf;
}

And i can't find the function "encode()" in javascipt also there seems no funtion to set binaryType . Instead, "binaryType" is a property, and i print it , i get "nodebuffer". So how to set the recieved data from server as 'arraybuffer'`and then i can deserialize it in protobuf. Here is my source.

client.js
var ws = require("ws");
var webCut = require("./webCut_pb");
var sock = new ws("ws://127.0.0.1:8888");
sock.on("open", function () {
console.log("connect success !!!!");
sock.send("HelloWorld1");
});

sock.on("error", function(err) {
console.log("error: ", err);
});

sock.on("close", function() {
console.log("close");
});

sock.on("message", function(data) {
console.log(sock.binaryType);
console.log(typeof(data));
});

webCut.proto
syntax = "proto3";
package vertexArray;
message Vertex
{
repeated float x = 1;
repeated float y = 2;
repeated float z = 3;
repeated float nx = 4;
repeated float ny = 5;
repeated float nz = 6;
repeated float tex = 7;
}