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时候之后,我们 ...
随机推荐
- cropper+pillow处理上传图片剪裁（二）
上次说到处理上传头像的方法是临时保存在本地,其实这样做并不妥,而且修改后的头像重新上传到model中也很麻烦,差了很多资料,解决了这个问题 大致思路:用户上传原图和修改数据—PIL修改后将图片保存为内 ...
- Oracle表的种类及定义
1表的类型 1)堆组织表(heap organized tables). 当增加数据时,将使用在段中找到的第一个适合数据大小的空闲空间.当数据从表中删除时,留下的空间允许随后的insert和updat ...
- Centos7下git服务器及gogs部署
1.安装git # yum install -y git 2.创建git用户及组 # groupadd git # adduser git -g git # mkdir /home/git # mkd ...
- poj 2955 Brackets 【 区间dp 】
话说这题自己折腾好久还是没有推出转移的公式来啊------------------ 只想出了dp[i][j]表示i到j的最大括号匹配的数目--ค(TㅅT)------------------- 后来搜 ...
- vue项目中引用echarts的几种方式
准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或 ...
- <轉>APUE:mmap函数
起初 看过一遍内存映射I/O,意思大概是懂了,就是直接操作文件再而直接通过缓冲区来操作,减少一些read.write调用所花费的时间.加上文中给出一个copy的例子,意思也好理解的.不过困扰的来了,我 ...
- 常用css和js内容
1.让一个200x200的div在不同分辨率屏幕上下左右居中. <div class="box"></div> <style type="t ...
- jmeter目录讲解
1.jmeter目录详解 2.这是bin目录下的examples 3.这是bin目录下的report-template 注意啦:jmeterw.cmd运行不带命令的窗口会侵占8080端口,会和tomc ...
- python爬网页中文乱码问题
再用python爬取网页时,用模拟浏览器登陆,得到的中文字符出现乱码,该怎么解决呢? url = “http://newhouse.hfhouse.com/” req = urllib2.Reques ...
- 阿里云服务上面部署redis + 本地Redis客户端连接方法
本文结合自己在阿里云服务器上面搭建redis服务器,在本地redis的客户端Redis Desktop Manager连接成功的操作,将操作中的一些方法做了一些归纳和总结,希望可以帮到有需要的同学. ...