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

2.写一个proto文件

  1. syntax = "proto3";
  2.  
  3. message messagebody{
  4.     //工厂 3G
  5.     string factory = 1;
  6.  
  7.     //设备id 3918173069
  8.     string deviceId = 2;
  9.  
  10.     //内容长度的长度   消息类型+消息主体 = 内容长度
  11.     string length = 3;
  12.  
  13.     //消息类型
  14.     string type = 4;
  15.  
  16.     //消息主体
  17.     string body = 5;
  18.  
  19.     //时间戳
  20.     string timeStamp = 6;
  21.  
  22.     //发送人
  23.     string sender = 7;
  24.  
  25.     //接收人
  26.     string receiver = 8;
  27.  
  28.     //用户组编号
  29.     string groupId =9;
  30. }

文件保存为 MessageBody.proto

3.编译

  1. 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编译

　　

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

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

最后我们执行
  npm install google-protobuf

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

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

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

  1. var MessageBody = require('./MessageBody_pb');  
  2.  
  3.     module.exports = {
  4.         DataProto: MessageBody
  5.     }

保存为exports.js。

6.对文件进行编译打包

执行命令

  1. browserify exports.js > MessageBody.js

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

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

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

保存为jsbuild.bat。

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

7.前段引用

  1. <html>
  2. <head>
  3. <meta charset = "UTF-8">
  4.   <script type="text/javascript" src="js/MessageBody.js"></script>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. var socket;
  9. if(!window.WebSocket){
  10.     window.WebSocket = window.MozWebSocket;
  11. }
  12. if(window.WebSocket){
  13.     socket = new WebSocket("ws://localhost:8111/websocket");
  14.     socket.binaryType = "arraybuffer";
  15.     socket.onmessage = function(event){
  16.         var ta = document.getElementById("responseText");
  17.         var data;
  18.         if (event.data instanceof ArrayBuffer){
  19.             data =  proto.messagebody.deserializeBinary(event.data);      //如果后端发送的是二进制帧（protobuf）会收到前面定义的类型
  20.         }else{
  21.             data = event.data;                //后端返回的是文本帧时触发
  22.         }
  23.  
  24.         //ta.value = "";
  25.         ta.value = data;
  26.  
  27.     };
  28.     socket.onopen = function(){
  29.         var ta = document.getElementById("responseText");
  30.         ta.value = "打开WebSocket服务正常，浏览器支持WebSocket.";
  31.     };
  32.     socket.onclose = function(){
  33.         var ta = document.getElementById("responseText");
  34.         ta.value = "WebSocket 关闭";
  35.     };
  36. }else{
  37.     alert("抱歉你的浏览器不支持WebSocket协议.");
  38. }
  39.  
  40. function send(message,deviceid){
  41.     if(!window.WebSocket){return;}
  42.     if(socket.readyState == WebSocket.OPEN){
  43.         //发送的内容给服务器
  44.           var content = new proto.messagebody();
  45.         content.setFactory("3G");//厂商
  46.         content.setDeviceid(deviceid);//设备id
  47.         content.setLength("0009");//长度
  48.         content.setType(message);//类型
  49.         content.setBody("0,150,56");//内容
  50.  
  51.         var bytes = content.serializeBinary();
  52.         //var bytes = " [3G*3919753124*0009*LK,0,12,94]";
  53.         socket.send(bytes);
  54.         console.log("content:"+bytes);
  55.     }else{
  56.         alert("WebSocket链接没有建立成功.");
  57.     }
  58. }
  59. </script>
  60. <h2>Hello World!</h2>
  61. <br>
  62. <form onsubmit = "return false;">
  63. <input type="text" name="deviceid" value="admin"/>
  64. <input type="text" name="message" value="LK"/>
  65. <br><br>
  66. <input type="button" value="发送" onclick="send(this.form.message.value,this.form.deviceid.value)"/>
  67. <hr>
  68. <textarea id="responseText" style="width:500px;height:300px;"></textarea>
  69. </form>
  70. </body>
  71. </html>

