0-1構建前端IM智能客服系統

一. 背景

基本全部公司產品上線以後，用戶在使用過程當中都會遇到不少問題，爲了實時高效的解決這些問題，不少公司產品會在各用戶端接入人工客服系統，這些客服系統有第三方SaaS產品，好比智齒、Udesk等，也有公司本身研發，若是是公司本身研發，咱們怎麼快速搞定一我的工客服系統

                              工行智能客服

二. 客服系統

一個簡單的客服系統包含幾個主要功能：

1. 人工問答
2. 機器人問答
3. 邀請評價
4. 客服坐席系統
5. 會話管理系統

系統框架圖:

訪客端就是用戶觸達端（c端），c端主要三個功能：

1. 人工會話
2. 滿意度評價
3. 機器人會話

通訊協議：

1. 長連接：websocket+ssl
2. 短連接：http+ssl

人工會話主要是個IM功能，功能包含普通文本消息，富文本，圖片，視頻，文件發送等，主要依賴的通訊協議是websocket，而機器人會話能夠直接使用http，下面咱們來說解下，如何快速實現一個簡單的c端客服系統。

三. 技術選型

Vue/React + Nodejs/Java + socket.io + Http複製代碼

四. 具體實現

1. Nodejs或Java實現一個IM server

        這個能夠看socket.io的具體文檔，socket.io給大部分語言Node/Java/C#等提供了SDK，能夠輕易實現一個簡單的IM server

2. 前端實現一個客服聊天界面

• 用戶輸入區
• 客服/機器人回答區
• 輸入框
• 表情選擇框
• 圖片視頻選擇框

具體的實現不用講解，vue/react實現這些這些功能很簡單，咱們主要看看前端IM的核心部分，如何經過socket.io與IM server進行通訊

3. 代碼核心部分

安裝npm包socket.io-client

import io from 'socket.io-client'複製代碼

初始化websocket

this.socket = io(this.$config.socketUrl, {
    transports: ['websocket'],
    path: '/ws/im'
})複製代碼

監聽各類自定義事件

     頁面數據展現能夠經過各類自定義事件完成，不少socket.io自帶的事件能夠監聽websocket連接，重連，異常等。

/* * 處理系統消息 */
this.socket.on('session', data => {
  // todo
})複製代碼

/* * 處理人工消息 */
this.socket.on('message', data => {
  // todo
})複製代碼

/* * 監聽連接事件 */
this.socket.on('connect', data => {
  // todo
})複製代碼

/* * 監聽重連事件 */
this.socket.on('reconnect', data => {
  // todo
})複製代碼

4. 心跳檢測、斷線重連

       作IM功能時，會遇到不少問題，一個比較核心的問題就是，用戶在使用過程當中切換應用，或者網絡中斷的狀況下，websocket會主動斷開，在斷開期間，客服給你發的消息你是看不到的，即便網絡恢復正常，你也不能正常收到離線消息，爲了保證用戶在斷網重連以後，websocket恢復正常，就須要作心跳檢測。

核心代碼

/* * 開啓心跳檢測 */
 startHeartbeat () {
     window.clearTimeout(this.heartBeatTimer)
     window.clearTimeout(this.closeHeartBeatTimer)
     this.heartbeatEvent()
},

/* * websocket心跳檢測 */
heartbeatEvent () {
    this.heartBeatTimer = setTimeout(() => {
        this.sendHeartbeat()
        this.closeHeartBeatTimer = setTimeout(() => {
            // socket.close() //此處不能主動斷開socket
        }, this.closeHeartBeatDelay)
    }, this.heartBeatDelay)
 },

 /* * 發送心跳事件 */
sendHeartbeat () {
    socket.emit('heartbeat', 'heartbeat', e => {
        this.startHeartbeat()
     })
}複製代碼

何時開始心跳檢測，能夠在初始化socket.io監聽connect鏈接事件時開始心跳檢測

/*
 * 監聽連接事件
 */
this.socket.on('connect', data => {
   this.startHeartbeat()
})複製代碼

5. websocket調試技巧

     在開發過程當中若是須要調試websocket其實也比較簡單，移動端能夠經過瀏覽器或者抓包工具charls，PC端直接在控制面板Network中就能夠查看

ws請求url示例：wss://www.baidu.com/ws/im/?EIO=3&transport=websocket

五. 總結

    掌握以上幾點，實現一個完整的IM客服系統至關簡單，後續會分享不少客服系統的複雜功能，敬請期待...