Detailed explanation of downloading and using protobuf.js

Because ProtoBuf's serialization efficiency and size are very good, it is used more and more in network communications; and webosocket is becoming more and more widely used as web3.0, and the combination of the two Together they will gradually form a trend; I wanted to test a C# websocket I wrote, so I also wrote a js example on the web combined with pb:

1. First download protobuf.js

2. Introduce protobuf related js files

3. Create proto file

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 }

The protobuf format type of js is

##float##boolbooleanBoolean(value)stringstringString(value)bytesUint8Arraybase64.decode(value)enumnumberstringmessageMessage.fromObject(value)## 4. Initialize protobuf, serialize and reverse the relevant data Serialization

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
double	number	Number(value)
	(optimal)Buffer (optimal under node)Array. (8 bit integers)	if a string Object with non-zero .length is assumed to be buffer-like
	(32 bit integer)Looks up the numeric id if a
Valid message

 1 <script type="text/javascript">
 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 </script>

WSMessage是一个解码编码器

wsmessage是具体的某个定义的proto实例
是一个8位无符号的字节数组

5. Connect to websocket and send serialized message and receive Deserialized message

 1 <script type="text/javascript"> 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('<span style="color: blue;">RESPONSE: ' + WSMessage.decode(buf).content + '</span>');36             }37         }38         
 function onError(evt) {39             writeToScreen('<span style="color: red;">ERROR:</span> ' + 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 </script>

Because my websocket server returns a binary code, the browser receives a blob. Pay attention to the blob here. Processing

6. Interoperability test

The above is the detailed content of Detailed explanation of downloading and using protobuf.js. For more information, please follow other related articles on the PHP Chinese website!