web 直播&即时聊天------阿里云、融云

随着直播越来越火,所在公司也打算制作自己的直播,所以去了解了这方面,使用后发现还是有些问题需要记录的。

经过分析,制作直播应该是分为两块来做,即直播与实时评论。这里先去制作实时评论,等直播ok后,也会将相应心得写上来。

我们直播采用了阿里云,评论采用了融云

其实融云的api还是比较清晰的,只不过web demo只有ng的,个人对ng不是很熟悉,所以只能自己慢慢摸索。

1. 注册帐号,根据提示创建应用,获取appkey

2. 引入sdk(请去官网选择最新版本)

<script src="http(s)://cdn.ronghub.com/RongIMLib-2.2.5.min.js"></script>

3. 初始化sdk

RongIMClient.init("xxx"); //"xxx"代表你的appkey

4. 设置监听器

 // 设置连接监听状态 ( status 标识当前连接状态)
 // 连接状态监听器
 RongIMClient.setConnectionStatusListener({
    onChanged: function (status) {
        switch (status) {
            //链接成功
            case RongIMLib.ConnectionStatus.CONNECTED:
                console.log(‘链接成功‘);
                break;
            //正在链接
            case RongIMLib.ConnectionStatus.CONNECTING:
                console.log(‘正在链接‘);
                break;
            //重新链接
            case RongIMLib.ConnectionStatus.DISCONNECTED:
                console.log(‘断开连接‘);
                break;
            //其他设备登录
            case RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:
                console.log(‘其他设备登录‘);
                break;
              //网络不可用
            case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
              console.log(‘网络不可用‘);
              break;
            }
    }});

 // 消息监听器
 RongIMClient.setOnReceiveMessageListener({
    // 接收到的消息
    onReceived: function (message) {
        // 判断消息类型
        switch(message.messageType){
            case RongIMClient.MessageType.TextMessage:
                   // 发送的消息内容将会被打印
                console.log(message.content.content);
                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...
                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;
            default:
                // 自定义消息
                // do something...
        }
    }
});

顾名思义,状态连接监听器是用来检测当前用户的状态的,消息监听器也就是我们接受消息的。

5. 获取token(在我的应用中自行获取即可)

6. 连接服务器

var token = "xxx"; //"xxx"代表你自己的token

// 连接融云服务器。
      RongIMClient.connect(token, {
        onSuccess: function(userId) {
          console.log("Login successfully." + userId);
        },
        onTokenIncorrect: function() {
          console.log(‘token无效‘);
        },
        onError:function(errorCode){
              var info = ‘‘;
              switch (errorCode) {
                case RongIMLib.ErrorCode.TIMEOUT:
                  info = ‘超时‘;
                  break;
                case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                  info = ‘未知错误‘;
                  break;
                case RongIMLib.ErrorCode.UNACCEPTABLE_PaROTOCOL_VERSION:
                  info = ‘不可接受的协议版本‘;
                  break;
                case RongIMLib.ErrorCode.IDENTIFIER_REJECTED:
                  info = ‘appkey不正确‘;
                  break;
                case RongIMLib.ErrorCode.SERVER_UNAVAILABLE:
                  info = ‘服务器不可用‘;
                  break;
              }
              console.log(errorCode);
            }
      });

7. 发送消息

 // 定义消息类型,文字消息使用 RongIMLib.TextMessage
 var msg = new RongIMLib.TextMessage({content:"hello",extra:"附加信息"});
 //或者使用RongIMLib.TextMessage.obtain 方法.具体使用请参见文档
 //var msg = RongIMLib.TextMessage.obtain("hello");
 var conversationtype = RongIMLib.ConversationType.CHATROOM; // 聊天室
 var targetId = "xxx"; // 目标 Id
 RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                // 发送消息成功
                onSuccess: function (message) {
                    //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                    console.log("Send successfully");
                },
                onError: function (errorCode,message) {
                    var info = ‘‘;
                    switch (errorCode) {
                        case RongIMLib.ErrorCode.TIMEOUT:
                            info = ‘超时‘;
                            break;
                        case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                            info = ‘未知错误‘;
                            break;
                        case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                            info = ‘在黑名单中,无法向对方发送消息‘;
                            break;
                        case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                            info = ‘不在讨论组中‘;
                            break;
                        case RongIMLib.ErrorCode.NOT_IN_GROUP:
                            info = ‘不在群组中‘;
                            break;
                        case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                            info = ‘不在聊天室中‘;
                            break;
                        default :
                            info = x;
                            break;
                    }
                    console.log(‘发送失败:‘ + info);
                }
            }
        );
因为是直播所以选择了聊天室,大家根据自己的需求更改即可

RongIMLib.ConversationType.CHATROOM; ==> 选择聊天室
targetId = "xxx"; ==> 如果是聊天室就填写创建聊天室的id,私聊就是目标用户的id,以此类推

8. 进入聊天室

var chatRoomId = "xxx"; // 聊天室 Id。
  var count = 1;// 拉取最近聊天最多 50 条

RongIMClient.getInstance().joinChatRoom(chatRoomId, count, {
  onSuccess: function() {
       // 加入聊天室成功。
       console.log(‘加入聊天室成功。‘);
  },
  onError: function(error) {
    // 加入聊天室失败
  }
});

当没有聊天室的时候,此方法会创建聊天室

9.其他

基本上的功能就是这样了,像其他的功能(同步回话列表,表情等)大家去官网查看,这里就不讲解了...

如若您发现有任何问题,欢迎交流指正...

西北有高楼,上与浮云齐

时间: 2024-10-07 02:24:53

web 直播&即时聊天------阿里云、融云的相关文章

Vue+原生App混合开发手记#2 融云即时通讯

