在社交为王的互联网时代下，在线聊天室的概念越来越火。

前阵子，微信朋友圈里的“好友印象”、“在线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（当前用户标记），这三个东西可以理解为三个容器，其含义如下：

A.sender：1对1聊天时，发出消息一方的ID

B.receiver：1对1聊天时，接收消息一方的ID

C.sender_verifier：当前打开这个H5的人的ID

为了准确地让系统知道打开H5的TA是谁，我们需要在舞台下加获取当前用户ID的事件：

此时，在H5被初始化打开时，舞台会自动为自定义属性下的“当前用户标记”内容设置成当前打开用户的ID。

系统知道此时TA的ID，对用户身份甄别有何帮助呢？

（2）用户身份甄别原理把握

上面提到的用户ID，是一串数字，就像每个手机的标识码一样，是唯一的，是身份甄别最好的前提之一。

而这个ID可以在H5被打开时自动获取得到，并且任何ID，都可以通过舞台下的“转发记录资源”事件，保存在URL（H5的链接）里。

当H5被打开，通常有两种情况：自己新打开的（无转发动作）、打开别人转发出来的（二次打开）。如果打开方式不同，对应的动作也有所差别，如下图：

上面这张图模拟出了两种打开情况，对应出的两种动作。首先，你会发现这两个方式最大的区别，在于判断sender的ID等不等于0——

A、sender ID＝0，意味着此时H5是被新打开的，仍未默认数值；

上图是对此设置的事件，目的在于定义目前用户为消息发送方。由于已经判断是被新打开的，因此舞台下的“sender”属性需要设为当前用户的ID。

B、sender ID≠0，以及≠当前用户标记，意味着H5之前已经记录过舞台“sender”的信息了，而且此时sender ID并不是被标记过的ID，说明它是被转发出来二次打开的。

上图是对此设置的事件，目的在于定义目前用户为消息接收方。

这里很容易产生思路混淆，为什么作为消息接收方，会设置接收方与发送方角色互换的事件呢？这里可以用两台手机模拟场景理解：

如上图所示，因为是1对1互聊的，因此两个手机都具备sender&receiver的身份。

对于右边手机而言，别人的“sender ID”相对于收到的人来说其实就是“receiver ID”。同时，系统需要记录当前用户的ID为sender ID。

最后，为了让这些ID在被转发时会被H5记录下来，在舞台下设置一个“转发记录资源”的事件即可，资源列表选为sender ID 以及receiver ID：

第三步，设置连接成功时的反馈机制

作为聊天室转发者，我们需要知道知道连接成功的反馈，而这个反馈动作应该设立在收信人打开了H5之后，此时的“receiver ID”已经不为默认的0了。

那么我们可以让舞台初始化后，让系统判断“receiver ID”≠0，然后触发反馈机制。对于多频次的触发，我们需要用到“触发器”功能，当舞台初始化后满足“receiver ID”≠0，触发“触发器”播放。

当然，触发器就是用于触发系统给连接发送消息，事件设置如下：

需要注意的是，发送的消息包括三点：receiver ID、sender ID、提示连接成功消息，其中提示连接成功的消息，内容填为“连接成功”，以此告诉转发者已经有人连接上了。

当转发者收到这条消息时，我们需要先判断这条信息是否是发给自己的，这个是大前提，也就是得让“sender ID”等于消息数据收信人。

下一个判断，如果receiver ID=0的时候，就会把消息数据中的发信人，设置为自己的receiver ID。当这些条件满足后，为一个文本赋值连接的消息数据——消息即可，文本会自动提取消息中的“连接成功”内容。

此时，发送到连接中的转发者的“sender ID”，就对应打开者的“receiverID”，成相反关系。至此，两个人的连接顺利搭建好了。

第四步，给对方发送消息

发送消息通常通过透明按钮的点击事件控制，以点击动作触发给连接发送内容即可。

发送的内容同样包含三部分，分别为“receiver”、“sender”、“消息内容”，消息内容部分选为输入框的“内容”属性即可。

当消息发到连接后，就可以根据消息内“receiverID”，利用上面提到的身份互换性，判断此时的消息是否为手机2的“sender”本人，如果判断通过，那么就为文本赋值这条消息的内容。

此时，在连接成功后，两人就可以开始对话了。

第五步，设置断开连接机制

这也算是第二个反馈机制，当对话双方任意一人想退出聊天，只要按一下断开的按钮，系统就会自动发送消息告诉对方，这次会话要结束了，不能再发送消息。

操作很简单，当点击“断开按钮”时，让“receiver ID”复位还原成默认值“0”，同时给连接发送一个“断开连接”的消息，具体操作如下：

当然这只是转发者的属性复位了，还需将打开者的属性复位。

上一步已经给连接发了“断开连接”的消息，因此我们在连接中继续添加事件，当收到消息且消息内容为“断开连接”时，同样给“receiver ID”复位成0：

来到这一步，整个1对1聊天室的交互实现已经完成。

最后两点温馨提示：

（1）双方交换内容时，都以彼此的ID作为凭证，因此发送消息时需要附带“sender ID”和“receiverID”；

（2）每次设置完ID时，都需要加一个“转发记录资源”事件，将当前的“sender ID”和“receiverID”记录起来；

如果大家想下载这个H5作为模板进行深入研究，可以在电脑浏览器上登录iH5账号的前提下，拷贝下列网址并打开，案例会自动拷贝到你的工作台中。

案例拷贝链接: 

http://www.ih5.cn/editor3/app/workCopy/5603130

当然，连接功能不单止能做1对1聊天室，结合Flex定位容器or其他功能，甚至你可以做出一个H5版的QQ！

快来试试吧~