Designing Message Formats

{ "v": 1, "type": "trade", "id": "abc", "ts": 1715900000000, "payload": { "sym": "BTC", "px": 65000.5 } }

import { encode, decode } from "@msgpack/msgpack";
ws.binaryType = "arraybuffer";
ws.send(encode({ "type": "tick", "px": 65000.5 }));
ws.addEventListener("message", (e) => console.log(decode(new Uint8Array(e.data))));

const root = await protobuf.load("chat.proto");
const Msg = root.lookupType("chat.Message");
const buf = Msg.encode(Msg.create({ "text": "hi" })).finish();
ws.send(buf);

// [u8 type][u32 length][bytes payload]
function encode(type, payload) {
  const buf = new ArrayBuffer(5 + payload.byteLength);
  const v = new DataView(buf);
  v.setUint8(0, type);
  v.setUint32(1, payload.byteLength, false);
  new Uint8Array(buf, 5).set(new Uint8Array(payload));
  return buf;
}

// sender
ws.send(JSON.stringify({ "type": "evt", "id": id, "payload": data }));
// receiver
ws.send(JSON.stringify({ "type": "ack", "id": id }));