基本全部公司產品上線以後,用戶在使用過程當中都會遇到不少問題,爲了實時高效的解決這些問題,不少公司產品會在各用戶端接入人工客服系統,這些客服系統有第三方SaaS產品,好比智齒、Udesk等,也有公司本身研發,若是是公司本身研發,咱們怎麼快速搞定一我的工客服系統javascript
工行智能客服前端
一個簡單的客服系統包含幾個主要功能:vue
系統框架圖:java
訪客端就是用戶觸達端(c端),c端主要三個功能:react
通訊協議:web
人工會話主要是個IM功能,功能包含普通文本消息,富文本,圖片,視頻,文件發送等,主要依賴的通訊協議是websocket,而機器人會話能夠直接使用http,下面咱們來說解下,如何快速實現一個簡單的c端客服系統。npm
Vue/React + Nodejs/Java + socket.io + Http複製代碼
這個能夠看socket.io的具體文檔,socket.io給大部分語言Node/Java/C#等提供了SDK,能夠輕易實現一個簡單的IM server瀏覽器
具體的實現不用講解,vue/react實現這些這些功能很簡單,咱們主要看看前端IM的核心部分,如何經過socket.io與IM server進行通訊bash
安裝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
})複製代碼
作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()
})複製代碼
在開發過程當中若是須要調試websocket其實也比較簡單,移動端能夠經過瀏覽器或者抓包工具charls,PC端直接在控制面板Network中就能夠查看
ws請求url示例:wss://www.baidu.com/ws/im/?EIO=3&transport=websocket
掌握以上幾點,實現一個完整的IM客服系統至關簡單,後續會分享不少客服系統的複雜功能,敬請期待...