protobuf 前端怎么使用

最新推荐文章于 2024-08-06 16:05:57 发布

蝈蝈250

最新推荐文章于 2024-08-06 16:05:57 发布

阅读量3.1k

点赞数 1

分类专栏： js 文章标签： protobuf

本文链接：https://blog.csdn.net/vteihlll/article/details/78592976

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

为什么要学protobuf

1、体体小是json的1/8

2、编码解码速度快

3、"跨语言"：我们只需要写一份xxx.proto，即可以用工具生成java、python、c++等语言对应的代码

首先我们定义一份huibao.proto文件

syntax = "proto3";
option java_package = "com.bubukj.proto";  //设置java对应的package
option java_multiple_files = true;                           //建议设置为true，这样会每个对象放在一个文件中，否则所有对象都在一个java文件中

message huibaoData  {

     message userData {
	      int64 id = 1;
		 string userName = 2;
		 string userAge = 3;
	 }
	 
	 message indexData {
	      int64 id = 1;
		 string sj = 2;
	     repeated dbUtil db = 3;
	 }
	 
	 message dbUtil {
	   int64 id = 1;
	   string haha = 2;
	 }

}

用工具把proto源文件变成我们需要的代码

下载并安装工具
谷歌提供的工具protoc.exe，可以把proto源文件生成java、c++、python等语言所对应的代码，这个工具在https://github.com/google/protobufo中可以找到，我也分享到百度云了protoc.exe
执行命令生成代码

这里有我用到的一个脚本文件分享给大家脚本文件

rd .\src\ /s/q

md .\src\c
md .\src\java
md .\src\python
md .\src\js
md .\src\commonjs

protoc.exe --cpp_out=.\src\c huibao.proto

protoc.exe --java_out=.\src\java huibao.proto

protoc.exe --python_out=.\src\python huibao.proto

rem protoc.exe --js_out=.\src\js huibao.proto

protoc.exe --js_out=library=huibao_proto,binary:.\src\js huibao.proto

protoc.exe --js_out=import_style=commonjs,binary:.\src\commonjs huibao.proto

pause

运行这个脚本文件就可以生成huibao_proto.js

接下来该怎么用这个Js 只需要引入google的js库就可以直接用了

例子如下：

以npm 讲解：

安装好npm以后，安装需要的库：（假设已安装好npm）

执行如下命令：

npm install -g require(对库文件的引用库)

npm install -g browserify(这个是用来打包成前端使用的js文件)

最后我们执行 (执行这句命令的时候必须在browserify目录下不然会报找不到package.json文件 )

npm install google-protobuf 会在当前目录下生成一个文件夹，里面装的就是protobuf的库文件。

都装还以后，只需要再写一个导出文件用browserify执行打包即可

var myProto = require('./huibao_proto');  
  
    module.exports = {  
        DataProto: myProto  
    }

保存为exports.js。

对文件进行编译打包

执行命令

browserify exports.js > huibao.js

然后会生成一个huibao.js文件。

这时候就可以使用huibao.js了

新建一个项目：

html 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript" src="google-protobuf/google-protobuf.js"></script>
		<script type="text/javascript" src="huibao.js"></script>
		
		<script type="text/javascript">
			var huibao = new proto.huibaoData();
			var user = new proto.huibaoData.userData();
			console.log(user);
			user.setId(2);
			console.log(user.getId());
			
		
			
			
		</script>
		
		
	</head>
	<body>
	</body>
</html>


打开html  报如下错误：
在google-protobuf.js 中找到exports

exports.Map=jspb.Map;exports.Message=jspb.Message;exports.BinaryReader=jspb.BinaryReader;exports.BinaryWriter=jspb.BinaryWriter;exports.ExtensionFieldInfo=jspb.ExtensionFieldInfo;exports.ExtensionFieldBinaryInfo=jspb.ExtensionFieldBinaryInfo;exports.exportSymbol=goog.exportSymbol;exports.inherits=goog.inherits;exports.object={extend:goog.object.extend};exports.typeOf=goog.typeOf;

看得出这句代码其实就是就是google-protobuf.js想对外提供的个变量只不过没有定义好办直接在前面加一个var exports = {};

然后再刷新html

至此我们可以再好好去研究研究怎么玩protobuf