小程序集成腾讯即时通讯、聊天

@高效码农  March 5, 2020
写在前面:本文是为快速验证在小程序中验证阿里云视频直播间集成腾讯即时通讯IM功能;没有美观的界面。

一、新建小程序项目

请自行百度~~~

二、引入SDK:

SDK下载地址:https://github.com/tencentyun/TIMSDK/tree/master/WXMini/sdk

在代码中引入:

import TIM from '../../utils/tim-wx.js';

let options = {
  SDKAppID: 0 // 接入时需要将0替换为您的即时通信应用的 SDKAppID
};
// 创建 SDK 实例,TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
let tim = TIM.create(options); // SDK 实例通常用 tim 表示
tim.setLogLevel(0);

三、业务逻辑:

1、注册监听:

tim.setLogLevel(0);
tim.on(TIM.EVENT.MESSAGE_RECEIVED, function (event) {
  // 收到推送的单聊、群聊、群提示、群系统通知的新消息,可通过遍历 event.data 获取消息列表数据并渲染到页面
  // event.name - TIM.EVENT.MESSAGE_RECEIVED
  // event.data - 存储 Message 对象的数组 - [Message]
  console.log(event.name)
});

2、登录:

tim.login({
  userID:  '',
  userSig: '' //通过服务端获得
}).then((imResponse) => {
  console.log(imResponse.data); // 登录成功
  app.globalData.isImLogin = true
}).catch((imError) => {
  console.warn('login error:', imError); // 登录失败的相关信息
})

3、加入群组(个人消息比较简单请看文档;而且群消息的监听有坑):

let promise3 = tim.joinGroup({ groupID: 'groupID', type: TIM.TYPES.GRP_AVCHATROOM });
promise3.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); // 申请加群失败的相关信息
});

4、发送群消息:


    console.log("=============")
    // 发送文本消息,Web 端与小程序端相同
    // 1. 创建消息实例,接口返回的实例可以上屏
    let message = tim.createTextMessage({
      to: '', // 个人ID或者群组ID
      conversationType: TIM.TYPES.CONV_GROUP, // 注意类型
      payload: {
        text: 'Hello 9999!'
      }
    });
    // 2. 发送消息
    let promise = tim.sendMessage(message);
    promise.then(function (imResponse) {
      // 发送成功
      console.log(imResponse);
    }).catch(function (imError) {
      // 发送失败
      console.warn('sendMessage error:', imError);
    });

  }

四、集成腾讯即时通讯的问题:

1、调用 sendMessage 发消息成功后,未收到 TIM.EVENT.MESSAGE_RECEIVED 事件?

解决:sendMessage 接口返回 Promise,接入侧请通过 Promise.then 或 Promise.catch
处理发送消息成功或失败后的业务逻辑。 此时 SDK 不会派发 TIM.EVENT.MESSAGE_RECEIVED 事件,避免消息重复
意思就是你发的消息不会触发MESSAGE_RECEIVED 事件,需要通过Promise.then 或 Promise.catch处理发送消息成功或失败后的业务逻辑

2、调用 createGroup 接口创建音视频聊天室后,收不到消息?

调用 createGroup 接口创建音视频聊天室后,需调用 joinGroup 接口加入群组(必须带上类型
TIM.TYPES.GRP_AVCHATROOM),才能进行消息收发流程。
let promise = tim.joinGroup({ groupID: 'group1', type: TIM.TYPES.GRP_AVCHATROOM });
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); // 申请加群失败的相关信息
});

更多常见问题请参考:https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/tutorial-01-faq.html



评论已关闭

  1. 史莱克

    文章很棒,做即时通讯也可以试试【GoEasy】这个框架,官网文档详细还提供了各种demo,大大降低了开发难度

  2. 史宗凯

    群组消息接收会有部分用户接收不到 不是每次都接收不到 比如连续发两次群组消息 第一次这个用户没接收到 但是第二次接收到了 就是消息发送频繁的时候会有部分用户丢失接收到推送的消息 不知道im的消息机制是怎么样的 期待大佬能帮助解决疑惑 万分感谢