用 WebSocket 实现一个简单的客服聊天系统
一 需求
一个多商家的电商系统,比如京东商城,不同商家之间的客服是不同的,所面对的用户也是不同的。要实现一个这样的客服聊天系统,那该系统就必须是一个支持多客服、客服一对多用户的聊天系统。
二 思路
使用 Node.js 搭建服务器,全局安装 ws 模块、node-uuid模块。通过 Nodejs 服务处理客服端和用户端传递过来的 客服ID 和 用户ID,来实现消息的精准传送。
三 具体实现
下面主要谈谈客服聊天系统涉及 Nodejs 的方面。至于客服聊天系统的 PHP、MySQL 方面,主要是用来存储和获取聊天记录的,在此就省略了。
3.1 搭建 Node 服务器
3.1.1 Nodejs 的安装
参考本人前面的文章 《Centos6.8 下 Node.js 的安装》。
3.1.2 全局安装 ws 模块、node-uuid 模块(使用国内淘宝镜像)
npm --registry=https://registry.npm.taobao.org install -g ws npm --registry=https://registry.npm.taobao.org install -g node-uuid
3.1.3 创建 kefu.js
在项目里面新建一个 kefu.js,创建服务,指定8906端口(下面是主要代码,仅供参考):
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 const WebSocket = require('ws'); 2 const wss = new WebSocket.Server({ port: 8906 }); 3 const uuid = require('node-uuid'); 4 // 省略一些参数的定义 5 // 服务端处理连接 6 wss.on('connection', function(ws) { 7 console.log('client [%s] connected', clientIndex); 8 var connection_uuid = uuid.v4(); 9 var nickname = "AnonymousUser" + clientIndex; 10 clientIndex += 1; 11 clients.push({ "id": connection_uuid, "ws": ws, "nickname": nickname }); 12 13 //服务器收到消息时 14 ws.on('message', function(e) { 15 var data = JSON.parse(e); 16 var type = data.type; 17 // 省略业务处理逻辑 18 }); 19 20 // ws连接关闭时触发的操作 21 ws.on("close", function () { 22 websocketClose(); 23 }); 24 25 // 省略函数 websocketClose()、wsSend()、socketClose 的定义 26 // 聊天服务器关闭所触发的操作 27 process.on("SIGINT", function () { 28 console.log("SOCKET CLOSED!"); 29 ("客服已关闭,请稍后再来"); 30 process.exit(); 31 }); 32 });
3.1.4 创建 customer.html
该页面是用户页面。在页面上建立一个WebSocket的连接,并实现向服务器端发送消息(下面是主要代码,仅供参考):
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script> 2 //建立连接 3 const ws = new WebSocket("ws://22.33.66.88:8906"); 4 var client_id = ''; 5 6 //ws连接打开后的操作 7 ws.onopen = function (e) { 8 //向服务器发送该ws连接的用户信息 9 }; 10 11 //收到消息处理 12 ws.onmessage = function (e) { 13 // 省略 14 }; 15 16 //ws连接出错所触发的操作 17 ws.onerror = function (e) { 18 // 省略 19 }; 20 21 //ws连接关闭时所触发的操作 22 ws.onclose = function (e) { 23 // 省略 24 }; 25 26 // 省略函数 appendLog()、sendMessage()、sendMessage2()、wsSendMessage() 的定义 27 </script>
3.1.5 创建 customerService.html
该页面是客服页面,类似于 customer.html,代码方面可参考 customer.html
至此,通过在Linux终端运行以下命令即可开启客服聊天服务:
node kefu.js
若在浏览器无法打开客服页面(比如customer.html),则可能需要将Linux系统的8906端口开启。
通过命令 node kefu.js 这种开启客服聊天服务的方式仅限于当前终端会话,若关闭当前终端会话则无法提供服务了。因此,还要做到让客服聊天服务在后台持续稳定地运行。
3.2 让客服聊天服务在后台持续稳定地运行
使用 pm2 这个 Nodejs 部署和进程管理工具可以实现这一目的。
3.2.1 全局安装 pm2 工具:
npm --registry=https://registry.npm.taobao.org install -g pm2
3.2.2 开启客服聊天服务:
pm2 start kefu.js
3.3 实现外网通过80端口访问 kefu.js(这一步非必需)
使用 Nginx 反向代理可以实现这一目的。
在 Nginx 配置目录下新建一个 kefu.test.com.conf 文件,配置如下:
upstream kefu.test.com { server 127.0.0.1:8906; }
server { listen 80; server_name kefu.test.com; location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forward-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-Nginx-Proxy true; proxy_pass http://kefu.test.com; proxy_redirect off; } }