Home  >  Article  >  Web Front-end  >  Detailed explanation of downloading and using protobuf.js

Detailed explanation of downloading and using protobuf.js

零下一度
零下一度Original
2017-07-02 09:31:165133browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn