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时候之后,我们 ...
随机推荐
- Android-crop：漂亮的图片裁切工具
主要特点 Gradle构建和AAR 现代化的UI 向后兼容到SDK 10 配置简单 示例项目 使用 首先,在你的 manifest 文件中申明 CropImageActivity : <acti ...
- [转] 利用git钩子，使用python语言获取提交的文件列表
项目有个需求,需要获取push到远程版本库的文件列表,并对文件进行特定分析.很自然的想到,要利用git钩子来触发一个脚本,实现获取文件列表的功能.比较着急使用该功能,就用python配合一些git命令 ...
- element-ui Cascader 级联选择器示例
<html> <head>test</head> <style> @import url("http://unpkg.com/element- ...
- AndroidStudio/Intellij 快捷键
说明 三年来一直使用Eclipse作为自己的IDE, 现在是时候走出自己的safety zone, 开始使用传说中的Intellij了. Eclipse/Intellij IDE环境为: OS X 1 ...
- bootstrap3-dialog：更强大、更灵活的模态框
用过bootstrap框架的同学们都知道,bootstrap自带的模态框用起来很不灵活,可谓鸡肋的很.但nakupanda开源作者封装了一个更强大.更灵活的模态框——bootstrap3-dialog ...
- PhotoZoom放大图片，真的能无损吗？
当然想要无损放大一张很小的图片时,总会有人会和你推荐PhotoZoom这款软件,那么它真的和说的一样,可以无损放大吗?下面小编挑了2张图片做了一下对比. 案例1,我们选取一张尺寸为200x200像素的 ...
- day06-08面向对象的三大特性
一.继承 1.1什么是继承?继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类python中类的继承分为:单继承和多继承 cl ...
- vc++实例创建简单窗体
#include<windows.h>#include<stdio.h>LRESULT CALLBACK WinSunProc(HWND hwnd,UINT uMsg,WPAR ...
- HDU 4704 Sum（ 费马小定理 + 快速幂 ）
链接:传送门 题意:求 N 的拆分数 思路: 吐嘈:求一个数 N 的拆分方案数,但是这个拆分方案十分 cd ,例如:4 = 4 , 4 = 1 + 3 , 4 = 3 + 1 , 4 = 2 + 2 ...
- YII实现dropDownList 联动事件
因功能需求,需要用到联动,特此记录分享 一.视图中 <div class="main-form"> <?php $form = ActiveForm::begin ...