年前做网站的好处,整体软装设计公司,上海网络推广竞价公司,上海cms模板建站Protobuf#xff08;Protocol Buffers#xff09;是一种用于序列化结构化数据的语言无关、平台无关、可扩展的机制。在JS/TS项目中#xff0c;使用WebSocket与Protobuf可以实现高效的通信和数据传输。protobufjs官方仓库:https://github.com/protobufjs/protobuf.js 安装pro…
ProtobufProtocol Buffers是一种用于序列化结构化数据的语言无关、平台无关、可扩展的机制。在JS/TS项目中使用WebSocket与Protobuf可以实现高效的通信和数据传输。protobufjs官方仓库:https://github.com/protobufjs/protobuf.js 安装protobuf.js依赖
安装protobuf.js依赖的时候如果你使用的cnpm源或者不是npm官方源的话可能会报错说找不到这个依赖需要更换为官方的npm源然后安装https://xiaoshen.blog.csdn.net/article/details/135767569 定义proto文件
我在本地定义了一个简单的proto文件person.proto
syntax proto3;
package example;message person {int32 id 1;string name 2;
}message person_list {repeated person Per 1;
} 编译proto文件报错问题
编译的时候需要使用es6模式的不能使用commonjs不然会报
pnpm pbjs -t static-module -w es6 -o src/proto/person.js src/proto/person.proto
错误的编译命令
pnpm pbjs -t static-module -w commonjs -o src/proto/person.js src/proto/person.proto Uncaught SyntaxError: The requested module does not provide an export named WebSocket发送Protobuf消息
将WebSocket和Protobuf结合起来使用可以实现高效的通信和数据传输。在发送消息时可以先将消息对象序列化成二进制数据然后再通过WebSocket发送
binaryType说明WebSocket.binaryType - Web API 接口参考 | MDN
const ws new WebSocket(ws://192.168.1.171:8989/echo);
// 必须加上不然解析出来的数据为空
ws.binaryType arraybuffer
在接收消息时可以先将接收到的二进制数据反序列化成消息对象然后再进行处理
不然会报错protobufjs_minimal.js?vb54c0ab3:1044 Uncaught Error: illegal buffer
ws.onmessage function (event) {console.log(Received: event.data);// 必须使用Uint8Array解析数据不然解析不出来const res protoRoot.example.all_person.decode(new Uint8Array(event.data));console.log(解码后的内容:, res);count.value res;};通过结合WebSocket和Protobuf可以实现更高效、更可靠的数据传输提升JS/TS项目的性能和开发效率。 我本地的写的完整代码 script setup langts
import { onMounted, ref } from vue
import protoRoot from /proto/person.jsconst count: any ref()
const ws new WebSocket(ws://192.168.1.171:8989/echo);
// 必须加上不然解析出来的数据为空
ws.binaryType arraybuffer
// 接收到消息时的处理逻辑
ws.onmessage (event) {count.value event.data;
}
// 发送消息
ws.onopen () {ws.send(Hello, server!);
}ws.onmessage function (event) {console.log(Received: event.data);// 必须使用Uint8Array解析数据不然解析不出来const res protoRoot.example.person_list.decode(new Uint8Array(event.data));console.log(解码后的内容:, res);count.value res;
};ws.onclose function (event) {console.log(WebSocket connection closed, event);
};// 页面初始化
onMounted(() {console.log(组件加载:, protoRoot);
})/scripttemplatedivdivwbsocket消息/divdiv{{ count }}/div/div
/templatestyle scoped
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
/style
