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. LeetCode 42. Trapping Rain Water 【两种解法】（python排序遍历，C++ STL map存索引，时间复杂度O（nlogn））

    LeetCode 42. Trapping Rain Water Python解法 解题思路: 本思路需找到最高点左右遍历,时间复杂度O(nlogn),以下为向左遍历的过程. 将每一个点的高度和索引存 ...

  2. App测试- adb monkey测试

    一. 安装和配置SDK 1. 下载Android SDK并解压.如下图:(如果不存在tool和platform_tool,请点击SDK Manager在线下载和更新) 2.下载完成后,配置SDK环境变 ...

  3. 文字横向滚动marquee

    <div style="width:200px; height:300px"> <marquee behavior="scroll" cont ...

  4. jsoup解析页面

    package com.java.jsoup; /** * jsoup解析网页 * @author nidegui * @version 2019年4月29日 下午5:12:02 * */ impor ...

  5. JS 100内与7相关的数

    var s =""; for(var i=0;i;i++) { if(i%7 == 0 ){ s += i+","; } else if((i-7)%10 == ...

  6. Nginx Location指令配置及常用全局变量

    ./configure的含义 在实践安装nginx的时候,不知道./configure是什么意思,这里特地记录一下. 在linux中./代表当前目录,属于相对路径../代表上一级目录,属于相对路径/代 ...

  7. with as递归调用

    一.递归调用--在代码中偶尔看到以记之,便于下次学习 https://blog.csdn.net/johnf_nash/article/details/78681060 --查询节点及其下所有子节点 ...

  8. C++基础 (6) 第六天 继承 虚函数 虚继承 多态 虚函数

    继承是一种耦合度很强的关系 和父类代码很多都重复的 2 继承的概念 3 继承的概念和推演 语法: class 派生类:访问修饰符 基类 代码: … … 4 继承方式与访问控制权限 相对的说法: 爹派生 ...

  9. Guava 是个风火轮之基础工具 (1)

    转自:http://www.jamespan.me/blog/2015/02/08/guava-basic-utilities-1/ Guava 是个风火轮之基础工具 (1) 前言 Guava 是 J ...

  10. Laravel的路由功能

    只能在当前方法内加载视图和URL跳转!