用 WebSocket 實現一個簡單的客服聊天系統

一 需求

一個多商家的電商系統，比如京東商城，不同商家之間的客服是不同的，所面對的用戶也是不同的。要實現這樣一個電商系統的客服聊天系統，那該系統就必須是一個支持多客服、客服一對多用戶的聊天系統。

二 思路

使用 Node.js 搭建伺服器，安裝 websocket 模塊、node-uuid模塊。通過在客服端和用戶端傳遞 客服ID 和 用戶ID 來進行消息的傳送。

三 具體實現

3.1 搭建 Node 伺服器

參考本人前面的文章 《Centos6.8 下 Node.js 的安裝》。

3.2 安裝 ws 模塊、node-uuid 模塊

npm install ws
npm install ws

3.3 創建 server.js

在項目裡面新建一個server.js，創建服務，指定8906埠（下麵是主要代碼，僅供參考）

 1 const WebSocket = require('ws');
 2 onst 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.4 創建 customer.html

該頁面是用戶頁面。在頁面上建立一個WebSocket的連接，並實現向伺服器端發送消息（下麵是主要代碼，僅供參考）

 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.5 創建 customerService.html

該頁面是客服頁面，類似於 customer.html，代碼方面可參考 customer.html