The use of JavaScript protobuf in WebSocket

because Protobuf's serialization efficiency and size are very good, so it is used more and more in network communication, and Webosocket also with the web3.0 application more and more extensive, and the two together will slowly form a trend; I was to test a self-written C # WebSocket, so in the web above the combination of PB also wrote a JS instance:

1. First download protobuf.js

2. Introduction of PROTOBUF Related JS file

<script src= "/js/protobuf.js" ></script>

3. Create a Proto file

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

1 package wenlipackage;2 syntax = "Proto3"; 3 4 message Wsmessage {5 Required String id = 1;6 Required string con Tent = 2;7 Required String sender = 3;8 Required String time = 4;9}

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

JS's protobuf format type has

Field Type	expected JS type (create, encode)	Conversion (fromobject)
s -/U-/INT32 s-/fixed32	number   (+ bit integer)	value | 0  if signed value >>> 0  if unsigned
s -/U-/INT64 s-/fixed64	long -like (optimal) number   (	style= "Margin:0px;padding:3px;border-color: #C0C0C0; Border-collapse: Collapse; " >long.fromvalue (value)  with long.js parseint (value, ten)   otherwise
Float Double	number	Number(value)
bool	boolean	Boolean(value)
s Tring	string	string (value)
b Ytes	uint8array   (optimal) Buffer   (Optimal under node) ARRAY.<NUMBER>   (8 bit integers)	base64.decode (value)  if a  string object  with Non-zero  .length  is assumed to be buffer-like
Enum	number(A-bit integer)	Looks up the numeric ID if astring
Message	Valid message	Message.fromObject(value)

4. Initialize PROTOBUF, serialize and deserialize related data

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

 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>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

Wsmessage is a decoding encoder

Wsmessage is a specific definition of a proto instance that is a 8-bit unsigned byte array

5. Connect to the WebSocket and send the serialized message and receive the deserialized message

650) this.width= 650, "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

 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&Nbsp;                onopen ( EVT) 12             };13              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);26         }27          function onclose (EVT)  {28              writetoscreen ("Disconnected");29          }30         function onmessage (EVT)  {31               var reader = new filereader ();32              reader.readasarraybuffer (Evt.data);33              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      &Nbsp;       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>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

Above because my websocket server returns a binary, so the browser receives a blob, where the processing of the Blob is noted

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/542396/201706/542396-20170630162504758-120991600. PNG "style=" margin:0px;padding:0px;border:0px; "/>

6. Interoperability Testing

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/542396/201706/542396-20170630170848758-2013149840. PNG "style=" margin:0px;padding:0px;border:0px; "/>

The use of JavaScript protobuf in WebSocket