因为protobuf的序列化效率和大小都非常好，所以它在网络通信上面应用越来越多；而webosocket也随着web3.0应用越来越广泛，而将这两个结合在一起的也会慢慢形成一种趋势；本人是为了测试自已写的一个c# websocket，所以在web上面结合pb也写了一个js实例:
1.首先下载protobuf.js
2.引入protobuf相关js文件
<script src="/js/protobuf.js?1.1.11"></script>
3.创建proto文件
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 }
js的protobuf格式类型有
field typeexpected 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.<number> (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，对相关数据进行序列化和反序列化
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.连接到websocket并发送序列化的消息和接收反序列化的消息
 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>
上面因为我的websocket server 返回一是二进制，所以浏览器接收到的是一个blob，这里注意对blob的处理
6.互通测试
以上就是protobuf.js的下载与使用详解的详细内容。