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:. jsMessageBody.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="500px;height:300px;"></textarea> </form> </body> </html>