最简单方便的实时通知客服系统

背景

我自己有一个快讯短信代发助手的服务,这个服务的客户可以在线下单发送短信,我这边收到通知后,就可以取到短信任务派单发送,但是下单的途中,客户可能有一些疑虑或者问题需要咨询,如果加微信咨询的话,就太麻烦了,或者涉及隐私问题,客户不愿意加微信沟通,如果没有解决客户的疑虑,这个客户可能就流失了,所以我需要一个实时通知的客服在线系统,客户可以在系统中咨询,我可以在系统中回复,这样就可以方便客户咨询,也可以方便我咨询客户。

基于以上背景,借助AI编程的情况下,我花了零星的一周的时间开发了一个简易但是很实用的实时客服在线系统,这个系统的功能比较简单,但是可以满足我的需求,我可以在系统中回复客户的问题,也可以在系统中咨询客户的问题,这样就可以方便客户咨询,也可以方便我咨询客户。现在我把这个系统分享出来,主要是我认为还有很多和我一样有这种独立产品需要接入客服系统的人,我搜了下市面上的客服系统,感觉都特别重,而且收费还不便宜,既然自己有服务器,还不如自己搭建一个自己的,只要满足需求即可。

功能介绍

我的需求其实也挺简单,客户咨询后,我可以收到提醒,收到提醒后,可以立即进入沟通界面和客户进行沟通,沟通是双向的,可以发文字,也可以发图片,如果客户咨询时我不在线,消息可以等到我上线时发送给我,如果我回复客户时,客户离线了,我可以将消息先发出去,客户上线后可以立马看到。

另外这个客户沟通的系统可以接入自己的网站,通过接入js的形式就可以快速接入,无需额外开发,只需要在自己的网站中引入js文件,就可以接入这个系统,显示在网页上的是一个悬浮按钮,点击后可以显示沟通界面,在沟通界面可以和客户进行沟通,沟通是双向的,可以发文字,也可以发图片。

还有一个,消息可以本地缓存,服务端不做存储,服务端只做转发和临时的存储,这样做可以减少服务端的压力,网页端采用indexdb缓存历史消息记录即可,这样消息在刷新后还存在,如果担心消息太多或者想去掉沟通内容,也可以自己删除单条消息,这样可以做到无痕沟通,另外,收到和发出去的图片,可以点击预览,这样可以方便客户查看图片。

系统架构

服务端采用Golang编写,AI编写很方便,可以windows编写,linux部署,将需求告诉AI,很快就弄好了。网页端采用最原始的js/html编写,网页前端和后端之间主要使用websocket进行通信,这样可以做到实时的双向沟通。前端客户界面启动后,主动和服务端建立连接,上报当前客户的在线状态,同时客户界面更新客服的在线状态,可以看到客服是否在线,或者多少分钟/小时前在线过。前端客服管理系统界面启动后,主动获取客户列表,包括离线的和在线的客户信息,并获取对应客户的历史消息,可以切换不同的客户进行沟通,并上报当前客服在线状态给服务端。

系统架构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
graph TD
A[客户前端] -->|WebSocket| B[Golang服务端]
C[客服管理前端] -->|WebSocket| B[Golang服务端]

subgraph 前端
A -->|上报在线状态| B
A -->|接收客服状态| B
A -->|收发消息| B
C -->|获取客户列表| B
C -->|收发消息| B
end

subgraph 后端
B -->|存储消息| D
B -->|广播状态| A&C
B -->|转发消息| A&C
end

关键组件说明:

  1. WebSocket连接:实现实时双向通信
  2. 状态管理:客户/客服在线状态实时同步
  3. 消息存储:历史消息持久化
  4. 客户列表:包含在线/离线客户信息

系统截图

前端客户界面截图
前端客户界面截图

前端客服界面截图
前端客服界面截图

前端网站插件悬浮窗口截图
前端网站插件悬浮窗口截图

实时通知

这个功能比较关键,如果客服不在线时,客户咨询了,一直得不到回复,那这个系统作用也不大,所以这个是最关键的一点。在服务端收到客户消息后,如果此时客服离线了,需要通知到客服的微信,这样才可以做到几乎实时沟通。这里采用的企业微信号可以几乎无限次接收到消息提醒的功能,客服关注对应的企业号后,在服务端就可以发送提醒消息到客服手机微信上了,这个是很方便的。这个的实现方式在之前的文章中也有介绍,这里就不重复介绍了,实现后的效果可以看下下面的截图。
实时通知截图

总结

我自己使用下来,主要需求已经满足了,后续有什么问题再继续完善,比如可以增加智能回复的功能,由于是自己的系统,想怎么加就怎么加,智能回复可以减少一些重复的工作量,结合知识库去做,智能回复比客服自己回复更加全面更加有耐心,这是可以考虑的一个方向。不知道大家有没有这样的需求,不然我可以考虑将当前的实现开源出来,自己有服务器的开源自己去部署实现,也可以增加自己的一些功能,也可以先到https://kefu.nephen.cn体验下,看看效果怎么样,有需要直接在客服系统里找我也行。