您的位置：首页 > Web前端 > JavaScript

javascript之ProtoBuf在websocket中的使用

2017-06-30 17:20 99 查看
因为ProtoBuf的序列化效率和大小都非常好，所以它在网络通信上面应用越来越多；而webosocket也随着web3.0应用越来越广泛，而将这两个结合在一起的也会慢慢形成一种趋势；本人是为了测试自已写的一个C#websocket，所以在web上面结合pb也写了一个js实例:

1.首先下载protobuf.js

2.引入protobuf相关js文件

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

3.创建proto文件

1packagewenlipackage;
2syntax="proto3";
3
4messageWSMessage{
5requiredstringid=1;
6requiredstringcontent=2;
7requiredstringsender=3;
8requiredstringtime=4;
9}


js的protobuf格式类型有

FieldtypeExpectedJStype(create,encode)Conversion(fromObject)
s-/u-/int32
s-/fixed32
number
(32bitinteger)
value|0
ifsigned
value>>>0
ifunsigned
s-/u-/int64
s-/fixed64
Long
-like(optimal)
number
(53bitinteger)
Long.fromValue(value)
withlong.js
parseInt(value,10)
otherwise
float
double
number
Number(value)
bool
boolean
Boolean(value)
string
string
String(value)
bytes
Uint8Array
(optimal)
Buffer
(optimalundernode)
Array.<number>
(8bitintegers)
base64.decode(value)
ifa
string

Object
withnon-zero
.length
isassumedtobebuffer-like
enum
number
(32bitinteger)		Looksupthenumericidifa
string
messageValidmessage
Message.fromObject(value)
4.初始化protobuf，对相关数据进行序列化和反序列化

1<scripttype="text/javascript">
2varWSMessage;
3varwsmessage;
4varbuffer;
5protobuf.load("/proto/Message.proto",function(err,root){
6if(err)throwerr;
7WSMessage=root.lookup("wenlipackage.WSMessage");
8wsmessage=WSMessage.create({id:"1",content:"hello",sender:"web",time:newDate().getTime()});
9buffer=WSMessage.encode(wsmessage).finish();
10});
11</script>


WSMessage是一个解码编码器

wsmessage是具体的某个定义的proto实例

buffer是一个8位无符号的字节数组

[b]5.连接到websocket并发送序列化的消息和接收反序列化的消息[/b]

1<scripttype="text/javascript">
2varwsUri="ws://127.0.0.1:8082/";
3varoutput;
4functioninit(){
5output=document.getElementById("output");
6testWebSocket();
7}
8functiontestWebSocket(){
9websocket=newWebSocket(wsUri);
10websocket.onopen=function(evt){
11onOpen(evt)
12};
13websocket.onclose=function(evt){
14onClose(evt)
15};
16websocket.onmessage=function(evt){
17onMessage(evt)
18};
19websocket.onerror=function(evt){
20onError(evt)
21};
22}
23functiononOpen(evt){
24writeToScreen("CONNECTED");
25doSend(buffer);
26}
27functiononClose(evt){
28writeToScreen("DISCONNECTED");
29}
30functiononMessage(evt){
31varreader=newFileReader();
32reader.readAsArrayBuffer(evt.data);
33reader.onload=function(e){
34varbuf=newUint8Array(reader.result);
35writeToScreen('<spanstyle="color:blue;">RESPONSE:'+WSMessage.decode(buf).content+'</span>');
36}
37}
38functiononError(evt){
39writeToScreen('<spanstyle="color:red;">ERROR:</span>'+evt.data);
40}
41functiondoSend(message){
42writeToScreen("SENT:"+wsmessage.content);
43websocket.send(buffer);
44}
45functionwriteToScreen(message){
46varpre=document.createElement("p");
47pre.style.wordWrap="break-word";
48pre.innerHTML=message;
49output.appendChild(pre);
50}
51window.addEventListener("load",init,false);
52</script>


上面因为我的websocketserver返回一是二进制，所以浏览器接收到的是一个blob，这里注意对blob的处理



6.互通测试





转载请标明本文来源：http://www.cnblogs.com/yswenli/p/7099809.html
更多内容欢迎star作者的github：https://github.com/yswenli/GFF
如果发现本文有什么问题和任何建议，也随时欢迎交流~



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航