html聊天室ui,震惊！这个H5居然是在线聊天室！（内附完整教程）

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

前阵子，微信朋友圈里的“好友印象”、“在线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(当前用户标记)，这三个东西可以理解为三个容器&#