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客服系统至关简单，后续会分享不少客服系统的复杂功能，敬请期待...