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

这篇具有很好参考价值的文章主要介绍了vue3项目使用WebSocket 传输 Protobuf 格式的数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

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

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

代码如下(示例):

<template>
  <div style="width: 100%; height: 200px; background: darkgrey">
    <div>{{ messageRef }}</div>
    <button @click="sendMsg"> 发送 </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import protobuf from 'protobufjs';

// 定义要加载的 .proto 文件 URL
const protoUrl = '/path/to/your/message.proto';

// 定义响应消息的状态
const messageRef = ref('');
const response = await fetch(protoUrl);
const content = await response.text();
// 解析 .proto 文件中的消息结构
const root = await protobuf.parse(content).root;
const MyMessage = root.lookupType('Message');

// 创建 WebSocket 连接
const ws = new WebSocket('ws://localhost:8080/');

// 监听 WebSocket 连接成功事件
ws.addEventListener('open', () => {
  console.log('WebSocket connected!');

  // 序列化消息对象,并将其发送给服务器
  const response = MyMessage.create({ text: '客户端1连接了' });
  // 序列化消息对象,并将其发送给服务器
  const buffer = MyMessage.encode(response).finish();
  ws.send(buffer);
});

// 监听 WebSocket 收到服务器发送过来的消息事件
ws.addEventListener('message', async (event) => {
  // 解析二进制数据为 Protobuf 消息
  const blob: Blob = event.data;
  // Uint8Array 接收的是arrayBuffer对象这里一定要注意如果是Blob格式的数据一定要先转为arrayBuffer
  const buffer = await blob.arrayBuffer();
  const data = new Uint8Array(buffer);
  const message = MyMessage.decode(data);
  console.log(`Receive message from server: ${JSON.stringify(message)}`);

  // 更新视图显示收到的消息内容
  messageRef.value = message.text;
});

// 监听 WebSocket 出错事件
ws.addEventListener('error', (event) => {
  console.error(event);
});

// 监听 WebSocket 关闭事件
ws.addEventListener('close', (event) => {
  console.warn(event);
});

const sendMsg = () => {
  const message = MyMessage.create({ text: '我是客户端1' });
  // 序列化消息对象,并将其发送给服务器
  const buffer = MyMessage.encode(message).finish();
  ws.send(buffer);
};
</script>


方法2

方法2不同之处在与使用protobufjs-cli工具将message.proto文件编译出js文件 还能编译出ts声明文件,具有类型提示对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

该方法脚本已经写在了本文完整示例代码的/packages/server/package.json文件中
vue3项目使用WebSocket 传输 Protobuf 格式的数据

代码实现

<template>
  <div style="width: 100%; height: 200px; background: #d3d3d3">
    <code>{{ messageRef }}</code>
    <button @click="sendMsg"> 发送 </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Message } from './compiled'; // 使用protobufjs-cli编译出来的包

const messageRef = ref('');
// 创建 WebSocket 连接
const ws = new WebSocket('ws://localhost:8080/');

// 监听 WebSocket 连接成功事件
ws.addEventListener('open', () => {
  console.log('WebSocket connected1!');
  // 序列化消息对象,并将其发送给服务器
  const buffer = Message.encode({ text: '客户端2连接了' }).finish();
  ws.send(buffer);
});

// 监听 WebSocket 收到服务器发送过来的消息事件
ws.addEventListener('message', async (event) => {
  // 解析二进制数据为 Protobuf 消息
  const blob: Blob = event.data;
  // Uint8Array 接收的是arrayBuffer对象这里一定要注意如果是Blob格式的数据一定要先转为arrayBuffer
  const buffer = await blob.arrayBuffer();
  const data = new Uint8Array(buffer);
  const message = Message.decode(data);
  console.log(`Receive message from server: ${JSON.stringify(message)}`);

  // 更新视图显示收到的消息内容
  messageRef.value = message.text;
});

// 监听 WebSocket 出错事件
ws.addEventListener('error', (event) => {
  console.error(event);
});

// 监听 WebSocket 关闭事件
ws.addEventListener('close', (event) => {
  console.warn(event);
});

const sendMsg = () => {
  // 序列化消息对象,并将其发送给服务器
  const buffer = Message.encode({ text: '我是客户端2' }).finish();
  ws.send(buffer);
};
</script>


