专栏首页跟铭哥学音视频技术IM即时通信探索(三)-- 实现一个简单的直播聊天室
原创

IM即时通信探索(三)-- 实现一个简单的直播聊天室

今天我们用IM来简单的实现一个直播聊天室场景。不过在这之前呢,我们还需要先来熟悉一下IM直播功能的一些特性。本文以web端进行代码讲解,与其它端可能会有些差异,大家可以只关注操作流程即可,因为流程基本都差不多的。

直播聊天室是IM群组类型其中一个,也叫AVChatRoom。

IM直播功能特点

  • 适用于无人数上限的互动直播场景
  • 支持针对涉黄、涉政以及不雅词的安全打击,满足安全监管需求
  • 支持向全体在线用户推送消息(群系统通知)。
  • Web 和微信小程序端支持以游客身份(即不登录)接收消息。
  • 申请加群后,无需管理员审批,直接加入。

tips:如果使用IM产品进行开发,线上一定要开启安全打击,不然很容易被不法分子用违规内容发布在项目上,导致项目被封

在控制台可以设置

适用场景

直播弹幕

AVChatRoom 支持弹幕、 送礼和点赞等多消息类型,轻松打造良好的直播聊天互动体验;提供弹幕内容审核能力,保证您的直播免受不雅信息干扰。

网红带货

AVChatRoom 与商业直播相结合,通过提供点赞、询价、购物券等特定消息类型,帮助直播客户实现流量变现。

教学白板

AVChatRoom 可提供在线课堂、文本消息、画笔轨迹等能力,轻松实现教师学生沟通、画笔轨迹保存、大班课与小班课教学等教学场景。

使用限制

  • 不支持 撤回消息
  • 群主不可以退群,群主退群只能通过解散群组的方式。
  • 不支持移除群成员。

创建步骤

1.创建应用

已有应用的可以跳过,记录一下SDKAppID和秘钥即可。

  1. 登录即时通信 IM 控制台
  2. 单击【+添加新应用】。
  3. 在【创建应用】对话框中输入您的应用名称,单击【确定】。创建完成后,可在控制台总览页查看新建应用的状态、业务版本、SDKAppID、创建时间以及到期时间。
  4. 记录该应用的 SDKAppID 信息。

2.创建 AVChatRoom

您可以通过控制台创建群组,也可以通过调用创建群组 API创建群组或者SDK创建。本文以通过控制台创建为例。

如果是用sdk创建,一定要先登录才可以进行(下文会讲如何登录)

SDK代码创建群组

控制台创建步骤如下:

  1. 登录 即时通信 IM 控制台,单击目标应用卡片。
  2. 在左侧导航栏选择【群组管理】,单击【添加群组】。
  3. 输入群名称,选填群主 ID,选择【群类型】为【直播群】。
  4. 单击【确定】,待群组创建成功后,记录其【群ID】。

3.集成 SDK

可以通过 NPM 或 Script 集成 SDK,推荐使用 NPM 集成。本文以使用 NPM 集成为例。

// Web 项目
npm install tim-js-sdk --save-dev

4.创建 SDK 实例

我们只需要能正确接收其他人发的消息就行了,所以我们在消息那里只监听文本消息的传入。可以在官方文档中查看更多的事件消息类型

this.tim = TIM.create({ SDKAppID: AppConfig.SDKAPPID });
this.tim.setLogLevel(0);

this.tim.on(TIM.EVENT.SDK_READY, evt => {
   console.log('TIM sdk 登录成功', evt);
})

//监听接收到消息
this.tim.on(TIM.EVENT.MESSAGE_RECEIVED, evt => {
   const msgList = evt.data;
   console.log('有消息加进来了');

   msgList.forEach(msg => {
       switch (msg.type) {
          case TIM.TYPES.MSG_TEXT:
             // 收到了文本消息
             this.handleTextMsg(msg)
             break
       }
   });
})

handleTextMsg(msg) {
   this.textMsgList.push(msg);
   this.textMsg = '';
   console.log('接收到了消息', this.textMsgList);
}

5.登录 SDK并设置自己的昵称和头像

2.6.2及以上版本 SDK,AVChatRoom 内的群聊消息和群提示消息(例如进群退群等),都增加了 nick(昵称) 和 avatar(头像URL) 属性,您可以调用接口updateMyProfile设置自己的 nick(昵称) 和 avatar(头像URL)。

