恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
震惊!这个H5居然是在线聊天室!(内附完整教程)
0.0°
2017-07-05 原创文章 教程 举报 21569 71 57 15

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

 

前阵子,微信朋友圈里的“好友印象”、“在线1对1聊天”H5层出不穷,居然还刷了屏。这种H5通常会把两个/多个人连接起来,一旦达成这种关系,任意一方发送消息,对方都会实时收到。

 

实际上,主要是利用了Web Socket技术建立起的实时通信机制。但目前Web Socket技术已经被iH5封装组件化,推出易用、好用的“连接”功能,不会程序编程的小白,也能轻易上手。

 

以下这个H5,就是本人利用连接功能制作的1对1在线聊天室H5 Demo,在打开后把H5转给任意一名好友,即可达成连接关系,先试试吧~


Image title


接下来,我们以iH5 3.0为创作工具,分五步,分析&讲解其交互实现方法。

 

第一步,理解交互流程

 

因为是1对1连接,因此交互、体验方式会区别于一般在线聊天室,具体如下:


Image title


从画面可以看到,连接关系的搭建,需要用户自行转发给他人,将连接二次打开后才达成的。

 

这就意味着,系统需要自动甄别此时打开H5链接的人,是新打开的/别人转发而打开的,前者可以理解为聊天发起者,后者可以理解为聊天接收者。

 

此时,就有第一个交互重点:怎么甄别这个人是谁?


第二步,设定用户甄别机制

 

首先我们需要先将这个聊天室的雏形做出来,需要用到的功能包括:输入框、连接、文本、透明按钮等,将这些功能调整到相应的位置,如下:


Image title

(1)利用舞台属性给用加标签

 

我们要为舞台自定义三个初始数值为0的属性,分别是sender(发送人)、receiver(接收人)、sender_verifier(当前用户标记),这三个东西可以理解为三个容器,其含义如下:

 

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

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

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


Image title


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


Image title


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

 

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

 

(2)用户身份甄别原理把握

 

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

 

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

 

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


Image title


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

 

A、sender ID=0,意味着此时H5是被新打开的,仍未默认数值;



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

 

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


Image title


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


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


Image title


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


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

 

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


Image title


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

 

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

 

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


Image title


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


Image title


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


Image title


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


Image title


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

 

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

 

第四步,给对方发送消息

 

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


Image title


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

 

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


Image title


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

 

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

 

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

 

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


Image title


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


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


Image title


来到这一步,整个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!

 

快来试试吧~




更新:2017-07-05

收藏

71人已收藏

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

  • 27

    作品

  • 2292

    粉丝

  • 8

    关注

  • 网易的爆款H5,手把手教你做!
  • 3个小时150万UV!网易的童年 H5刷屏了!
  • 视觉逼格指南:几何抽象风格神器
  • 4月精品H5盘点,Top20

    猜你喜欢

      2017-07-05 原创文章 教程 举报 21569 71 57 15

      震惊!这个H5居然是在线聊天室!(内附完整教程)

      0.0°

      你确定要举报震惊!这个H5居然是在线聊天室!(内附完整教程)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年07月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      57
      71
      15

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录