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

一. 背景

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


                              工行智能客服前端

二. 客服系統

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

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

系統框架圖:java


訪客端就是用戶觸達端(c端),c端主要三個功能:react

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

通訊協議:web

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

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

三. 技術選型

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進行通訊bash

3. 代碼核心部分

安裝npm包socket.io-clientwebsocket

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客服系統至關簡單,後續會分享不少客服系統的複雜功能,敬請期待...

相關文章
相關標籤/搜索