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>