Ausführliche Erklärung zum Herunterladen und Verwenden von protobuf.js

Da die Serialisierungseffizienz und -größe von ProtoBuf sehr gut ist, wird es immer häufiger in der Netzwerkkommunikation verwendet. Webosocket wird als Web3.0 immer häufiger verwendet, und diese beiden werden zusammengeführt ein Trend; ich wollte einen C#-Websocket testen, den ich geschrieben habe, also habe ich auch ein js-Beispiel im Web geschrieben, kombiniert mit pb:

1 .js

2. Einführung von Protobuf-bezogenen JS-Dateien

&lt ;/script>

3. Protodatei erstellen

1 package wenlipackage;2 syntax = "proto3";3 4 message WSMessage { 5 required string id = 1;6 required string content = 2;7 required string sender = 3;8 required string time = 4;9 } Protobuf-Formattyp von js Es gibt

Field type Expected JS type (create, encode) Conversion (fromObject) s-/u-/int32 s-/fixed32 number (32 bit integer) value | 0 if signed value >>> 0 if unsigned s-/u-/int64 s-/fixed64 Long -like (optimal) number (53 bit integer) Long.fromValue(value) with long.js parseInt(value, 10) otherwise float double number Number(value) bool boolean Boolean(value) string string String(value) bytes Uint8Array (optimal) Buffer (optimal under node) Array. (8 bit integers) base64.decode(value) if a string Object with non-zero .length is assumed to be buffer-like enum number (32 bit integer) Looks up the numeric id if a string message Valid message Message.fromObject(value) 4. Protobuf initialisieren, zugehörige Daten serialisieren und deserialisieren

1 2 var WSMessage; 3 var wsmessage; 4 var buffer; 5 protobuf.load("/proto/Message.proto", function (err, root) { 6 if (err) throw err; 7 WSMessage = root.lookup("wenlipackage.WSMessage"); 8 wsmessage = WSMessage.create({ id: "1", content: "hello", sender: "web", time: new Date().getTime() }); 9 buffer = WSMessage.encode(wsmessage).finish(); 10 }); 11 WSMessage是一个解码编码器 wsmessage是具体的某个定义的proto实例 是一个8位无符号的字节数组 5. Mit Websocket verbinden und serialisierte Nachrichten senden und deserialisierte Nachrichten empfangen

1 2 var wsUri = "ws://127.0.0.1:8082/"; 3 var output; 4 function init() { 5 output = document.getElementById("output"); 6 testWebSocket(); 7 } 8 function testWebSocket() { 9 websocket = new WebSocket(wsUri);10 websocket.onopen = function (evt) {11 onOpen(evt)12 }; websocket.onclose = function (evt) {14 onClose(evt)15 };16 websocket.onmessage = function (evt) {17 onMessage(evt)18 };19 websocket.onerror = function (evt) {20 onError(evt)21 };22 }23 function onOpen(evt) {24 writeToScreen("CONNECTED");25 doSend(buffer); }27 function onClose(evt) {28 writeToScreen("DISCONNECTED");29 }30 function onMessage(evt) {31 var reader = new FileReader();32 reader.readAsArrayBuffer(evt.data); reader.onload = function (e) {34 var buf = new Uint8Array(reader.result);35 writeToScreen(' RESPONSE: ' + WSMessage.decode(buf).content + ' ');36 }37 }38 function onError(evt) {39 writeToScreen(' ERROR: ' + evt.data);40 }41 function doSend(message) {42 writeToScreen("SENT: " + wsmessage.content);43 websocket.send(buffer);44 }45 function writeToScreen(message) {46 var pre = document.createElement("p");47 pre.style.wordWrap = "break-word";48 pre.innerHTML = message;49 output.appendChild(pre);50 }51 window.addEventListener("load", init, false);52 Weil mein Websocket Der Server hat einen Binärcode zurückgegeben, der Browser hat hier auf die Verarbeitung des Blobs geachtet

6 Interoperabilitätstest