用 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端口（下面是主要代碼，僅供參考）：

 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的連接，並實現向服務器端發送消息（下面是主要代碼，僅供參考）：

<script>
      //建立連接
      const ws = new WebSocket("ws://22.33.66.88:8906");
      var client_id = '';
      
      //ws連接打開后的操作
      ws.onopen = function (e) {
          //向服務器發送該ws連接的用戶信息
      };

      //收到消息處理
      ws.onmessage = function (e) {
          // 省略
      };
            
      //ws連接出錯所觸發的操作
      ws.onerror = function (e) {
          // 省略
      };

      //ws連接關閉時所觸發的操作
      ws.onclose = function (e) {
          // 省略
      };
            
      // 省略函數 appendLog()、sendMessage()、sendMessage2()、wsSendMessage() 的定義
</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;
    }
}