try {
    let loginResp = await this.tim.login({
        userID: this.userId,
        userSig: new Generate(this.userId).getUserSig()
    })

    console.log('登录成功', loginResp);

    let updateProfileResp = await this.tim.updateMyProfile({
        nick: '新用户' + this.userId,
        avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    })

    console.log('更新信息成功', updateProfileResp)
} catch (err) {
    console.error('发生错误', err);
}

6.加入/创建群组

我使用的是SDK直接创建群组,大家可以自行设计场景。

tips:无论你是房间的创建者,还是创建房间的时候已经把你添加到成员中,你都需要通过调用joinGroup方法,进入房间,才能在房间中发布消息。

try {
    if (this.isManager) {
        await this.tim.createGroup({
            type: TIM.TYPES.GRP_AVCHATROOM,
            name: '直播群' + this.roomId,
            groupID: this.groupID,
            memberList: [{userID: this.userId}]
        })
        console.log('创建房间成功')
    }

    await this.tim.joinGroup({
        groupID: this.groupID
    })

    console.log('加入房间成功')
} catch (err) {
    console.log('加入/创建房间失败', err)
}

7.创建消息实例并发送

在直播环境下,我们就只发送文本消息就可以了。

async sendMsg() {
    let message = this.tim.createTextMessage({
        to: this.groupID,
        conversationType: TIM.TYPES.CONV_GROUP,  //会话类型为群组会话
        payload: {
            text: this.textMsg
        }
    })

    try {
        let sendResp = await this.tim.sendMessage(message);
        this.textMsgList.push(sendResp.data.message);
        console.log('消息发送成功', sendResp)
    } catch (err) {
        console.log('消息发送失败', err)
    }
}

8.效果预览

因为页面刷新过,并且我没有去调用获取前面聊天内容的方法,所以user_59749只看到了最新的两条。

user_607408
user_59749

总结

使用IM直播聊天室AVChatRoom基本可以实现直播聊天和弹幕功能了,虽然文中并没有展示弹幕效果,但其实就是把聊天室的内容转移到屏幕中即可。如果有人项目里面需要用到直播聊天室,我还是推荐使用一下IM即时通信。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • TRTC学习之旅(三)-- 使用vue+ts集成互动直播

    上次我们已经用vue+ts实现了多人会议室的搭建,这次我们继续在上次项目的基础上,实现互动直播功能。

    黑眼圈云豆
  • TRTC学习之旅(一)--多人聊天室web篇(官方demo)

    大家好,我是刚入坑TRTC的小菜鸡,黑圆圈云豆。因为我的主要技术方向是web,所以我就从基于web开发的TRTC demo进行学习和知识分享。

    黑眼圈云豆
  • TRTC学习之旅(二)-- 使用vue+ts集成TRTC实现多人会议室

    根据上回学习了官方TRTC demo之后,已经了解了一个基础的多人会议室创建的流程,接下来我需要将自己学到的转换为自己能够运用的。

    黑眼圈云豆
  • 如何用 vue 制作一个探探滑动组件

    前言 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组...

    程序员宝库
  • RocketMQ存储--主从同步【源码笔记】

    1.消息存储在Master上了,如何同步到Slave上了呢? 2.同步复制和异步复制流程是怎么样的?

    瓜农老梁
  • 基础篇章:关于 React Native 之 RefreshControl 组件的讲解

    (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 我们已经讲完了 ScrollView 和 L...

    非著名程序员
  • php 利用socket发送GET,POST请求的实例代码

      作为php程序员一定会接触http协议,也只有深入了解http协议,编程水平才会更进一步。最近我一直在学习php的关于http的编程,许多东西恍然大悟,受益...

    砸漏
  • CocosCreator之控制游戏速率实现倍速与慢动作

    在游戏开发中,游戏速率控制一直是一个需求,官方提供了计时器的控制接口以及动作系统的 cc.speed,但是使用起来不是很方便且无法影响到 update 控制逻辑...

    一枚小工
  • 8、backbone实例todos分析(二)view的应用

    在上一篇文章中我们把todos这个实例的数据模型进行了简单的分析, 有关于数据模型的操作也都知道了。接着我们来看剩下的两个view的模型,以及它们对页面的操作。

    the5fire
  • JavaScript中的this详解

    HTML5学堂:this属于JS的底层知识,了解this之后,能够实现一些基本的功能,但是感觉最重要的是,this是面向对象必不可少的组成部分,如果希望能够逐渐...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券