用 WebSocket 完成一个简便的客服聊天系统

一 需求

四个多商行的电商系统,比如京东商城,不一致集团之间的客服是例外的,所面对的用户也是分歧的。要兑现2个这样的客服聊天系统,那该系统就非得是三个支撑多客服、客服一对多用户的聊天系统。

二 思路

行使 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 模块(使用国内Tmall镜像)

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端口(上面是第壹代码,仅供参考):

图片 1图片 2

 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 });

View Code

3.1.4 创建 customer.html

该页面是用户页面。在页面上确立1个WebSocket的连接,并促成向劳动器端发送消息(下边是非同一般代码,仅供参考):

图片 3图片 4

 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>

View Code

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 配置目录下新建3个 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;
    }
}