小程序（H5）接入腾讯IM

发表于 分类于

前言

腾讯IM是腾讯推出的即时通讯SDK，能在多端进行接入，用于聊天这类应用场景。

小程序接入腾讯IM

相关准备

  1. 小程序需要事先添加一个request 合法域名：https://webim.tim.qq.com；因为SDK依赖这个域名的接口进行消息监听等操作。

  2. 在小程序项目中安装完tim-js-sdk这个包之后，还需要在开发者工具中进行构建npm操作：

    img

  3. 业务需要提供SDKAppID（IM应用ID），userSig（用户密钥），userID（用户id）以及groupID（群组id）；

接入步骤

这里以小程序的IM群组消息接收业务场景为例；H5的接入步骤类似，因为API一致，只不过SDK的包名有所不同。

  1. 引入SDK；

    1
    import TIM from 'tim-wx-sdk'

  2. 根据接口获取IM初始化所需的配置（包括SDKAppID和userSig）并初始化；

    1
    2
    3
    4
    5
    const config = await api.getIMConfig() // 获取IM配置
    const tim = TIM.create({
      SDKAppID: config.appId // 应用id
    }) // 创建实例
    tim.setLogLevel(1) // sdk日志输出级别, 0则开启全部；根据需要配置

  3. 注册监听事件，如SDK加载完成和消息接收等事件；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    tim.on(TIM.EVENT.SDK_READY, e => { // SDK 进入 ready 状态时触发
      console.log('ready', e)
      // 一些SDK的API必须在ready事件触发后才能执行！
    })

    tim.on(TIM.EVENT.MESSAGE_RECEIVED, e => { // SDK 收到推送的单聊、群聊、群提示、群系统通知的新消息，可通过遍历 event.data 获取消息列表数据并渲染到页面
      console.log('received', e)
      if (Array.isArray(e.data)) {
        e.data.forEach(item => {
          parseMessage(item) // 解析IM消息
        })
      }
    })

  4. 登录IM账号；

  5. 登录成功后加入到对应群组；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    tim.login({ // 登录到IM
      userID: userID,
      userSig: userSig
    }).then(res => {
      console.log('login', res)
      return tim.joinGroup({ // 加入到对应的群组
        groupID: groupID, // 群组id
        applyMessage: 'wechat',
        type: TIM.TYPES.GRP_AVCHATROOM // 群组类型：音视频聊天，根据业务需求选择
      })
    }).then(res => {
      console.log('group', res)
    })

    群组类型以下几种：

    • TIM.TYPES.GRP_PUBLIC（公开群）
    • TIM.TYPES.GRP_CHATROOM （聊天室）
    • TIM.TYPES.GRP_AVCHATROOM （音视频聊天室）

  6. 解析消息：IM返回消息有系统消息和自定义消息两种，这个根据实际业务定制的消息结构进行解析即可。

发送消息需要引入另一个包cos-wx-sdk-v5，其他SDK的功能可以查看这个文档：https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/SDK.html

相关文档