javascript前端如何使用google-protobuf

1.首先下载google的protobuf的compiler，通过编译器可以将.proto文件转换为想要的语言文件。

2.写一个proto文件

syntax = "proto3";

message messagebody{
    //工厂 3G
    string factory = 1;
    
    //设备id 3918173069
    string deviceId = 2;
    
    //内容长度的长度   消息类型+消息主体 = 内容长度
    string length = 3;
    
    //消息类型
    string type = 4;
    
    //消息主体
    string body = 5;
    
    //时间戳
    string timeStamp = 6;
    
    //发送人
    string sender = 7;
    
    //接收人
    string receiver = 8;
    
    //用户组编号
    string groupId =9;
}

文件保存为 MessageBody.proto 

3.编译

F:\工具\portobuf>protoc.exe --js_out=import_style=commonjs,binary:. js\MessageBody.proto

完成后会生成一个MessageBody_pb.js的文件，这里面就是protobuf的API和一些函数。

如果是node.js的话就直接可以使用了，不过前段用的话还需要做一些处理。

4.安装node.js

5.node.js编译

　　

npm install -g require(对库文件的引用库)

  npm install -g browserify(这个是用来打包成前端使用的js文件)

  最后我们执行
  npm install google-protobuf

 

会在当前目录下生成一个文件夹，里面装的就是protobuf的库文件。

必须要在需要打包的目录下 执行  npm install google-protobuf ，否则会找不到库文件 导致不能打包

都装好以后，只需要再写一个导出文件用browserify执行打包即可

var MessageBody = require('./MessageBody_pb');  
  
    module.exports = {  
        DataProto: MessageBody  
    }

保存为exports.js。

6.对文件进行编译打包

执行命令

browserify exports.js > MessageBody.js

然后会生成一个MessageBody.js文件

也可以直接保存一个bat打包

browserify Message_pb.js > message.js && browserify MessageBody_pb.js > message-body.js
pause

保存为jsbuild.bat。

就可以使用这个js引用了。

7.前段引用

<html>
<head>
<meta charset = "UTF-8">  
  <script type="text/javascript" src="js/MessageBody.js"></script> 
</head>
<body>
<script type="text/javascript">
var socket;
if(!window.WebSocket){
    window.WebSocket = window.MozWebSocket; 
}
if(window.WebSocket){
    socket = new WebSocket("ws://localhost:8111/websocket");
    socket.binaryType = "arraybuffer"; 
    socket.onmessage = function(event){
        var ta = document.getElementById("responseText");
        var data;
        if (event.data instanceof ArrayBuffer){
            data =  proto.messagebody.deserializeBinary(event.data);      //如果后端发送的是二进制帧（protobuf）会收到前面定义的类型
        }else{
            data = event.data;                //后端返回的是文本帧时触发
        }

        //ta.value = "";
        ta.value = data;
        
    };
    socket.onopen = function(){
        var ta = document.getElementById("responseText");
        ta.value = "打开WebSocket服务正常，浏览器支持WebSocket.";
    };
    socket.onclose = function(){
        var ta = document.getElementById("responseText");
        ta.value = "WebSocket 关闭";
    };
}else{
    alert("抱歉你的浏览器不支持WebSocket协议.");
}

function send(message,deviceid){
    if(!window.WebSocket){return;}
    if(socket.readyState == WebSocket.OPEN){
        //发送的内容给服务器
          var content = new proto.messagebody();
        content.setFactory("3G");//厂商
        content.setDeviceid(deviceid);//设备id
        content.setLength("0009");//长度
        content.setType(message);//类型
        content.setBody("0,150,56");//内容
        
        var bytes = content.serializeBinary();
        //var bytes = " [3G*3919753124*0009*LK,0,12,94]";
        socket.send(bytes);  
        console.log("content:"+bytes);        
    }else{
        alert("WebSocket链接没有建立成功.");
    }
}
</script>
<h2>Hello World!</h2>
<br>
<form onsubmit = "return false;">
<input type="text" name="deviceid" value="admin"/>
<input type="text" name="message" value="LK"/>
<br><br>
<input type="button" value="发送" onclick="send(this.form.message.value,this.form.deviceid.value)"/>
<hr>
<textarea id="responseText" style="width:500px;height:300px;"></textarea>
</form>
</body>
</html>

 

posted @ 2017-12-12 17:36  不朽丶  阅读(6274)  评论(1)  编辑  收藏  举报
页脚