vue使用websocket，protobuf搭建客服系统

最新推荐文章于 2025-05-08 20:50:26 发布

holmereal

最新推荐文章于 2025-05-08 20:50:26 发布

阅读量593

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js websocket

本文链接：https://blog.youkuaiyun.com/true_peng/article/details/129375342

文章讲述了如何重建一个更强大的客服系统，采用WebSocket进行连接并实现心跳监听以保持连接活跃。同时，文章提到了使用protobuf进行数据序列化和反序列化，详细介绍了安装protobuf及生成.js文件的过程，并提供了编码和解码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于之前的客服系统功能过于简单，所以想重新搭建一个功能更加丰富的客服系统。

使用websocket（心跳监听）

使用websocket建立连接（连接成功后进行心跳监听）

使用websocket建立连接（连接成功后进行心跳监听）

初始化websocket（接收消息后进行心跳重置）

心跳机制逻辑

组件销毁时关闭websocket连接同时关闭心跳机制清除计时器

使用protobuf

安装protobuf

npm install protobufjs

（这里有个问题，如果出现如图的问题，请使用npm install protobufjs-cli）

在项目src目录下新建proto目录，把后端给的.proto文件放进去（这个文件规定了你传参的格式）

打开终端使用，执行命令用来生成.js文件（如果发现找不到文件的问题，需要把*改成你指定的文件名）

npx pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto

引用proto.js文件

import protoRoot from "@/proto/proto.js";

基本使用

let actions = {
    channel: 10000,
    child: 0,
    userId: 0,
    attachId: 0
}
let testobj = protoRoot.lookup("base").create(actions);
console.log("testobj:", testobj);
let testObjBuffer = protoRoot.lookup("base").encode(testobj).finish(); //encode数据
console.log("testObjBuffer:", testObjBuffer);
let testdata = protoRoot.lookup("base").decode(testObjBuffer); //decode数据
console.log("testdata：", testdata);
this.websock.send(testObjBuffer)