总结

以上就是vue3项目中传输protobuf数据的基本使用方法,仅供参考,如果有问题请留言评论。文章来源地址https://www.toymoban.com/news/detail-497360.html

到了这里,关于vue3项目使用WebSocket 传输 Protobuf 格式的数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中使用websocket

    效果图 实现 src/util/socket.ts src/store/webSocket.ts 这里面放到了登录成功后在连接websocket src/viwes/login.vue 附赠后台建议websocket服务供测试使用 链接:https://pan.baidu.com/s/1RzbWiooLwCIuDTnEfN_x0Q?pwd=p58w 提取码:p58w

    2024年02月11日
    浏览(35)
  • Protobuf: 高效数据传输的秘密武器

    当涉及到网络通信和数据存储时, 数据序列化 一直都是一个重要的话题;特别是现在很多公司都在推行微服务,数据序列化更是重中之重,通常会选择使用 JSON 作为数据交换格式,且 JSON 已经成为业界的主流。但是 Google 这么大的公司使用的却是一种被称为 Protobuf 的数据交

    2024年02月03日
    浏览(45)
  • 使用vue3简单实现WebSocket通信

    关于WebSocket通信的简单介绍: 握手阶段:在建立WebSocket连接之前,客户端需要发送一个HTTP请求到服务器,请求升级为WebSocket协议。这个过程称为握手(Handshake)。如果服务器支持WebSocket协议,它将返回带有特定标头的HTTP响应,表示握手成功。 建立连接:客户端收到服务器的

    2024年02月16日
    浏览(37)
  • vue3:websocket的封装与使用

    前言:vue3+pinia项目 1.引入ws 2.新建websocket.js类 3.新建一个pinia Store类 4.页面中使用

    2024年02月02日
    浏览(37)
  • 在vue3中封装使用WebSocket

    上篇文章记录了如何在日常开发过程中引入并使用websocket连接,但是在后续的开发过程中发现之前的写法有点问题,比如说多次引用连接会共用一个心跳,如果一个连接关掉了,后续其他的连接可能被一起关掉等等的bug。 所以在这篇文章里针对上篇文章提供的方法进行改进,

    2024年02月07日
    浏览(41)
  • vue3使用websocket(亲测解决)

    1.需要后端给你一个ws的接口比如: 我这里的name是后端要求登录成功后搞得 2.后端给我个登录的接口,需要登录后才能实现长链接 3.封装init方法 网上找了一堆没用的方法,不建议看 所有代码合集

    2024年02月14日
    浏览(82)
  • Electron+vue3项目使用SQLite3数据库

    SQLite  是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的  SQL  数据库引擎。它是一个零配置的数据库,这意味着与其他数据库不一样,我们不需要在系统中配置。 就像其他数据库, SQLite  引擎不是一个独立的进程,可以按应用程序需求进行静态或

    2024年02月13日
    浏览(54)
  • vue3.2+vite+代理,使用websocket

    之前以为websocket复杂,想使用插件来实现,查了一番资料,原生写法就很简单。 查询列表,需要实时获取员工上报的数据 Table.vue 因为跨域问题,这里使用了vite的proxy代理功能 vite.config.ts 如果代理设置好,连接成功,以上websocket会打印\\\"连接成功\\\"和输出返回。 完! 项目运行

    2024年02月10日
    浏览(47)
  • vue3 之 数据格式化函数

    在很多项目中,都会有数据字典表,前端通过请求后端拿到数据字典表里的数据,一般在页面列表上面状态数据都会是返回的数字,前端需要把数字转换成字典表里对应的数据值,下面写了一个前端写死的数据,stateMap里的数据可以换成从接口请求过来的数据

    2024年02月19日
    浏览(41)
  • 微信小程序websocket使用protobuf,发送arraybuffer

    ❤️砥砺前行,不负余光,永远在路上❤️ 这是一次继前文websocket的一个更新:小程序中使用websocket,区分房间、空间 现在遇到了一个需求是小程序接入 io-game 的websocket 和unity 游戏端同时使用一个websocket,io-game那边收发websocket消息都是采用 Protobuf 处理的。 参考项目:htt

    2024年02月15日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包