vue3项目使用WebSocket 传输 Protobuf 格式的数据

• 前言
• 一、基础库安装
• 二、具体代码实现
• • 1.服务端编写
  • • message.proto文件定义
  • 2.客户端代码实现
  • • 方法1
    • 方法2
• 总结

前言

前端和后端数据传输常用数据格式：

JSON（JavaScript Object Notation）：与 HTTP 协议和 REST API 配合使用时，JSON 数据是最常用的数据格式之一。对于 WebSocket，JSON 数据同样适用。客户端可以将消息转换为 JSON 对象，并将其发送到服务器进行处理，在服务器上生成响应并返回给客户端。

Binary Data：WebSocket 还支持二进制数据传输。此方法特别适用于需要在网络上传输大量数据的应用程序。使用二进制数据格式，您可以将数据压缩为更小的包，以提高传输速度并降低带宽消耗。

Protocol Buffers：Protocol Buffers 是一种 Google 开发的高效数据结构序列化格式。与 JSON 和 XML 不同，Protocol Buffers 将数据编码为二进制格式，可快速解析和传输。此方法特别适用于需要在网络上传输大量数据的应用程序。
但是在日常开发当中使用的最多的还是JSON格式
下面我简单介绍一下前后端使用protobuf传输数据的案例

一、基础库安装

pnpm add ws
pnpm add protobufjs
pnpm add protobufjs-cli -D

二、具体代码实现

本文完整示例代码

1.服务端编写

message.proto文件定义

syntax = "proto3";message Message {string text = 1;
}

代码如下（示例）：

const WebSocket = require('ws');
const protobuf = require('protobufjs');
const path = require('path');// 加载 .proto 文件
const root = new protobuf.Root();
root.loadSync(path.join(__dirname, './message.proto'));// 获取 Message 类型
const Message = root.lookupType('Message');// 创建 WebSocket 服务器
const server = new WebSocket.Server({ port: 8080 });server.on('connection', (socket: any) => {console.log('Client connected');// 接收客户端发送的消息socket.on('message', (data: Buffer) => {const message = Message.decode(new Uint8Array(data));console.log('Received message:', message);// 发送响应消息// const response = { text: 'Hello, client!'};// const buffer = Message.encode(Message.fromObject(response)).finish();// socket.send(buffer);const response = Message.create({ text: `服务端已收到数据: ${message.text}` });// 序列化消息对象，并将其发送给服务器const buffer = Message.encode(response).finish();socket.send(buffer);});// 监听连接断开事件socket.on('close', () => {console.log('Client disconnected');});
});const http = require('http');
const fs = require('fs');// 创建 HTTP 服务器，监听客户端请求
const httpserver = http.createServer(async (req:any , res: any) => {console.log(`Receive request: ${req.method} ${req.url}`);try {// 如果请求的是 .proto 文件，则读取文件内容并返回给客户端if (req.url.endsWith('.proto')) {const content = await fs.promises.readFile(`${path.join(__dirname, './message.proto')}`, 'utf8');res.setHeader('content-type', 'text/plain');res.end(content);return;}// 如果请求的不是 .proto 文件，则返回 404 Not Found 错误res.statusCode = 404;res.end();} catch (err) {console.error(err);res.statusCode = 500;res.end();}
});// 启动 HTTP 服务器
httpserver.listen(3001, () => {console.log('HTTP server started!');
});

2.客户端代码实现

方法1

代码如下（示例）：

方法2

方法2不同之处在与使用protobufjs-cli工具将message.proto文件编译出js文件 还能编译出ts声明文件，j具有类型提示对TS项目更加友好

编译方法

pbjs -t static-module -w es6 -o ../web/src/components/compiled.js message.proto
pbts -o ../web/src/components/compiled.d.ts ../web/src/components/compiled.js

代码实现

总结

以上就是vue3项目中传输protobuf数据的基本使用方法，仅供参考，如果有问题请留言评论。