本文介绍互动JSSDK的支持系统、集成方式以及部分功能的使用。

浏览器环境要求

JSSDK对浏览器环境有一定的兼容性要求,主要依赖是对websocket的兼容性要求。兼容性参考表如下:

主流浏览器 最低版本要求
Chrome 4~88+
Firefox 11~85+
IE 10+
Edge 12~88+
Opera 12.1~72+
Safari 5~13.1+
Android Browser 89
Safari for iOS 4.2~13.7+

更多兼容性,请参见caniuse

引入SDK

  1. 以script标签引入CDN文件,在URL中指定版本。
    <script src="//g.alicdn.com/code/npm/@ali/dlive-interaction-sdk/0.0.1/DLiveInteraction.web.min.js"></script>
    const {
      constants,
      ISettingOptions,
      IPaasToken,
      EventNameEnum,
      ConnectionStatus,
      interactionSdk,
      BasicMap,
      LocalLogType
    } = window.DLiveInteraction
  2. 下载SDK,以ES Module方式引入。
    import { DLiveInteraction } from './DLiveInteraction.web.min.js'
    const {
      constants,
      ISettingOptions,
      IPaasToken,
      EventNameEnum,
      ConnectionStatus,
      interactionSdk,
      BasicMap,
      LocalLogType
    } = DLiveInteraction

公共部分工程接入

登录认证。

const Setting = { /* content */ }

interactionSdk.getSettingService().set(Setting);

interactionSdk.getAuthService().login();
其中Setting内容如下:
  interface Setting {
    environment: 0, // 环境
    wsUrl: string; // websocket url
    appKey: string; // 应用key IM_PAAS分配给应用的key
    mediaHost: string; // 多媒体上传服务器地址
    deviceId: string; // 设备唯一id
    appName?: string; // app_name 应用名称
    appVersion?: string; // 应用版本号
    appLocale?: string; // App 语言区域(默认zh_CN)
    osName?: string; // 操作系统名称,如Win、macOS、iOS、Android等
    osVersion?: string; // 操作系统版本
    deviceName?: string; // 设备名称
    deviceType?: string; // 设备型号
    deviceLocale?: string; // 设备语言(默认zh_CN)
    timeZone?: string; // time_zone 时区(默认Asia/Shanghai)
    subscribeServerPush?: string // subscribe-server-push header
    log: ILogConfig; // log回调
    authTokenCallback(): Promise<Token>; // on_callback 获取登录token的回调函数(注意需要做成异步操作,不能有阻塞)
  };

  interface ILogConfig {
    info(...args: any[]): void;
    error(...args: any[]): void;
  }

服务部分工程接入

服务部分包括互动API服务和事件服务。

互动API服务

使用interactionSdk.getInteractionService()获取互动API服务实例。

说明 在JSSDK层面,各个实例是单例的。
  • 进入房间。
      interactionSdk
        .getInteractionService()
        .enterRoom({
          roomId: 'roomId',
          nick: 'nickname'
        }).then(res => {
          if (res.success) console.log('进入房间成功')
          else throw new Error('res error')
        }).catch(err => {
          console.error(err, '进入房间失败')
        })
  • 查询房间详情。
      interactionSdk
        .getInteractionService()
        .getRoomDetail({
          roomId: 'roomId'
        }).then((res) => {
          if (res.roomDetailVO) console.log('查询房间信息成功')
          else throw new Error('res error')
        }).catch(err => {
          console.error(err, '查询房间信息失败')
        })
  • 发布房间公告。
     interactionSdk
       .getInteractionService()
       .publishRoomNotice({
         roomId: 'roomId',
         notice: '房间公告'
       }).then((res) => {
         if (res.success) console.log('公告设置成功')
         else throw new Error('res error')
       }).catch(err => {
         console.error(err, '公告设置失败')
       })
  • 离开房间。
     interactionSdk
       .getInteractionService()
       .leaveRoom({
         roomId: 'roomId'
       }).then((res) => {
         if (res.success) console.log('离开房间成功')
         else throw new Error('res error')
       }).catch(err => {
         console.error(err, '离开房间失败')
       })
  • 点赞。
     interactionSdk
       .getInteractionService()
       .sendLikesMsg({
         roomId: 'roomId',
         count: 1 // 允许几秒内发送一次弹幕
       }).then((res) => {
         if (res.interval || res.interval === 0) console.log('点赞成功')
         else throw new Error('res error')
       }).catch(err => {
         console.error(err, '点赞失败')
       })
  • 发文本消息。
     interactionSdk
       .getInteractionService()
       .sendCommentMsg({
         roomId: 'roomId',
         content: '消息内容',
         type: 1, // 弹幕的类型,比如普通弹幕、超级弹幕,由调用方决定,服务端透传
         extension: {}
       }).then((res) => {
         if (res.commentId) console.log('消息发送成功')
         else throw new Error('res error')
       }).catch(err => {
         console.error(err, '消息发送失败')
       })
  • 发自定义消息。
     interactionSdk
       .getInteractionService()
       .sendCustomMsg({
         roomId: 'roomId',
         subType: 100001,
         body: '消息内容', // 消息子类型,业务方决定
         receivers: [], // 接受者,如果不传默认给房间内全部在线用户广播
         priority: 0 // 自定义消息的优先级, 目前只支持高中低三个, 对应100:高, 0:中, -100低, 不传默认为0, 即中优先级
       }).then((res) => {
         if (res.messageId) console.log('发送消息成功')
         else throw new Error('res error')
       }).catch(err => {
         console.error(err, '发送消息失败')
       })
  • 查询消息。
     interactionSdk
       .getInteractionService()
       .getRoomDetail({
         roomId: 'roomId'
       }).then((res) => {
         if (res.messages) {
           console.log('查询消息成功')
           res.messages.forEach(item => {
             // 部分信息
             console.log(`id: ${item.commentId}, nick: ${item.nick}, content: ${item.content}`)
           })
         } else throw new Error('res error')
       }).catch(err => {
         console.error(err, '查询消息失败')
       })
事件服务

使用interactionSdk.getEventService()获取事件实例。

  • 注册监听事件。
    interactionSdk.getEventService().register((eventName, data) => {
      /* do something */
    })
  • 事件列表。
    enum EventNameEnum {
      PaaSConnectionChanged = 'paas.connection.changed', // 登录状态
      PaaSLiveRoomEnter = 'paas.live.room.enter', // 进入房间状态
      PaaSLiveRoomOlineCount = 'paas.live.room.onlinecount', // 在线人数变更
      PaaSLiveRoomNotice = 'paas.live.room.notice', // 设置公告
      PaaSLiveRoomComment = 'paas.live.room.comment', // 发布消息
      PaaSLiveRoomLike = 'paas.live.room.like', // 收到点赞
      PaaSLiveRoomCustomMessage = 'paas.live.room.customMessage', // 发布自定义消息
    }
  • 事件解绑。
    interactionSdk.getEventService().unRegister()