javascript前端如何使用google-protobuf
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的更多相关文章
- google protobuf ios开发使用
简介: protobuf 即 google protocol buffer 是一种数据封装格式协议: 比如其他经常用的xml,json等格式:protobuf的优势是效率高,同样的一份数据使用prot ...
- 如何在C#中使用Google.Protobuf工具
protobuf是一个语言无关.平台无关的序列化协议,由谷歌开源提供.再加上其高性能.存储占用更小等特点,在云原生的应用中越来越广泛. 在C#中主要有两种方法来使用protobuf协议,nuget包分 ...
- google protobuf安装与使用
google protobuf是一个灵活的.高效的用于序列化数据的协议.相比较XML和JSON格式,protobuf更小.更快.更便捷.google protobuf是跨语言的,并且自带了一个编译器( ...
- VS2013编译google protobuf 出现问题error C3861: “min”:
问题描述: 今天用vs2013编译protobuf 2.4.1 报错: 错误 3 error C3861: "max": 找不到标识符 f:\google\protobuf\pro ...
- google protobuf初体验
最近在读别人代码的时候发现一个的东西,名字叫protobuf, 感觉挺好用的,写在这里,留个记录.那么什么是protobuf 呢?假如您在网上搜索,应该会得到类似这样的文字介绍: Google Pro ...
- Google protobuf proto文件编写规则
转载自: http://blog.csdn.net/yi_ya/article/details/40404231 1. 简单介绍 protobuf文件:就是定义你要的消息(类似java中的类)和消息中 ...
- window下编译并使用google protobuf
参考网址: http://my.oschina.net/chenleijava/blog/261263 http://www.ibm.com/developerworks/cn/linux/l-cn- ...
- GOOGLE PROTOBUF开发者指南
原文地址:http://www.cppblog.com/liquidx/archive/2009/06/23/88366.html 译者: gashero 目录 1 概览 1.1 什么是pro ...
- JavaScript前端框架的思考
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:现在JavaScript前端框架层出不穷,尤其Angular进入到2.x时候之后,我们 ...
随机推荐
- 单元测试之Mock
为什么需要Mock. 真实对象具有不确定的行为.所以会产生不可预测的结果. 真实对象很难被创建. 真实对象的某些行为很难被触发(如网络错误). 真实对象令程序的运行速度很慢. 真实对象有(或者是)用户 ...
- 第十课： - 读取/写入Excel/Json格式数据
第 10 课 从DataFrame到Excel 从Excel到DataFrame 从DataFrame到JSON 从JSON到DataFrame In [1]: import pandas as pd ...
- Android PopupWindow使用方法小结
前几天要用到PopupWindow,一时竟想不起来怎么用,赶紧上网查了查,自己写了个demo,并在此记录一下PopupWindow的用法. 使用场景 PopupWindow,顾名思义,就是弹窗,在很多 ...
- 性能问题解决案例01——sybase数据库内存问题
最近湖南现场反馈问题,所有电子签章页面打不开文书(pdf格式),后台日志没报任何错误. 1.首先想到是签章的ocx控件问题,检查ocx控件安装,发现其他电脑也打不开文书,测试页面可以直接打开pdf文档 ...
- 深度学习：又一次推动AI梦想（Marr理论、语义鸿沟、视觉神经网络、神经形态学）
几乎每一次神经网络的再流行,都会出现:推进人工智能的梦想之说. 前言: Marr视觉分层理论 Marr视觉分层理论(百度百科):理论框架主要由视觉所建立.保持.并予以解释的三级表象结构组成,这就是: ...
- 三维重建：Kinect几何映射-SDK景深数据处理
此文大量使用XML,非C类的代码,看看图即可. 原文链接:Kinect for Windows SDK开发入门(五):景深数据处理 3. 对物体进行测量 像上篇文章中对深度值测量原理进行讨论的那样,像 ...
- AS3.0 扑克牌乱序排列法洗牌
package { /* *@ClassName:package::PokerMain *@Intro:这是一个初始化1-52扑克牌,然后进行乱序排列进行洗牌: *@Author:非若 *@Date: ...
- Node笔记(1)
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. 进程 1.process.argv 用于获取当前进程信息 0--node.exe的目录1--js文件的目录2 ...
- 【vue】v-if和v-show的区别
今天来捋一下vue中的v-if与v-show的区别 先来看一下vue官方文档对他们的解释 2.从实现方式来看: v-if是当依赖的值变为false时,直接让元素消失,html代码也会消失,相当于直接在 ...
- [luogu4107 HEOI2015] 兔子与樱花（树形dp+贪心）
传送门 Description 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个 ...