阅读 3520

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


文章分类
前端
文章标签