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时候之后,我们 ...
随机推荐
- Three.js入门——画星空（star field）
Three.js是一个很流行的3D JavaScript库.这里有一个three.js的入门教程,在浏览器窗口中画出星空.我按照教程重新实现了一遍,这里的这篇博客把教程大致翻译了一遍.我的demo. ...
- Java基础9一面向对象
继承 1.特点 a) 要有一定的层次结构,并且具备可传递性. b) 判断两者之间是否有继承关系通过is-a来判断. c) 子类继承了父类,那么子类就继承了父类中所有的属性和方法,但是父类中的私有属性和 ...
- 常用MySql命令列选
常用MySql命令列选 命令 参数 含义 alter 数据库,表 修改数据库或表 backup 表 备份表 \c 取消输入 create 数据库,表 创建数据库或表 delete 表和行的表达式 ...
- Redis 四：存储类型之散列类型
1.散列类型表达方式简介: =========================================== 键 字段 值 =================================== ...
- C# 6.0新加特性
1.自动属性的增强 1.1.自动属性初始化 (Initializers for auto-properties) C#4.0下的果断实现不了的. C#6.0中自动属性的初始化方式 只要接触过C#的肯定 ...
- mac 下安装 mariadb
通过brew 安装: brew install mariadb 初始化数据库 cd /usr/local/Cellar/mariadb/10.0.10/scripts mysql_install_db ...
- Kinect+OpenNI+OpenCV使用
关于OpenNI,已经可以使用2.0,可以不再使用PrimeSense: 这里的是转载其他人的 OpenCV系列: 原文:http://blog.csdn.net/chenxin_130/articl ...
- PCL：PCL可视化显示点云
(1):引用:仅仅是简单的显示点云,可以使用CloudViewer类.这个类非常简单易用.但要注意,它不是线程安全的.如果要用于多线程,还要参考PCLVisualizer. 需要注意的是,PointC ...
- 关于Java学习
缘由 其实写东西的缘由都很简单,不外乎要总结记录,这里,是一种启明灯一样的东西. 虽然说是半路出家,但码代码也有不少时间了,学习编程也有记录可寻了.. 但是,但是,但是,到了工作中,虽然经前辈指点,仍 ...
- JavaScript数组操作函数
A: 购物车会有这样的情况,购物车是一个数组,每一个商品是一个对象,分别对应一个id,和一个num ,然后改变商品的时候需要和购物车对比,如果购物车中有这个商品的话,就只改变这个商品对应的id的num ...