vue+node+socket.io实现客服聊天功能

ServiceChat 客服聊天

介绍

ServiceChat 是一套运行在 node.js 的客服聊天网页，包括客户端和客服端，放在node的初衷也是为了方便学习前端的人更加容易上手，整个项目功能丰富，但可维护性差了写，因为所以的功能和页面都怼在了一个页面，这也算是当初做的比较急的原因吧，但完全不担心使用问题，如果你不满意这种写法可自行抽取封装，感谢支持！

功能一览

• 机器人智能聊天
• 客服手动在线离线
• 用户主动向客服发送信息（信息包括文本、表情包）
• 客服选择会话成员，并且主动向用户发送信息（信息包括文本、表情包）
• 用户/客服接收到对方发送的信息
• 客服主动关闭用户会话，离线列表显示离线用户，用户端提示客服主动关闭会话，本次会话结束
• 客服手动离线，清除所有会话列表，用户端提示客服已离线，本次会话结束
• 客服刷新或关闭页面下线，清除所有会话列表，用户端提示客服已离线，本次会话结束
• 用户刷新页面或关闭页面，客服端提示用户已下线，本次会话结束
• 客服切换右边工具栏，选择快捷回复，可选中快捷回复信息以此快速回复内容
• 发送信息，如果服务器中断，信息状态为 0（未发送出），若 20 秒服务器仍为断开，信息状态改成-1（发送失败），若 20 秒内服务器恢复，信息状态改成 1（发送成功）
• 在用户端加入 productId，用户可发送商品卡片
• 客服接收用户发送的商品卡片，并且查看详情
• 完成图片发送，若图片过大时进行图片压缩，图片超大时不允许发送
• 完成图片接收，查看
• 用户多台设备在线时，强制另一台设备下线
• 客服多台设备在线时，强制旧客服端下线，并且中断会员的会话

项目地址

GitHub：https://github.com/Arles-hsh/ServiceChat
码云：https://gitee.com/service-chat/service-chat

如果您对此项目有兴趣，可以点 “Star” 支持一下 谢谢！

如果有任何的疑惑或建议，请在评论中提出，欢迎评论！

效果图

用户端进入客服界面：

注意：因为需要实现转人工的功能，所有访问时是带来参数的，即地址中的 sendId，目的是为了获取该用户的信息，除此之外，需要注意的是，用户端采用的是手机端，所以需要你在浏览器中 f12，把手机的模拟器亮起来

用户转人工：

发送消息（包括文字、图片、表情包）

客服快捷回复功能

用户下线或客服下线通知

发送卡片功能

注意：此时为了模拟浏览的商品，地址参数多了 productId

功能演示暂时先上这些，还有许多的功能等着小伙伴们去探索，应该有人开始疑惑，上面演示的 sendId 和 productId 如何匹配上对应的用户和商品信息呢，其实我是提前放在后端的 json 数组里了，目的是模拟数据库中的数据，除此之外，还有快捷回复、用户留言、机器人回复的 json 信息

接下来，说下项目 clone 下来后，需要完成那些事情才能把项目跑起来

安装依赖

• 后端依次输入以下命令：

cd service
npm install
node app.js

• 前端依次输入以下命令：

cd chatroom
npm install
npm run serve

浏览器运行

用户端打开：http://localhost:8080/?sendId=3
客服端打开：http://localhost:8080/?sendId=1
若需要发送卡片功能，用户端打开：http://localhost:8080/?sendId=3&productId=300
具体参数对应的信息，可查看 userList.json 和 product.json 文件

到现在就已经是大功告成，客服项目的最终效果就展示出来了

简略说明

• 后端处理：
  2.前端 Chat.vue 是核心文件，需要看懂的话需要一些时间，html 和 css 样式虽然有点多，但这些相信你有基础的话还是不难理解的，其中有点难度的可能是 js 的处理逻辑，如果不懂的可以随时来打扰~

后言

该项目前身其实是我用 C#的 signalr 框架完成的，因为涉及到其他语言，对很多前端学习者来说是不太友好，所以我在想怎么才能把它转移到前端来给更多的前端爱好者来学习，于是花了许多时间将旧项目抽取、改进、完善才有了现在的最终效果，其中 node 涉及到的并不多，也就是简单的 js 而已，大家上手更容易，最后附上我学习中时参考的 socket 手册：socket.io 中文手册