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客服系统相当简单，后续会分享很多客服系统的复杂功能，敬请期待...``