【版主分享】融云教程第八篇 群组会话（图像语音消息）

川哥哥

融云即时通信系列和教程
1、【版主分享】融云教程第一篇 登录（获取token）
2、【版主分享】融云教程第二篇 消息发送与接收（文字消息）
3、【版主分享】融云教程第三篇 消息发送与接收（图像消息）
4、【版主分享】融云教程第四篇 消息发送与接收（语音消息）
5、【版主分享】融云教程第五篇 聊天记录
6、【版主分享】融云教程第六篇 会话列表（最近会话消息）
7、【版主分享】融云教程第七篇 群组会话（文字消息）
8、【版主分享】融云教程第八篇 群组会话（图像语音消息）




一、软件界图







二、测试地址


三、源码下载


上一篇教程已经讲了群聊发送文字消息，因此在此基础上增加图像、语音消息。群聊发送语音和图像消息和单聊差不多，只是会话类型改变为GROUP，目标id变为群id。

1、群图像消息
发送图像消息，需要判断附件按钮被单击，点击第一个按钮打开系统相册，单击第二个按钮就打开系统相机拍照。


getPicture( )函数会返回图像地址，然后调用rong.sendImageMessage对象发送图像消息，发送图像消息也添加5个附加参数（发送者账号、发送者头像、群组id、群组名称、群组头像）方便以后调用。


最后将发送的图像显示在右边。


最近会话getLatestMessages( )函数以及历史会话 getHistoryMessages()函数都需要修改，新增图像会话的判断代码，才能显示显示图像消息，修改如下。


查看图像需要调用openImage( )函数代码如下



接收其他成员发送的图像消息需要修改消息监听代码，新增对图像会话信息的判断代码，修改如下。




到此群会话页frame_qun.html 就可以在群里查看和发送图像消息




2、群语音消息

接着说发送语音消息，需要监听录音按钮4种状态监听
press（按下录音按钮）
press_cancel（松开录音按钮）
move_out_cancel（按下录音按钮后，从按钮移出并松开按钮）
move_in（move_out 事件后，重新移入按钮区域）。
这个和单聊语音差不多
press（按下录音按钮）


move_in（move_out 事件后，重新移入按钮区域）。


press_cancel（松开录音按钮）需要调用rong.sendVoiceMessage对象，同样需要附加5个参数会话类型为GROUP，目标id为群id。


中止录音和播放录音函数


然后将发送的语音信息以图标+时间的方式显示在页面。



move_out_cancel 代码和press_cancel代码一样
最近会话getLatestMessages( )函数以及历史会话 getHistoryMessages()函数以及消息监听代码都需要修改，新增语音会话的判断代码，才能显示语音消息。
语音会话判断代码



到此群会话页frame_qun.html 就可以在群里查看和发送语音消息



3、会话列表显示图像和语音像消息
群里面发送的图像和语音消息需要显示在会话列表页面( frame_hhxx.html )  必须修改最近会话列表代码，新增图像语音会话的判断代码，并且显示发送者。
新增判断代码如下



到此最近会话列表页frame_hhxx.html 就可以显示最近群里面谁发送的图像和语音消息。

gigie

嗯，感谢分享。

munyi

感谢分享

YonBIP社区

感谢分享

APICloud--玲玲

6666，为你点赞哦，感谢分享

川哥哥

APICloud--玲玲 发表于 2017-12-5 18:23
6666，为你点赞哦，感谢分享

zhou1

厉害！我整了几天都没搞出来

juni

内容丰富，谢谢！

lwqiqi

川哥哥就是厉害哈

Mr@ZhouHeng

投诉楼主天天换头像虐狗有没有管理来管下，在虐我们就把他媳妇抢走