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时候之后,我们 ...
随机推荐
- 洛谷P2607 [ZJOI2008]骑士(树形dp)
题目描述 Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火绵延五百里, ...
- wordcloud + jieba 生成词云
利用jieba库和wordcloud生成中文词云. jieba库:中文分词第三方库 分词原理: 利用中文词库,确定汉字之间的关联概率,关联概率大的生成词组 三种分词模式: 1.精确模式:把文本精确的切 ...
- js 找数组中的最值
背景: 2个数组以下 , 比如 [[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]] 找最值的时候, ...
- MBR分区表格式 - 简明概述
目前硬盘主要有MBR和GPT分区两种格式,前者是Windows XP之前时代主流的分区格式,后者则是现在Windows 8之后主流的分区格式.(Windows 7需要通过一些手段能实现支持GPT,而W ...
- 得到Xml中 元素的值
<?xml version="1.0" encoding="utf-8" ?><Response service="RouteSer ...
- 【Oracle】修改参数的同时添加注释
当修改参数时添加注释,我们会用到如下语句: alter system set parameter=value comment='description'; --修改参数需要有相应权限的用户去执行. 例 ...
- VC++抛出自定义编译期异常的指令
#error 即可, 抛出消息是 #pragma message 最新的还有static_assert有一些用 一下子忘了网上居然搜不到...尝试了 关键字vc++.vc.vs.msvc + 抛出编 ...
- 图解HTTP——阅读笔记
基础部分 第1章 了解Web及网络基础 重点了解HTTP协议在网络中的作用,扮演了什么角色,以及网络传输中相关的一些角色. 3项重要的web构建技术:HTML,URL,HTTP HTTP协议位于应用层 ...
- 前端html之------>Table实现表头固定
文章来源于:https://www.cnblogs.com/dacuotecuo/p/3657779.html,请尊重原创,转载请注明出处. 说明:这里主要实现了表头的固定和上下滚动的滑动实现:时间的 ...
- 多行文本省略号样式失效丢失，以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'
问题现象 使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出 ...