最近开发的一个医药项目中要求加入即时通讯,最后选择了融云IM即时通讯服务,融云即时通讯包含Android SDK,iOS SDK以及Web SDK,为了节省开发时间,使用了Web SDK,这样在Android平台和iOS平台上都能表现一致.这是部分界面的效果, 分为两类用户,一类是医生,接受患者的咨询,一类是患者,可以与医生交流: 医生用户看到的界面 患者用户看到的界面 聊天界面       获取App Key 首先进入融云官网,找到Web SDK开发指南,按照提示先注册一个账号,拿到AppKe

融云参加RTC实时互联网大会 现场集成IM SDK

9月21至22日,由全球实时云服务商声网Agora.io主办的RTC2017实时互联网大会在北京万豪酒店成功举办.作为亚洲最权威的RTC实时通信行业技术盛会,会议吸引了来自全球上千名开发者参加,Google.Slack.阿里巴巴.猎豹移动.荔枝FM等公司的技术大咖分享了各自在实时通信领域的技术.应用与经验.融云作为声网紧密合作的伙伴受邀参会,出席全球首个实时互联网生态圈Agora Plus启动仪式,并在Coding Workshop的环节中,助力开发者现场实现App即时通讯能力. 成为全球首个实

thinkphp整合系列之融云即时通讯在线聊天

随着技术的发展:现代的网站:越来越趋于应用形式了: 不再是像以前那样需要用户刷新页面:获取数据了: 服务器端可以主动向用户推送数据:更加及时性了: 比较突出的就是即时通讯在线聊天: 今个:我们要打造的就是类似于网页版微信的功能: 示例项目:http://git.oschina.net/shuaibai123/thinkphp-bjyadmin 一:注册融云账号 如果我们不是以即时通讯为主营业务:那么建议使用第三方的服务:这里以融云为例: 官网:http://www.rongcloud.cn/ 注

Asp.Net WebApi+融云即时通讯+Android构建自己的移动IM

IM,让我敬畏的一项技术 在我的观点里,即时通信,p2p,音视频传输是程序开发中很有难度的领域,这也是为什么我们很少看到有程序员可以在自己的应用里实现这些技术,尤其是即时通信,要实现高稳定性,高并发性,及时性,低流量和弹无虚发,需要丰富的开发经验做支撑,仅仅是拿来一个开源项目恐怕是难以完成这项任务的.放眼看看国内有即时通信技术的,无一不是大公司.大部分的程序开发者的大部分工作时间都是用来做业务层面的开发,根本没有时间和精力去潜心研究一整套的技术框架,因为公司要盈利,要挣钱,没那么多闲钱养着你去专

融云技术分享:解密融云IM产品的聊天消息ID生成策略

本文来自融云技术团队原创分享,原文发布于“融云全球互联网通信云”公众号,原题<如何实现分布式场景下唯一 ID 生成?>,即时通讯网收录时有部分改动. 1.引言 对于IM应用来说,消息ID(或称序列号)是个看似不起眼,但非常重要的东西之一. 消息ID的使用贯穿了IM技术逻辑的方方面面,比如: 1)聊天消息的顺序保证: 2)聊天消息QoS送达保证机制时的去重: 3)特定聊天消息的精确查找和匹配: 4)聊天消息的已读未读处理: 5)聊天消息的送达回执: 6)群聊消息的扩散读拉取标记: 7)... .

iOS开发融云即时通讯集成详细步骤

1.融云即时通讯iOS SDK下载地址   http://rongcloud.cn/downloads  选择iOS   SDK下载 2.进行应用开发之前,需要先在融云开发者平台创建应用,如果您已经注册了融云开发者帐号,请前往 融云开发者平台 创建应用:如果您还没有注册融云开发者帐号,请前往 融云官方网站 首先注册开发者帐号,注册后创建应用.注册地址  https://developer.rongcloud.cn/signup 3.登陆融云开发者平台 https://developer.rong

IOS集成融云SDK即时通讯

相信大家在项目中会用到即时通讯功能,自己去写的话会需要前后台合作,会大大加大开发的周期,所以考虑使用第三方的即时通讯平台,比如现在有融云,环信....等等等!楼主在项目开发过程中使用到过环信和融云,今天就为大家写下IOS端集成环信的方法和可能会遇到的问题.(融云提供聊天会话列表和聊天界面并且允许我们自定义,所以很方便的). 一:准备工作        1.首先打开融云官网http://www.rongcloud.cn/,注册自己的账户,并登陆.        2.点击左边创建应用,在打开的小窗口

apicloud+融云实现即时通讯

请尊重作者的辛勤劳动!!! 使用apicloud开发已经快2个月了,起初的目的就是为了实现安卓和苹果的兼容,属于一个试验项目,究竟apicloud是否能够满足公司的要求?最 终看来还是不错的,使用apicloud+融云实现了类似微信即时通讯的功能.看到有很多后来的人依然在这块挣扎,我就把自己的实现思路和成果分享出来和 大家一起交流一下,我也是第一次做手机开发,有很多经验不足的地方,希望大家能够直接指出来,我也不断完善自己的产品.     这次没有使用本地数据库,所有数据都是从融云和服务器获取,会

融云即时通讯~~

iOS开发融云即时通讯集成详细步骤 端身正义 发表于 2016-04-12 16:12:11 1.融云即时通讯iOS SDK下载地址   http://rongcloud.cn/downloads  选择iOS   SDK下载 2.进行应用开发之前,需要先在融云开发者平台创建应用,如果您已经注册了融云开发者帐号,请前往 融云开发者平台 创建应用:如果您还没有注册融云开发者帐号,请前往 融云官方网站 首先注册开发者帐号,注册后创建应用.注册地址  https://developer.rongclo