您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

前端视角下的转转客服通信过程

时间:2023-03-31 11:56:55  来源:微信公众号  作者:大转转FE

当你在转转咨询客服时,你的问题是如何发送到客服的?客服又是如何快速精准回答的呢?这篇文章将从前端的视角,带你了解转转客服通信的整体流程。

客服通信的整体架构

首先看一看用户与客服通信的整体架构,如下图

图片

  • 「入口管理」:不同的客服入口,比如商品详情页、订单详情页、客服中心等,都会相应的机器人或者客服来处理用户的咨询。入口管理用来配置客服入口的不同参数,用以路由到不同的客服服务。
  • 「用户服务」:用户服务主要包括了机器人会话、人工会话、用户评价等。机器人会话是指用户与智能机器人聊天,用于快速回复用户一些基础问题。人工会话是指用户与客服的对话,通常是处理一些较复杂的咨询。无论是机器人还是人工,用户都可以对服务进行评价,这也是衡量客服服务水平的一个重要指标。
  • 「客服服务」:客服服务主要包括机器人管理和客服工作台。机器人管理是指客服人员对机器人的配置,比如业务线和订单识别规则、机器人的回复、相似问题的匹配逻辑等。客服工作台是指客服人员在工作时操作的界面,也是客服系统中最重要的一个系统,包含了客服与用户沟通的 IM、用户进线信息展示、工单的创建与管理等。
  • 「知识库」:客服知识库是整个客服最底层的基建,包含了客服所有需要的知识,像机器人的回复、客服的回复等。当有足够的知识时,对机器人和客服,快速精准的回答用户的问题,都有很大的帮助。

会话的基础架构

客服会话的基础结构如图

图片

每次用户进线后,会创建一个用户会话,该会话也可以叫大会话。用户可能先进入机器人模式下咨询,然后再进入人工客服,也可能直接进入人工客服。但每个环节会生成的新的会话,这种会话也叫子会话。大会话和小会话的关系是一对多的关系,即一个大会话可以包含多个小会话。当用户结束服务或会话超时关闭时,那么整个会话就算结束。

消息协议

在客服与用户的对话中,使用 WebSocket 进行数据通信。格式上,采用​​JSON​​格式,可以兼顾可读性和传输效率。消息的格式大体如下

 

{
  "type": 73,  // 消息类型
  "uid": "",  // 用户id
  "content": {
    "msgType": 1,  // 消息展示类型
    "data": {
      "sendTime": 1680095134107,  // 时间戳
      "text": "你好",
    }
  }
}

上面是一个最简单的消息结构,其中​​type​​表示消息的类型,IM 会话中存在多种不同类型的消息,如下图

图片

不同类型的消息,通过 WS 传输,用户侧与客服侧执行相应的逻辑。

机器人会话​

当用户进入客服会话时,通常会先进入机器人会话,机器人会话是指用户与智能机器人聊天,用于快速回复用户一些基础问题。机器人会话的整体流程如下图

 

图片

 

用户咨询后,首先会根据用户链接中不同的参数,匹配到不同的机器人或行为,这里面包括了 ​​机器人ID​​​、​​商品ID​​​、​​订单ID​​等。然后根据用户的咨询,匹配到相应的答案,并发送给用户。

机器人配置

机器人需要根据用户进入的不同渠道,展示不同的信息或者话术。当用户携带商品 ID 时,会先查询商品信息,如果该商品用户已购买,那么会自动匹配到订单的逻辑。如果该商品未购买,则展示商品的信息卡片,方便用户查看咨询的商品。如果用户携带订单 ID,那么会直接匹配到订单的逻辑,展示订单的信息卡片,同时还包括物流售后等信息。如果用户没有携带任何参数,那么会展示默认的机器人回复,以及一些推荐的商品或订单信息。

机器人中另外一个模块便是 ​​NLP​​​ 能力,通过 ​​NLP​​​ 能力,机器人将用户的输入转换成对应的标准问,然后匹配到相应的答案。这其中,可能需要与用户对话多次,根据用户提供信息才能匹配到最终答案。比如用户输入 ​​我想退货​​​,那么会匹配到 ​​我想退货​​ 这个问题,但是这个问题在不同场景下有不同的答案,比如订单的状态不同,回复的内容自然也就不同,所以还需要用户提供订单信息。

人工会话​

当机器人无法解决用户的咨询时,会转接到人工客服。人工客服会在客服工作台完成与用户的对话,整体工作台分为两个部分。左侧区域是客服的 IM 会话区域,包括了 IM 能力、联系人管理、发送不同类型消息等功能。右侧是客服的工作台,包括了查询用户的相关订单、信息等。以及很重要的创建客服工单的能力。

