【案例预览链接】
1.0：
https://v4pre.h5sys.cn/play/ASDavdIU
2.0：
客服端 https://v4pre.h5sys.cn/play/DyUly4wR
用户端 https://v4pre.h5sys.cn/play/Tr9cSlFf
一、功能概述
一个简单的客服系统，主要实现以下功能：
①用户登录后通过页面右下角客服按钮呼叫客服。
②客服接待人数上限为2，若接待人数已满，此时接入的用户弹出繁忙提示。
③用户与客服实时对话。
④对话结束后关闭对话窗口，并把该用户退出接待队列以接待下一位用户。
⑤纯前台案例，不具有用户账号以及对话记录存储功能。
二、核心要点
本案例的功能实现主要依靠“连接”组件，不同情况下发送不同的消息，前台再根据接收到的不同的消息类型进行处理。
三、版本对比
由于在制作1.0版本时，iVX工具中“连接”组件尚不能跨案例通信，且组件生成的CID在案例运行时会发生变化，无法使用CID进行发送消息对象的定位。
图 1 无法获取CID，就无法定位发送对象
1.0中通过前台生成8位随机数id，并在发送消息时将发送者的id一并填入消息内容来达到消息定位的功能。
图 2 前台生成8位随机数id
图 3 发送消息时将发送者id填入消息内容
2.0版本进行时连接组件功能已得到完善，即同一连接可以跨案例通信，并且当前案例连接生成的CID固定不变，可作为身份的识别标志。
与前文同理，制作2.0版本时将用户和客服拆分为两个案例，客服和用户分别拥有了独立的CID，所以在双方建立连接（用户请求连接成功获取到客服CID）后，可通过各自的CID进行个人消息通信，相较于1.0全部使用全局消息的做法，使用个人消息可省去部分前台对消息的筛选处理的操作以及发送的消息内容。
图 4 用户对话时发送的消息内容对比
由于对话界面的消息显示是通过循环创建容器实现的，所以对话消息需要存到数组中作为循环创建容器的数据来源。在iVX工具中，；连接发送的消息默认格式为对象，
图 5 消息默认格式为对象
1.0版本中，将接收到的消息对象直接存入对应的一维数组，
图 6 对象直接存入一维数组
2.0版本中，接收到消息后选择消息中需要的部分，结合前台需要的数据格式，以一维数组的形式添加到二维数组。
图 7 以一维数组的形式添加到二维数组
2.0的操作便于对消息内容执行修改、查找以及删除等操作，而1.0中无法直接修改一维数组中的对象内容。
由于1.0客服端存储对话内容的方式是将对象直接存储到一维数组，所以无法对一维数组进行搜索查询并对目标值进行操作，导致用户结束对话后，客服无法根据结束对话的用户的信息查找到一维数组中的对应值并进行删除。
而且由于客服端结束对话仅是删除了接待队列数组中相应用户的数据，没有删除对话数组中相应用户的数据，当该用户再次接入时，客服端会出现与该用户的对话记录残留。
图 8 仅删除接待用户数组中的用户数据
2.0版本中，接待用户数据和对话内容都存储在二维数组中，无论是用户方还是客服方选择结束对话，都可根据一定的条件对二维数组进行搜索，并删除掉对应的数据，达到结束对话并清空对话记录的效果。
图 9 搜索并删除对应数据
随时随地看视频
热门评论
-
weixin_慕妹65969602020-10-22 1
查看全部评论点赞