腾讯云 Web 实现直播群功能

步骤1，创建即时通信 IM 应用
1）登录 即时通信 IM 控制台，单击 创建新应用 将弹出对话框。

2），输入您的应用名称，单击 确认 即可完成创建

3），可在 即时通信 IM 控制台 总览页面查看新建应用的状态、业务版本、SDKAppID、创建时间以及到期时间。请记录 SDKAppID 信息
步骤2，创建 AVChatRoom
您可以通过控制台创建群组，也可以通过调用 创建群组 API 创建群组。本文以通过控制台创建为例。

1）登录 即时通信 IM 控制台，单击目标应用卡片。
2）在左侧导航栏选择群组管理，单击添加群组。
3）输入群名称，选填群主 ID，选择群类型为直播群。
4）单击确定，待群组创建成功后，记录其群ID（本文以@TGS#aC72FIKG3为例）
步骤3，集成 SDK
1）Web 项目

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

2）小程序项目

// 微信小程序项目
npm install tim-wx-sdk --save-dev

说明：
若同步依赖过程中出现问题，请切换 npm 源后再次重试。

// 切换 cnpm 源
npm config set registry http://r.cnpmjs.org/

步骤4：创建 SDK 实例

// 创建 SDK 实例，TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
let options = {
  SDKAppID: 0 // 接入时需要将0替换为您的即时通信应用的 SDKAppID
}
let tim = TIM.create(options) // SDK 实例通常用 tim 表示
// 设置 SDK 日志输出级别，详细分级请参考 setLogLevel 接口的说明
tim.setLogLevel(0) // 普通级别，日志量较多，接入时建议使用

tim.on(TIM.EVENT.SDK_READY, function (event) {
  // SDK ready 后接入侧才可以调用 sendMessage 等需要鉴权的接口，否则会提示失败！
  // event.name - TIM.EVENT.SDK_READY
})

tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event) {
  // 收到推送的单聊、群聊、群提示、群系统通知的新消息，可通过遍历 event.data 获取消息列表数据并渲染到页面
  // event.name - TIM.EVENT.MESSAGE_RECEIVED
  // event.data - 存储 Message 对象的数组 - [Message]
  const length = event.data.length
  let message
  for (let i = 0; i < length; i++) {
    // Message 实例的详细数据结构请参考 Message
    // 其中 type 和 payload 属性需要重点关注
    // 从v2.6.0起，AVChatRoom 内的群聊消息，进群退群等群提示消息，增加了 nick（昵称） 和 avatar（头像URL） 属性，便于接入侧做体验更好的展示
    // 前提您需要先调用 updateMyProfile 设置自己的 nick（昵称） 和 avatar（头像 URL），请参考 updateMyProfile 接口的说明
    message = event.data[i]
    switch (message.type) {
      case TIM.TYPES.MSG_TEXT:
        // 收到了文本消息
        this._handleTextMsg(message)
        break
      case TIM.TYPES.MSG_CUSTOM:
        // 收到了自定义消息
        this._handleCustomMsg(message)
        break
      case TIM.TYPES.MSG_GRP_TIP:
        // 收到了群提示消息，如成员进群、群成员退群
        this._handleGroupTip(message) 
        break
      case TIM.TYPES.MSG_GRP_SYS_NOTICE:
        // 收到了群系统通知，通过 REST API 在群组中发送的系统通知请参考 在群组中发送系统通知 API
        this._handleGroupSystemNotice(message)
        break
      default:
         break
    }
  }
})

_handleTextMsg(message) {
  // 详细数据结构请参考 TextPayload 接口的说明
  console.log(message.payload.text) // 文本消息内容
}

_handleCustomMsg(message) {
  // 详细数据结构请参考 CustomPayload 接口的说明
  console.log(message.payload)
}

_handleGroupTip(message) {
  // 详细数据结构请参考 GroupTipPayload 接口的说明
  switch (message.payload.operationType) {
    case TIM.TYPES.GRP_TIP_MBR_JOIN: // 有成员加群
      break
    case TIM.TYPES.GRP_TIP_MBR_QUIT: // 有群成员退群
      break
    case TIM.TYPES.GRP_TIP_MBR_KICKED_OUT: // 有群成员被踢出群
      break
    case TIM.TYPES.GRP_TIP_MBR_SET_ADMIN: // 有群成员被设为管理员
      break
    case TIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN: // 有群成员被撤销管理员
      break
    case TIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED: // 群组资料变更
      //从v2.6.0起支持群组自定义字段变更内容
      // message.payload.newGroupProfile.groupCustomField 
      break
    case TIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED: // 群成员资料变更，例如群成员被禁言
      break
    default:
      break
  }
}

_handleGroupSystemNotice(message) {
  // 详细数据结构请参考  GroupSystemNoticePayload 接口的说明
  console.log(message.payload.userDefinedField) // 用户自定义字段。使用 RESTAPI 发送群系统通知时，可在该属性值中拿到自定义通知的内容。
  // 用 REST API 发送群系统通知请参考 在群组中发送系统通知 API
}

步骤5：登录 SDK

let promise = tim.login({userID: 'your userID', userSig: 'your userSig'});
promise.then(function(imResponse) {
  console.log(imResponse.data); // 登录成功
}).catch(function(imError) {
  console.warn('login error:', imError); // 登录失败的相关信息
});

步骤6：设置自己的昵称和头像

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

// 从v2.6.0起，AVChatRoom 内的群聊消息，进群退群等群提示消息，增加了 nick（昵称） 和 avatar（头像URL） 属性，便于接入侧做体验更好的展示，前提您需要先调用 updateMyProfile 设置个人资料。
// 修改个人标配资料
let promise = tim.updateMyProfile({
  nick: '我的昵称',
  avatar: 'http(s)://url/to/image.jpg'
});
promise.then(function(imResponse) {
  console.log(imResponse.data); // 更新资料成功
}).catch(function(imError) {
  console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
});

步骤7：加入群组

// 匿名用户加入（无需登录，入群后仅能接收消息）
let promise = tim.joinGroup({ groupID: 'avchatroom_groupID'});
promise.then(function(imResponse) {
  switch (imResponse.data.status) {
    case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
      break
    case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
      console.log(imResponse.data.group) // 加入的群组资料
      break
    case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
      break
    default:
      break
  }
}).catch(function(imError){
  console.warn('joinGroup error:', imError) // 申请加群失败的相关信息
});

步骤8：创建消息实例并发送

// 发送文本消息，Web 端与小程序端相同
// 1. 创建消息实例，接口返回的实例可以上屏
let message = tim.createTextMessage({
  to: 'avchatroom_groupID',
  conversationType: TIM.TYPES.CONV_GROUP,
  // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考 消息优先级与频率控制
  // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
  priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
  payload: {
    text: 'Hello world!'
  }
})
// 2. 发送消息
let promise = tim.sendMessage(message)
promise.then(function(imResponse) {
  // 发送成功
  console.log(imResponse)
}).catch(function(imError) {
  // 发送失败
  console.warn('sendMessage error:', imError)
})