h5聊天4 - 图1

群聊

h5聊天4 - 图2

聊天-界面

h5聊天4 - 图3

自己-

h5聊天4 - 图4

h5聊天4 - 图5

后台

h5聊天4 - 图6

88聊天模型-群聊h5功能

连接(socket)

h5聊天4 - 图7

更新时间:2023-04-12 17:15:01
文档 属性·动作·事件
功能概述
连接(Socket)组件可以实现多个设备之间的信息传递,一般的应用场景有:
1、应用之间的数据即时共享
2、多人游戏的互动
基本用法
使用连接发送消息前,我们可以对当前用户进行登记,为当前用户设置在连接中的身份信息,可以设置当前用户在连接中发送消息时附带的用户ID、昵称以及头像,在其他用户接收到信息后可以直接方便地获取到发送者的信息(如下图,收到消息时可以直接可以看到消息来源内的用户ID等登记的信息)。但是连接内部使用用户CID作为唯一的身份标识,而且发送者信息也可以存储在消息数据这一对象内,因而这里的登记步骤可以按照需求考虑是否进行设置。
h5聊天4 - 图8
h5聊天4 - 图9
一.发送全局消息
具体流程如下:
1.事件触发向连接发送全局消息
其中,消息可以自定义多条,每条包含消息的名称和消息的具体内容。
h5聊天4 - 图10
2.“连接”收到全局消息后执行后续事件
消息名和消息内容组成的消息内容不论有多少条,均会存储在下图的消息数据中。
h5聊天4 - 图11
想要获取消息数据中的各条消息内容,在选择消息数据后要手动输入发送全局消息时设置的消息名,然后就可以获取到指定消息名内存储的消息内容了,如下图就可以获取到发送的全局消息内消息名为“内容1”的消息内容并将其赋值给文本1组件。
h5聊天4 - 图12
二.发送房间消息
发送房间消息使用的场景比全局消息多得多,聊天室就是其典型的应用场景。
1.创建房间
发送房间消息必须身处在房间内才有效,且连接内的房间必须通过创建生成,在创建房间时必须要设置房间ID用作房间的识别,另外还可以设置房间的最大人数。
创建房间及加入房间我们都建议使用如下图所示的事件,创建或加入房间能够更好地适用于多个情境。
h5聊天4 - 图13
2.加入房间
加入房间也执行上面的动作,这个时候需要输入要进入房间的房间ID。房间ID是成员加入房间的依据,根据实际的使用场景设定固定的房间名或者随机的房间名,房间名可以通过“设置URL”后分享案例链接的方式让其他成员获取房间号。
3.发送房间消息及接收房间消息
发送房间消息时除开和全局消息内一样传入消息内容外,还需要房间ID,将该消息发送到指定的房间。
h5聊天4 - 图14
发送的房间消息会发送到指定房间ID的房间内,只有该房间内的用户可以接收到此信息,接收房间消息并执行后续事件和接收全局消息的事件设置相同,只需要相应的将连接的触发事件更改为“收到房间消息”。
h5聊天4 - 图15
三.发送个人消息
1.获取用户CID
发送个人消息时需要获取到用户的CID,获取CID有两种方式,一种为登记后在回调信息内拿取当前用户CID;
h5聊天4 - 图16
另一种则是在当前连接成功这一事件下获取当前用户CID。
h5聊天4 - 图17
2.发送个人消息及接收个人消息
发送个人消息和发送房间消息类似,这里需要传入的参数为要送达用户的CID。
指定CID的用户会收到这一条发送的消息,然后通过连接的“收到个人消息”事件来获取消息的内容并进行下一步的操作,该步骤操作参照收到全局消息、收到房间消息这两个事件。
h5聊天4 - 图18

私聊

h5聊天4 - 图19

h5聊天4 - 图20

h5聊天4 - 图21

红点-提醒

h5聊天4 - 图22

上传

h5聊天4 - 图23

105私聊模型h5功能

IM在线

h5聊天4 - 图24

h5聊天4 - 图25

电脑版

h5聊天4 - 图26

比例-右上角,不能用快捷键

h5聊天4 - 图27

后台

h5聊天4 - 图28

86在线聊天demo综合h5功能

客服

h5聊天4 - 图29

加载

h5聊天4 - 图30

客服

h5聊天4 - 图31

竖向

h5聊天4 - 图32

加载记录

h5聊天4 - 图33

提交记录

h5聊天4 - 图34

右下-切换

h5聊天4 - 图35

登录-部分模块

h5聊天4 - 图36

记录

h5聊天4 - 图37

宽度==界面在上

314极简客服系统DEMO

e