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>

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. Java基础2一基础语法

    1.标识符 定义:在Java中给类名.方法名.包名,参数名等命名时使用的字符序列即标识符 规则: 由字母.数字.下划线和$符组成 不能以数字开头 长度无限制 严格区分大小写 不能是java中的保留关键 ...

  2. redis的基本命令

    一.String类型的键值对 给一个变量赋值 set varName varVal eg 得到一个变量的值 get varName eg 删除一个变量 del varName eg del nume ...

  3. C#中跨线程访问控件

    net 原则上禁止跨线程访问控件,因为这样可能造成错误的发生,推荐的解决方法是采用代理,用代理方法来间接操作不是同一线程创建的控件. 第二种方法是禁止编译器对跨线程访问作检查,可以实现访问,但是出不出 ...

  4. css table布局

    表格布局有两种方式: 1.HTML Table(<table>标签)和 2. CSS Table(display:table 等相关属性). HTML Table是指使用原生的<ta ...

  5. SciSharpCube：容器中的SciSharp，.NET机器学习开箱即用

    SciSharp Cube 在Docker容器中快速体验SciSharp机器学习工具的最新功能. 项目地址:https://github.com/SciSharp/SciSharpCube 从Dock ...

  6. Go 语言一本通

    什么是GO语言? Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发 ...

  7. JS中增加日期格式化原型函数之prototype

    /** * javascript Date format(js日期格式化) * 对Date的扩展,将 Date 转化为指定格式的String 月(M).日(d).小时(h).分(m).秒(s).季度( ...

  8. Zookeeper 使用

    转自:https://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ 安装和配置详解 本文介绍的 Zookeeper 是以 3.2. ...

  9. web service服务是查询QQ用户是否在线

    使用php5开发客户端: <?php try { //$client = new SoapClient("HelloService.wsdl",array('encoding ...

  10. [luogu1600 noip2016] 天天爱跑步 （树上差分）

    题目描述 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.<天天爱跑步>是一个养成类游戏,需要玩家每天按时上线,完成打卡任务. 这个游戏的地图可以看作一一棵 ...