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

简介: 随着直播越来越火,所在公司也打算制作自己的直播,所以去了解了这方面,使用后发现还是有些问题需要记录的。 经过分析,制作直播应该是分为两块来做,即直播与实时评论。这里先去制作实时评论,等直播ok后,也会将相应心得写上来。

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

经过分析,制作直播应该是分为两块来做,即直播与实时评论。这里先去制作实时评论,等直播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.其他

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

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

http://www.cnblogs.com/bbbiu/p/6871994.html

 

相关文章
|
8月前
|
前端开发 JavaScript API
阿里云智能媒体服务IMS(Intelligent Media Services)的视频剪辑Web SDK
【1月更文挑战第15天】【1月更文挑战第72篇】阿里云智能媒体服务IMS(Intelligent Media Services)的视频剪辑Web SDK
195 6
|
12天前
|
缓存 安全 搜索推荐
阿里云先知安全沙龙(北京站) ——浅谈Web快速打点
信息收集是网络安全中的重要环节,常用工具如Hunter、Fofa和扫描工具可帮助全面了解目标系统的网络结构与潜在漏洞。遇到默认Nginx或Tomcat 404页面时,可通过扫路径、域名模糊测试、搜索引擎缓存等手段获取更多信息。AllIN工具(GitHub: P1-Team/AllIN)能高效扫描网站路径,发现敏感信息。漏洞利用则需充分准备,以应对突发情况,确保快速拿下目标站点。 简介:信息收集与漏洞利用是网络安全的两大关键步骤。通过多种工具和技术手段,安全人员可以全面了解目标系统,发现潜在漏洞,并制定有效的防御和攻击策略。
|
4月前
|
缓存 Kubernetes Java
阿里云 SAE Web:百毫秒高弹性的实时事件中心的架构和挑战
SAE 事件中心通过智能诊断显示通知与用户连接起来,SAE WEB 百毫秒弹性实例给事件中心带来了新的实时性、海量数据和高吞吐的挑战,本篇将带您了解 SAE 整体事件中心的架构和挑战。
207 10
|
6月前
|
弹性计算 数据库 数据安全/隐私保护
阿里云服务器真香宝典之Calibre-Web个人图书馆云端部署
在阿里云ECS(2核2G,SSD40G,3M带宽)上,安装Ubuntu 22.04,然后配置Docker和FTP。创建 `/config` 和 `/books` 目录,设置权限,开放端口,拉取 `johngong/calibre-web` Docker镜像,以`calibre-web`命名容器,映射端口,配置环境变量,挂载卷,确保重启策略。本地安装Calibre客户端,上传metadata.db到服务器。在Calibre-web服务端配置数据库,启用上传权限,修改管理员账户信息。完成配置后,开始上传电子书并进行阅读。
537 2
阿里云服务器真香宝典之Calibre-Web个人图书馆云端部署
|
弹性计算 缓存 运维
【运维知识进阶篇】用阿里云部署kod可道云网盘(DNS解析+CDN缓存+Web应用防火墙+弹性伸缩)(三)
【运维知识进阶篇】用阿里云部署kod可道云网盘(DNS解析+CDN缓存+Web应用防火墙+弹性伸缩)(三)
237 0
|
7月前
|
监控 Serverless 持续交付
阿里云云效产品使用问题之如何让流水线支持构建 flutter web 应用到 OSS
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
6月前
|
安全 API 开发者
阿里云web应用
设备端将图片编码为base64发送至物联网平台,在web界面配置图片选择物联网平台配置的数据(base64),实现设备向云平台的图片的上传,以及在web界面上显示图片。
|
8月前
|
弹性计算 关系型数据库 MySQL
【阿里云弹性计算】从零搭建:基于阿里云ECS的高性能Web服务部署实践
【5月更文挑战第21天】本文介绍了如何使用阿里云ECS搭建高性能Web服务。首先,注册阿里云账号购买ECS实例,选择合适配置。接着,通过SSH连接实例,更新系统并安装Apache、PHP和MySQL。创建网站目录,上传代码,配置数据库和PHP。然后,启用Gzip压缩和KeepAlive,调整Apache并发连接数以优化性能。此教程为在阿里云上构建高效Web服务提供了基础指南。
194 5
|
8月前
|
云安全 数据采集 安全
阿里云安全产品,Web应用防火墙与云防火墙产品各自作用简介
阿里云提供两种关键安全产品:Web应用防火墙和云防火墙。Web应用防火墙专注网站安全,防护Web攻击、CC攻击和Bot防御,具备流量管理、大数据防御能力和简易部署。云防火墙是SaaS化的网络边界防护,管理南北向和东西向流量,提供访问控制、入侵防御和流量可视化。两者结合可实现全面的网络和应用安全。
阿里云安全产品,Web应用防火墙与云防火墙产品各自作用简介