在社交为王的互联网时代下,在线聊天室的概念越来越火。
前阵子,微信朋友圈里的“好友印象”、“在线1对1聊天”H5层出不穷,居然还刷了屏。这种H5通常会把两个/多个人连接起来,一旦达成这种关系,任意一方发送消息,对方都会实时收到。
实际上,主要是利用了Web Socket技术建立起的实时通信机制。但目前Web Socket技术已经被iH5封装组件化,推出易用、好用的“连接”功能,不会程序编程的小白,也能轻易上手。
以下这个H5,就是本人利用连接功能制作的1对1在线聊天室H5 Demo,在打开后把H5转给任意一名好友,即可达成连接关系,先试试吧~
接下来,我们以iH5 3.0为创作工具,分五步,分析&讲解其交互实现方法。
第一步,理解交互流程
因为是1对1连接,因此交互、体验方式会区别于一般在线聊天室,具体如下:
从画面可以看到,连接关系的搭建,需要用户自行转发给他人,将连接二次打开后才达成的。
这就意味着,系统需要自动甄别此时打开H5链接的人,是新打开的/别人转发而打开的,前者可以理解为聊天发起者,后者可以理解为聊天接收者。
此时,就有第一个交互重点:怎么甄别这个人是谁?
第二步,设定用户甄别机制
首先我们需要先将这个聊天室的雏形做出来,需要用到的功能包括:输入框、连接、文本、透明按钮等,将这些功能调整到相应的位置,如下:
(1)利用舞台属性给用加标签
我们要为舞台自定义三个初始数值为0的属性,分别是sender(发送人)、receiver(接收人)、sender_verifier(当前用户标记),这三个东西可以理解为三个容器&