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效果,让下拉框在未选择未输 ...
随机推荐
- 设计模式(三)—代理模式
目录: 一.概述 二.静态代理 三.动态代理 四.静态代理和动态代理的区别 一.概述 代理模式就是多一个代理类出来,替原对象进行一些操作,比如我们在租房子的时候回去找中介,为什么呢?因为你对 ...
- 在应用程序中使用Xml文件
用于操作Xml的文档主要有XmlNode.XmlDocument.XmlComment.XmlElement.XmlAttribute.XmlText.XmlNodeList 下面用一段代码来具体说明 ...
- Android -- 从源码带你从EventBus2.0飚到EventBus3.0(一)
1,最近看了不少的面试题,不管是百度.网易.阿里的面试题,都会问到EventBus源码和RxJava源码,而自己只是在项目中使用过,却没有去用心的了解它底层是怎么实现的,所以今天就和大家一起来学习学习 ...
- 设计模式的征途—3.工厂方法(Factory Method)模式
上一篇的简单工厂模式虽然简单,但是存在一个很严重的问题:当系统中需要引入新产品时,由于静态工厂方法通过所传入参数的不同来创建不同的产品,这必定要修改工厂类的源代码,将违背开闭原则.如何实现新增新产品而 ...
- UPS不间断电源网络功能介绍
UPS不间断电源网络功能介绍 随着联网技术的善及,用户又向UPS提出了更高的要求:ups电源应具有无人値守的功铅酸蓄电池能,不但具有自检的功能,还应具有联网功能,在网上UPS不间断电源可以随时观察up ...
- 最新windows 0day漏洞利用
利用视屏:https://v.qq.com/iframe/player.html?vid=g0393qtgvj0&tiny=0&auto=0 使用方法 环境搭建 注意,必须安装32位p ...
- STM32学习笔记(三)——外部中断的使用
开发板芯片:STM32F407ZGT6 硬件连接:PE3-KEY1 一.STM32F4的中断介绍 STM32F4的每个IO都可以作为外部中断输入,很强大的功能吧!以前学习的51只有两个外部中断. ST ...
- struts2之拦截器
1. 为什么需要拦截器 早期MVC框架将一些通用操作写死在核心控制器中,致使框架灵活性不足.可扩展性降低, Struts 2将核心功能放到多个拦截器中实现,拦截器可自由选择和组合,增强了灵活性,有利于 ...
- D3D中一些接口的变化和VS配置关联的方法
一.一些改变 #include <xnamath.h> 改为了 #include <DirectXMath.h> 二.vs关联 步骤: 1.选择工程的Properties, 2 ...
- yii框架后台过滤器的使用 安全防护
Yii过滤器简介 过滤器是一段代码,可被配置在控制器动作执行之前或之后执行.例如, 访问控制过滤器将被执行以确保在执行请求的动作之前用户已通过身份验证:性能过滤器可用于测量控制器执行所用的时间. 一个 ...