一. 背景

基本所有公司产品上线之后，用户在使用过程中都会遇到很多问题，为了实时高效的解决这些问题，很多公司产品会在各用户端接入人工客服系统，这些客服系统有第三方SaaS产品，比如智齿、Udesk等，也有公司自己研发，如果是公司自己研发，我们怎么快速搞定一个人工客服系统

工行智能客服

二. 客服系统

一个简单的客服系统包含几个主要功能：

人工问答
机器人问答
邀请评价
客服坐席系统
会话管理系统

系统框架图:

访客端就是用户触达端（c端），c端主要三个功能：

人工会话
满意度评价
机器人会话

通信协议：

长链接：websocket+ssl
短链接：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客服系统相当简单，后续会分享很多客服系统的复杂功能，敬请期待...