排队机制

在进入人工客服时,如果当前客服人员都在忙碌中,那么会进入排队队列,等待客服人员空闲后,再进入会话。排队的策略会由多种条件决定,主要有

  1. 客服的熟练度
  2. 当前已经接入的会话数
  3. 进入排队的时间

通过这三个条件,来决定排队的顺序,优先接入熟练度高的客服,同时也会考虑到客服的负载情况,避免客服过于繁忙。

评价​

在完成会话后,针对这次会话,用户可以进行评价。评价主要有以下几种形式

  1. 客服邀请评价
  2. 用户主动评价
  3. 结束会话时评价
  4. 二次进线时评价
  5. 离线评价
  6. 机器人评价

不同形式的评价,触发的时机不同,评价的内容也不同。但整体来看,都会对本次服务进行打分,包括满意、一般和不满意。

IM 的前端设计

在 IM 的前端机制中,主要包含了 ACK 机制、心跳机制、重连机制、消息重发机制等。这些机制都是为了保证消息的可靠性,即使在网络不稳定的情况下,也能保证消息的可靠传输。

  • 「ACK 机制」:用户发送的每一条信息都有一个 ack 回执,通过该回执知道当前信息是否发送成功。相应的在用户端页面,收到 ack 消息,会把消息的 loading 状态去掉,代表发送成功。
  • 「心跳机制」:每隔一段时间(7 秒钟),客户端会发送一个心跳包,服务端会返回一个心跳包,用于检测客户端与服务端的连接是否正常。在机器人对话中,超过 2 分钟无心跳响应,或在人工会话中,超过 5 分钟无心跳响应,便会清除该会话。

更多 IM 的基础设计,可以参考之前的文章:​​WebIM 原理解析​

除了基本的 WebSocket 类,还需要一个业务逻辑类,关键方法如下

 

class KFClient {
  sendInitialInfo() {}  // 发送初始信息
  sendNormalMsg() {}  // 发送普通消息
  sendMsgesRead() {}  // 发送消息已读状态
  requestQueue() {}  // 用户请求排队
  sendEvaluation() {}  // 用户发送评价
  onIMMsg(callback) {}  // 收到消息事件注册
  onMsgAck(callback) {}  // 收到ack消息事件注册
  onKfWriting(callback) {}  // 收到IM客服正在输入消息
  ...
}

 

总结​

以上便是客服系统的主要流程,从用户进入到客服系统,到最后的会话结束,整个流程中,客服系统会通过机器人、人工客服、评价等多个环节,来完成用户的咨询。客服系统也会通过多种手段,来提升用户的体验,更好的服务用户。



Tags:前端   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  Search: 前端  点击:(12)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  Search: 前端  点击:(9)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown —— 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  Search: 前端  点击:(11)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  Search: 前端  点击:(23)  评论:(0)  加入收藏
十个前端冷门但好用的前端工具函数库
本文推荐十个冷门但好用的前端工具函数仓库,它们可能没有很高的知名度,但却能为你解决实际问题,提高开发效率。在前端开发中,有时候我们会遇到一些常见的功能需求,但却不知道从哪...【详细内容】
2024-02-27  Search: 前端  点击:(21)  评论:(0)  加入收藏
前端开发:Visual Studio Code和Visual studio如何选?
Visual Studio Code和Visual studio都是微软的集成开发环境(IDE),那么在实际工作中该如何选择呢。贝格前端工场对二者做一番对比,帮助您决策一下。一、Visual Studio Code的介绍...【详细内容】
2024-02-27  Search: 前端  点击:(46)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  Search: 前端  点击:(32)  评论:(0)  加入收藏
一段微信小程序前端与后端连接的代码,带注解
微信小程序的前端和后端连接通常涉及到使用微信小程序提供的网络请求API与后端服务器进行通信。以下是一个简单的示例,展示如何使用微信小程序的前端代码向后端发送请求并处...【详细内容】
2024-01-24  Search: 前端  点击:(55)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  Search: 前端  点击:(69)  评论:(0)  加入收藏
JavaScript前端框架2024年展望
Angular、Next.js、React和Solid的维护者和创作者们展望2024年,分享了他们计划中的改进。译自2024 Predictions by JavaScript Frontend Framework Maintainers,作者 Loraine...【详细内容】
2024-01-05  Search: 前端  点击:(91)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(12)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(9)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown —— 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(11)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(23)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(32)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(23)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(69)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(80)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(38)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(72)  评论:(0)  加入收藏
站内最新
站内热门
站内头条