WebSocket實現(xiàn)簡單客服聊天系統(tǒng)

更新時間：2017年05月12日 08:43:50 作者：afee666

這篇文章主要為大家詳細(xì)介紹了WebSocket實現(xiàn)簡單客服聊天系統(tǒng)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一需求

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

二思路

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

三具體實現(xiàn)

3.1 搭建 Node 服務(wù)器

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

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

npm install ws
npm install ws

3.3 創(chuàng)建 server.js

在項目里面新建一個server.js，創(chuàng)建服務(wù)，指定8906端口（下面是主要代碼，僅供參考）

const WebSocket = require('ws');
onst wss = new WebSocket.Server({ port: 8906 });
const uuid = require('node-uuid');
// 省略一些參數(shù)的定義
// 服務(wù)端處理連接
wss.on('connection', function(ws) {
  console.log('client [%s] connected', clientIndex);
  var connection_uuid = uuid.v4();
  var nickname = "AnonymousUser" + clientIndex;
  clientIndex += 1;
  clients.push({ "id": connection_uuid, "ws": ws, "nickname": nickname });
  
 //服務(wù)器收到消息時
  ws.on('message', function(e) {
   var data = JSON.parse(e);
   var type = data.type;
   // 省略業(yè)務(wù)處理邏輯
  });

  // ws連接關(guān)閉時觸發(fā)的操作
  ws.on("close", function () {
   websocketClose();
  });
  
  // 省略函數(shù) websocketClose()、wsSend()、socketClose 的定義
  // 服務(wù)器關(guān)閉所觸發(fā)的操作
  process.on("SIGINT", function () {
   console.log("SOCKET CLOSED!");
   ("客服已關(guān)閉，請稍后再來");
   process.exit();
  });
});

3.4 創(chuàng)建 customer.html

該頁面是用戶頁面。在頁面上建立一個WebSocket的連接，并實現(xiàn)向服務(wù)器端發(fā)送消息（下面是主要代碼，僅供參考）

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

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

  //ws連接關(guān)閉時所觸發(fā)的操作
  ws.onclose = function (e) {
   // 省略
  };
   
  // 省略函數(shù) appendLog()、sendMessage()、sendMessage2()、wsSendMessage() 的定義
</script>

3.5 創(chuàng)建 customerService.html

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。