前端JS使用protobuf

最新推荐文章于 2024-05-29 23:54:29 发布
最新推荐文章于 2024-05-29 23:54:29 发布
阅读量2.5k 收藏 2
点赞数 1
分类专栏： JS 文章标签： protobuf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33466661/article/details/113520419
版权

环境：Mac

安装 protobuf

安装protobuf的编译器，以便编译出各种适合语言的proto文件

#brew安装
brew install protobuf
#检查版本
protoc --version
编译指令

（假设现在用于js）

protoc *.proto --js_out=import_style=commonjs,binary:../pb
protoc --js_out=import_style=commonjs,binary:. test.proto

*.proto 表示选中当前目录的所有后缀为 .proto 的文件，也可以用具体某个文件
如果没有进到 * .proto 文件所在的目录，也可以加上路径：…/path1/*.proto 这种。但是如果proto之间有相互引用，就不要加路径了ÿ

最低0.47元/天 解锁文章
像树_
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端js实现protobuf序列化与反序列化
tdl320721的博客
10-16 1524
前端js实现protobuf序列化与反序列化！！！主要介绍如何在前端浏览器中使用protobuf进行对应的序列化与反序列化。
protobufjs
一条宝鱼的专栏
05-20 5962
protobufjs protobuf.js是一个纯JavaScript实现，支持Node.js和浏览器的TypeScript，它容易使用速度快速，可以直接反射.proto文件，不需要生成任何文件。 protobuf.js是基于ByteBuffer.js的Protocol Buffers纯JavaScript实现，主要功能是解析.proto文件，构建Message类，编码解码。 安装 下载安装protobufjs https://github.com/protobufjs/prot...
【protobuf: protobufjs-cli 一文入门】
最新发布
qq_38428433的博客
05-29 1015
开篇引导，本文通过 什么是protobujs-cli，什么是protobufjs-cli中的反射，protobujs-cli怎么使用，protobujs-cli的各个版本有什么区别 来快速对protobufjs-cli进行讲解和演示。
protobuf.js
qq_42179237的博客
04-26 5464
什么是protobuf 协议缓冲区提供了一种语言中立、平台中立、可扩展的机制，用于以向前兼容和向后兼容的方式序列化结构化数据。它类似于 JSON，只是它更小更快，并且生成本地语言绑定 protobuf解决了哪些问题 协议缓冲区为大小高达几兆字节的类型化结构化数据包提供了一种序列化格式。该格式适用于临时网络流量和长期数据存储 协议缓冲区是 Google 最常用的数据格式。它们广泛用于服务器间通信以及磁盘上数据的归档存储 ...
Javascript中使用protobuf
first_shun的博客
10-03 5899
protobuf是由google推出的和语言无关和平台无关，可扩展的序列化数据结构协议，类似于XML，但是比XML更小、更快、更简单。protobuf几乎支持当前的大部分语言，当然也支持JavaScript。 JavaScript使用protobuf主要有如下几个步骤： 1、下载一个编译protobuf的js编译器。 https://github.com/protocolbu...
Protobuf在js中使用过程
qq_43643112的博客
03-23 2677
Protobuf在js中使用过程 以前也是没有学过,学习了两天，今天算是第三天，主要是公司要考查我的学习能力，本来公司都已经有人封装好了，上面不让给我源码，让我自己找资料学习。这篇文章也是记录下这几天的学习成功了. 先说下缺点: new太多，添加数据必须使用set,麻烦 只讲解使用过程,理论CSDN上多的是 1.需要下载proto.exe,根据个人公司的需求，下载不同的版本 创建一个目录(目录名为demo),将下载好的proto.exe文件放置到根目录,然后创建一个proto文件(myproto.pro
protobuf文件生成js文件详细流程
weixin_44134588的博客
05-19 5514
1,下载用来生成web js文件的工具 protoc-gen-grpc-web 下地地址：protoc-gen-grpc-web 选择：protoc-gen-grpc-web-1.3.1-windows-x86_64.exe 即可 下载完成后改名为protoc-gen-grpc-web.exe并移动到项目里，和proto文件存放在同一目录下 2,下载protoc.exe执行程序下载地址protoc.exe 选择protoc-3.20.1-win32.zip 下载后解压就行，然后把bin文件夹里面的proto
详解vue中使用protobuf踩坑记
10-17
Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 中使用 Protocol Buffers（简称protobuf）可以帮助我们更高效地处理和传输数据。protobuf 是一种序列化协议，它提供了比 JSON 更小、更快、更简单的数据结构...
Websocek笔记三 egret+skynet使用protobuf
03-01
这些定义会被编译成对应的Egret（JavaScript/TypeScript）和Skynet（C++/Lua）代码，然后在两端分别使用生成的类进行数据的编码和解码。WebSocket作为双向通信的网络协议，被Egret用来建立与Skynet服务器的连接，...
protobuf js
08-02
"protobuf.js"是protobuf在JavaScript中的实现，它允许你在前端或Node.js环境中读写protobuf消息。这个库提供了编解码功能，让你能方便地处理protobuf编译后的数据。使用protobuf.js，开发者可以将.proto文件转换为...
前端开源库-protobuf-compiler
08-30
在本例中，protobuf-compiler 专注于将 .proto 文件转换成 JavaScript 类，使得这些数据结构可以在前端环境中使用。 **数据序列化** 是软件工程中一个关键的概念，它涉及将数据结构或对象状态转化为可存储或可传输...
jsbuf:JavaScript Protobuf 库
05-31
jsbuf 提供一个简单JavaScript库，用于使用对消息进行编码和解码。 这深受影响，它是 Erlang 的 protobuf 生成器。 解码 传入消息应为二进制字符串。 就 JavaScript 字符串而言，我的意思是charCodeAt可访问的每个字符都是一个二进制数据字节。 给定一个二进制字符串，解码过程将返回一个 JavaScript 数组，其中每个元素代表消息中的一个字段。 每个元素将包含字段编号，类型和值。 不能保证对字段数据的数组进行排序。 // Assume a message with two fields, both varint types. var msg = Protobuf.decode(bstr); msg[0] == [1, 0, 150]; msg[1] == [2, 0, 96]; 每个字段元素的格式为[FieldNum, WireType,
protobufjs实现protobuf序列化与反序列化
tdl320721的博客
11-06 981
ProtobufJS 是一个专为 JavaScript 环境设计的 Protobuf 库，提供了类似于`Google Protocol Buffers 的功能，但在特性、工具支持和生态系统方面可能相对较小。 Github项目地址：https://github.com/protobufjs/protobuf.js
php protobuf安装与前端js交互（四）：PHP与js通讯交互
林龙
03-24 626
bb
关于前端使用Protobufjs解析后端传来的Protobuf出现非法buffer错误的解决方法
weixin_33985507的博客
11-09 3720
直接说原因吧~protobuf.decode()接收的数据必要是Unit8Array的数据。所以前端接收到arrayBuffer时候需要进行转换成Unit8Array。下面列出转换方法，非常简单//接收到的数据 let data=data //进行Unit8Array转换 let Udata=new Unit8Array(data);protobuf.load('./index.proto') ....
java服务器 protobuf_服务器端用PHP，客户端用JAVA，通过protobuf互相通信[原创] | 学步园...
weixin_39900468的博客
02-13 193
我来记一下流水帐(仅实现“服务器端发送，客户端读取后显示”)：一、服务器端环境搭建(基于PHP)1、服务器的搭建工作就略去了，列举一下环境版本如下：PHP Version 5.3.2-1，Apache/2.2.14，Ubuntu10.04 LTS2、由于google的protobuf官方仅支持三种语言，其中还还还就不包括PHP，只有下载第三方支持：3、解压zip包到/var/www/protoco...
在win环境下使用grpc_tools_node_protoc generate static code 出现的坑
weixin_36783315的博客
11-17 1944
在win环境下使用grpc_tools_node_protoc generate static code 出现的坑 在GRPC github上用node.js生成静态代码的示例是这样的： cd ../../protos npm install -g grpc-tools grpc_tools_node_protoc --js_out=import_style=commonjs,binary:../...
JS逆向加密——B 站弹幕 protobuf 分析
含笑
07-22 1168
B 站弹幕 protobuf 数据分析
如何在前端中使用protobuf(vue篇)
07-27
在前端中使用 Protobuf（Protocol Buffers）可以通过以下步骤： 1. 安装依赖：首先，你需要在 Vue 项目中安装 protobuf.js 库。可以使用 npm 或者 yarn 进行安装： ```bash npm install protobufjs ``` 2. 定义你的 Protobuf 消息：在 Vue 项目中，你可以创建一个 `.proto` 文件来定义你的消息结构。例如，创建一个名为 `message.proto` 的文件，并在其中定义你的消息类型。 ```protobuf syntax = "proto3"; message MyMessage { string name = 1; int32 age = 2; } ``` 3. 编译 Protobuf 文件：使用 protobuf.js 的命令行工具 `pbjs` 来编译你的 `.proto` 文件。在项目的根目录下运行以下命令： ```bash npx pbjs -t static -w es6 -o src/protobufBundle.js path/to/message.proto ``` 这将生成一个名为 `protobufBundle.js` 的文件，其中包含了编译后的 Protobuf 消息定义。 4. 引入 protobuf.js 和生成的 bundle 文件：在 Vue 组件中引入 protobuf.js 和生成的 bundle 文件。 ```javascript import protobuf from 'protobufjs'; import protobufBundle from './protobufBundle'; // 加载编译后的 Protobuf 消息定义 const root = protobuf.parse(protobufBundle).root; const MyMessage = root.lookupType('MyMessage'); ``` 5. 使用 Protobuf 消息：现在你可以在 Vue 组件中使用 Protobuf 消息了。例如，你可以创建一个表单，将用户输入的值存储到 Protobuf 消息中，并进行序列化和发送。 ```javascript export default { data() { return { name: '', age: 0, serializedMessage: '', }; }, methods: { sendMessage() { // 创建一个新的消息对象 const message = MyMessage.create({ name: this.name, age: this.age, }); // 序列化消息对象 const buffer = MyMessage.encode(message).finish(); // 将序列化后的消息发送到服务器等等 // ... // 将序列化后的消息保存到组件的数据中，以备显示或其他用途 this.serializedMessage = buffer; }, }, }; ``` 这样，你就可以在 Vue 组件中使用 Protobuf 消息了。记得根据你的实际需求来修改和扩展上述代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值