javascript前端如何使用google-protobuf的更多相关文章

  1. google protobuf ios开发使用

    简介: protobuf 即 google protocol buffer 是一种数据封装格式协议: 比如其他经常用的xml,json等格式:protobuf的优势是效率高,同样的一份数据使用prot ...

  2. 如何在C#中使用Google.Protobuf工具

    protobuf是一个语言无关.平台无关的序列化协议,由谷歌开源提供.再加上其高性能.存储占用更小等特点,在云原生的应用中越来越广泛. 在C#中主要有两种方法来使用protobuf协议,nuget包分 ...

  3. google protobuf安装与使用

    google protobuf是一个灵活的.高效的用于序列化数据的协议.相比较XML和JSON格式,protobuf更小.更快.更便捷.google protobuf是跨语言的,并且自带了一个编译器( ...

  4. VS2013编译google protobuf 出现问题error C3861: “min”:

    问题描述: 今天用vs2013编译protobuf 2.4.1 报错: 错误 3 error C3861: "max": 找不到标识符 f:\google\protobuf\pro ...

  5. google protobuf初体验

    最近在读别人代码的时候发现一个的东西,名字叫protobuf, 感觉挺好用的,写在这里,留个记录.那么什么是protobuf 呢?假如您在网上搜索,应该会得到类似这样的文字介绍: Google Pro ...

  6. Google protobuf proto文件编写规则

    转载自: http://blog.csdn.net/yi_ya/article/details/40404231 1. 简单介绍 protobuf文件:就是定义你要的消息(类似java中的类)和消息中 ...

  7. window下编译并使用google protobuf

    参考网址: http://my.oschina.net/chenleijava/blog/261263 http://www.ibm.com/developerworks/cn/linux/l-cn- ...

  8. GOOGLE PROTOBUF开发者指南

    原文地址:http://www.cppblog.com/liquidx/archive/2009/06/23/88366.html 译者: gashero 目录 1   概览 1.1   什么是pro ...

  9. JavaScript前端框架的思考

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:现在JavaScript前端框架层出不穷,尤其Angular进入到2.x时候之后,我们 ...

随机推荐

  1. smarty 3 + codeigniter 2 + hmvc

    参考资料 https://bitbucket.org/wiredesignz/codeigniter-modular-extensions-hmvc/src/fecd39ccdf56?at=defau ...

  2. 【BZOJ3065】带插入区间k小值

    题意: 带插入,修改的区间k小值在线查询 原序列长度<=35000,插入个数<=35000,修改个数<=70000,0<=权值<=70000 题解: Orz vfleak ...

  3. alsa-lib 交叉编译以及声卡驱动测试 (转)

    l  下载alsa-utils, alsa-lib, 版本要一致 http://www.alsa-project.org/main/index.php/Download l  编译alsa-lib . ...

  4. --without-v4l ，make clean, 重新make即可。

    --without-v4l ,make clean, 重新make 2011-02-27 17:38 Error: X11 support required for GUI compilation

  5. 微信小程序 Image 图片实现宽度100%，高度自适应

    做法如下: 样式设置宽度100%, .img{ width:100%;} 添加属性 mode="widthFix", <image class="img" ...

  6. Loaded APR based Apache Tomcat Native library 1.1.24 using APR version 1.4.6.

    Loaded APR based Apache Tomcat Native library 1.1.24 using APR version 1.4.6. 我复制的几个地方: MySql C:\WIN ...

  7. Tsinsen A1206. 小Z的袜子

    /* Tsinsen A1206. 小Z的袜子 http://www.tsinsen.com/new/A1206 BZOJ 2038: [2009国家集训队]小Z的袜子(hose) http://ww ...

  8. 关于sql连接查询（内联、左联、右联、全联）

    内连接(INNER JOIN)(典型的连接运算,使用像   =   或   <>   之类的比较运算符).包括相等连接和自然连接. 内连接使用比较运算符根据每个表共有的列的值匹配两个表中的 ...

  9. 解决was6版本号过期问题

    原创作品.出自 "深蓝的blog" 博客,欢迎转载.转载时请务必注明出处.否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong ...

  10. HDU 3709

    真是跪了,一看范围就不会往枚举的方向想,没想到真用枚举加剪枝了...->——-> 解释一下代码中的上限: 例如4567,当枚举最高位时,很明显不能超过4,所以有上限,但当最高位为3以下时, ...