web 直播&即时聊天------阿里云、融云(二)
上一篇简要主要介绍了融云制作聊天室的基本方法,这次基本属于对上一篇的补充以及进阶...^_^...
(ps:吐槽一下,加了三个融云的线下qq群,全部没人解决问题,也不知道建此群的意义,若是民间的话就当我没说,若是融云的工作人员的话,那这做的确实有些糙。反正我是那种给我文档我可能还要懵B的人,而且web这一块的文档真心不算很友好!!!)
根据需求,聊天室已经创建出来了,可是需求不会一成不变,上面又下达了需要根据直播人的行为来改变观看人状态的事(简单点说就是,直播的点一个按钮,看直播的这边即时增加一个按钮出来)
了解需求后,首先想到的是创建长连接来达成,可后来发现利用融云的消息监听功能可以不错的完成这个功能。
1.小灰条

官方给出的是这样的,然后我就
var msg = new InformationNotificationMessage('小灰条');
RongIMClient.getInstance().sendMessage(conversationType,targetId, msg, {
onSuccess: function (message) {
// do something...
},
onError: function (errorCode) {
// do something...
}
})
so:
然后又去api里查也没有给出个方法,不过最后还是找到类似的方法,替换下方法名即可。
var msg = new RongIMLib.InformationNotificationMessage({"message": "命令"});
var conversationtype = RongIMLib.ConversationType.CHATROOM;//聊天室
var targetId = "xxx"; // xxx聊天室Id
RongIMClient.getInstance().sendMessage(conversationType,targetId, msg, {
onSuccess: function (message) {
// do something...
},
onError: function (errorCode) {
// do something...
}
})
之后在消息监听器中找到对应方法进行事件处理
// 消息监听器
RongIMClient.setOnReceiveMessageListener({
// 接收到的消息
onReceived: function (message) {
// 判断消息类型
switch(message.messageType){
case RongIMClient.MessageType.TextMessage:
// 发送的消息内容将会被打印
//console.log(message.content.content);
console.log('收到发送的消息')
break;
case RongIMClient.MessageType.VoiceMessage:
// 对声音进行预加载
// message.content.content 格式为 AMR 格式的 base64 码
RongIMLib.RongIMVoice.preLoaded(message.content.content);
break;
case RongIMClient.MessageType.ImageMessage:
// do something...
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.LocationMessage:
// do something...
break;
case RongIMClient.MessageType.RichContentMessage:
// do something...
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.InformationNotificationMessage:
// do something...
console.log('收到小灰条信息')
break;
case RongIMClient.MessageType.ContactNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.ProfileNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.CommandNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.CommandMessage:
// do something...
break;
case RongIMClient.MessageType.UnknownMessage:
// do something...
break;
case RongIMClient.RegisterMessage.PersonMessage:
// do something...
break;
default:
// 自定义消息
// do something... }
}
});
2.自定义消息
自定义消息官方还是给了足够多的解释的,这里就简单梳理一下
首先,创建消息
//创建消息
var messageName = "PersonMessage"; // 消息名称。
var objectName = "s:person"; // 消息内置名称,请按照此格式命名。
var mesasgeTag = new RongIMLib.MessageTag(true,true);// 消息是否保存是否计数,true true 保存且计数,false false 不保存不计数。
var propertys = ["name","age"]; // 消息类中的属性名。
RongIMClient.registerMessageType(messageName,objectName,mesasgeTag,propertys);
var conversationType = RongIMLib.ConversationType.CHATROOM; //聊天室,其他会话选择相应的消息类型即可。
var targetId = "xxx"; // 想获取自己和谁的历史消息,targetId 赋值为对方的 Id。
之后,在事件中触发
//发送消息
var msg = new RongIMClient.RegisterMessage.PersonMessage({name:"zhang",age:12});
RongIMClient.getInstance().sendMessage(conversationType,targetId, msg, {
onSuccess: function (message) {
},
onError: function (errorCode) {
}
})
这里需要注意的是,不仅需要在直播方创建消息,在观看方同样需要创建,而上面说到的小灰条则只在直播方或者管理者创建就可以...
发送完信息后,接受信息的地方同时需要更改
// 消息监听器
RongIMClient.setOnReceiveMessageListener({
// 接收到的消息
onReceived: function (message) {
// 判断消息类型
switch(message.messageType){
case RongIMClient.MessageType.TextMessage:
// 发送的消息内容将会被打印
//console.log(message.content.content);
$('.list').prepend('<li>'+message.content.content+'</li>');
console.log('收到信息')
break;
case RongIMClient.MessageType.VoiceMessage:
// 对声音进行预加载
// message.content.content 格式为 AMR 格式的 base64 码
RongIMLib.RongIMVoice.preLoaded(message.content.content);
break;
case RongIMClient.MessageType.ImageMessage:
// do something...
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.LocationMessage:
// do something...
break;
case RongIMClient.MessageType.RichContentMessage:
// do something...
break;
case RongIMClient.MessageType.DiscussionNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.InformationNotificationMessage:
// do something... console.log('收到小灰条')
break;
case RongIMClient.MessageType.ContactNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.ProfileNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.CommandNotificationMessage:
// do something...
break;
case RongIMClient.MessageType.CommandMessage:
// do something...
break;
case RongIMClient.MessageType.UnknownMessage:
// do something...
break;
case RongIMClient.MessageType.PersonMessage:
// do something...
//这里看清上面是PersonMessage,即创建消息时候所创建的消息名称
console.log('自定义消息')
break;
default:
// 自定义消息
// do something...
}
}
});
基本上就是这些了,如果在阅读过程中遇到任何问题,欢迎指正...
本文地址:http://www.cnblogs.com/bbbiu/p/6895016.html
小人持器,叫嚣不停;君子藏器,待机而动;国有利器,不示于人
web 直播&即时聊天------阿里云、融云(二)的更多相关文章
- web 直播&即时聊天------阿里云、融云
随着直播越来越火,所在公司也打算制作自己的直播,所以去了解了这方面,使用后发现还是有些问题需要记录的. 经过分析,制作直播应该是分为两块来做,即直播与实时评论.这里先去制作实时评论,等直播ok后,也会 ...
- web 直播&即时聊天------阿里云、融云(三)
经过前面的知识,基本已经把聊天室的功能搞定了,剩下的就是直播的问题了... 一如既往,阿里云的web demo也是少的可怜,只有一个web播放器(Prismplayer),所以这里主要就此播放器踩的坑 ...
- 高仿QQ即时聊天软件开发系列之二登录窗口界面
继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因 ...
- web 直播&礼物赠送------腾讯云(四)
直播项目搁置了将近1年,以为都搁浅了,没想到头头又提起来了,这次直播技术更替为了腾讯云,消息系统没变,采用的依然是融云,新增了礼物赠送功能. 项目完成基本就是这样子: 一,播放器 由阿里云转腾讯云,w ...
- 克服"水土不服",融云助攻小象直播杀破"出海重围"
2016年是直播行业被资本疯狂追逐的一年,可至今却经历着“浪潮”褪去,洗刷的不止是中小型直播平台,就连熊猫TV等有资本加持的大平台都纷纷遭遇倒闭危机.然而,直播行业作为泛娱乐的模式之一,其实本身“未死 ...
- 融云SDK触达用户数破20亿 王者风范双倍展现
11月1日,融云SDK触达用户数突破20亿,业务增长速度及用户覆盖量再创即时通讯云领域新高.自去年11月10日公布SDK触达用户数破10亿以来,融云仅用了一年时间,便取得了触达用户数翻倍的成绩,迅猛的 ...
- 融云红包全新升级,让App用户更便捷地用“钱”交流感情!
随着移动互联网的飞速发展,如何增强社交关系.留住用户的心已成为移动社交化时代各类App持续探索的问题,除了接入即时通讯的能力,众多社交平台开始通过趣味性十足的红包功能为App中的社交场景赋能.当即时通 ...
- 几款web版整合(QQ、msn、icq、yahoo通、Gtalk等)即时聊天http://hi.baidu.com/ejie/blog/item/e89794ef9a9431efce1b3ebd.html
直到近期为止,我们经常使用的即时聊天工具(QQ.msn等)了Web版,大家不用下载庞大软件,直接打开网页就能够与自己的好友聊天,很方便.在此将时汇总,便于大家查找,节约大家一点时间. 此都是官 ...
- 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框
上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...
随机推荐
- Uva 11029 Leading and Trailing (求n^k前3位和后3位)
题意:给你 n 和 k ,让你求 n^k 的前三位和后三位 思路:后三位很简单,直接快速幂就好,重点在于如何求前三位,注意前导0 资料:求n^k的前m位 博客连接地址 代码: #include < ...
- PCIE_DMA实例三:Xilinx 7系列(KC705/VC709)FPGA的EDK仿真
一:前言 好久没写博客了,前段时间有个朋友加微信请教关于PCIe的一些学习方法.本人也不是专家,只是略知一些皮毛.对于大家反馈的问题未必能一一解答,但一定知无不言.以后我会常来博客园看看,大家可以把问 ...
- css3 loading动画 三个省略号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Webdriver API之操作(二)
一.窗口截图 dirver.get_screenshot_as_file("D:\\report\\image\\xxx.jpg") 二.关闭窗口 dirver.close() # ...
- struts2之拦截器
1. 为什么需要拦截器 早期MVC框架将一些通用操作写死在核心控制器中,致使框架灵活性不足.可扩展性降低, Struts 2将核心功能放到多个拦截器中实现,拦截器可自由选择和组合,增强了灵活性,有利于 ...
- 关于string类型定义占几个字节??
测试代码: #include <iostream>using namespace std;int main(void){ string name; cout<<"si ...
- 【Spark2.0源码学习】-3.Endpoint模型介绍
Spark作为分布式计算框架,多个节点的设计与相互通信模式是其重要的组成部分. 一.组件概览 对源码分析,对于设计思路理解如下: RpcEndpoint: ...
- JavaScript中的数据结构及实战系列(1):队列
开题 张三丰教无忌太极剑法: 还记得吗? 全都记得. 现在呢? 已经忘却了一小半. 啊,已经忘了一大半. 不坏不坏,忘得真快,那么现在呢? 已经全都忘了,忘得干干净净. 好了,你上吧. 长时间写前端代 ...
- NI Vision for LabVIEW 基础(一):NI Vision 简介
NI Vision 控件模板 Vision控件模板位于LabVIEW控件模板的最顶层,由一下元素组成: IMAQ Image.ctl—该控件是一个类型定义,用于声明图象类型的数据.在VI的前面板中使用 ...
- JS模式---发布、订阅模式
发布订阅模式又叫观察者模式,它定义一种一对多的依赖关系, 当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. document.body.addEventListener('click', ...