小程序接入腾讯IM即时通讯

标签：console TUIKit 群组 imResponse 即时通讯 TIM IM 腾讯 wx

最近终于回想起这个账号了因为 繁琐的事情太多了和家里的事情，现在更新下

小程序连接腾讯IM即时通讯，在项目里面遇到写的

官网貌似是mpvue的

下面是几个官网文档

TIM即时通讯。文档地址：https://cloud.tencent.com/document/product/269/36887

常规TIM集成文档：https://cloud.tencent.com/document/product/269/37412

最佳实践文档：https://cloud.tencent.com/document/product/269/43002

可以去官网GitHub 去下载 到本地文件或者

// IM Web SDK
npm install tim-js-sdk --save
// 发送图片、文件等消息需要的 COS SDK
npm install cos-js-sdk-v5 --save

放在libs 下

生成IM签名

然后在这 唯一的 GenerateTestUserSig 签名

/*eslint-disable*/
/*
 * Module:   GenerateTestUserSig
 *
 * Function: 用于生成测试用的 UserSig，UserSig 是腾讯云为其云服务设计的一种安全保护签名。
 *           其计算方法是对 SDKAppID、UserID 和 EXPIRETIME 进行加密，加密算法为 HMAC-SHA256。
 *
 * Attention: 请不要将如下代码发布到您的线上正式版本的 App 中，原因如下：
 *
 *            本文件中的代码虽然能够正确计算出 UserSig，但仅适合快速调通 SDK 的基本功能，不适合线上产品，
 *            这是因为客户端代码中的 SECRETKEY 很容易被反编译逆向破解，尤其是 Web 端的代码被破解的难度几乎为零。
 *            一旦您的密钥泄露，攻击者就可以计算出正确的 UserSig 来盗用您的腾讯云流量。
 *
 *            正确的做法是将 UserSig 的计算代码和加密密钥放在您的业务服务器上，然后由 App 按需向您的服务器获取实时算出的 UserSig。
 *            由于破解服务器的成本要高于破解客户端 App，所以服务器计算的方案能够更好地保护您的加密密钥。
 *
 * Reference：https://cloud.tencent.com/document/product/647/17275#Server
 */
function genTestUserSig(userID,sdkAppId, Secretkey) {
  /**
   * 腾讯云 SDKAppId，需要替换为您自己账号下的 SDKAppId。
   *
   * 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到 SDKAppId，
   * 它是腾讯云用于区分客户的唯一标识。
   */
  var SDKAPPID = sdkAppId? Number(sdkAppId) : 必须为数字;

  /**
   * 签名过期时间，建议不要设置的过短
   * <p>
   * 时间单位：秒
   * 默认时间：7 x 24 x 60 x 60 = 604800 = 7 天
   */
  var EXPIRETIME = 604800;

  /**
   * 计算签名用的加密密钥，获取步骤如下：
   *
   * step1. 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav )，如果还没有应用就创建一个，
   * step2. 单击“应用配置”进入基础配置页面，并进一步找到“帐号体系集成”部分。
   * step3. 点击“查看密钥”按钮，就可以看到计算 UserSig 使用的加密的密钥了，请将其拷贝并复制到如下的变量中
   *
   * 注意：该方案仅适用于调试Demo，正式上线前请将 UserSig 计算代码和密钥迁移到您的后台服务器上，以避免加密密钥泄露导致的流量盗用。
   * 文档：https://cloud.tencent.com/document/product/647/17275#Server
   */
  var SECRETKEY = Secretkey
  ? Secretkey
  : "xxxxxxx";

  var generator = new window.LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
  var userSig = generator.genTestUserSig(userID);
  return {
    SDKAppID: SDKAPPID,
    userSig: userSig
  };
}
export default {
  genTestUserSig //获取签名
}

然后引入在app.js 文件下引入

import { SDKAPPID, genTestUserSig } from 'libs/GenerateTestUserSig'


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

    this.globalData.tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用

    const userInfo = wx.getStorageSync('userInfo');
    that.globalData.token = wx.getStorageSync('token');
    that.globalData.userInfo = userInfo;
    wx.$userInfo = userInfo || {};
    wx.$TUIKitTIM = TIM
    wx.$TUIKitEvent = TIM.EVENT
    wx.$TUIKitVersion = TIM.VERSION
    wx.$TUIKitTypes = TIM.TYPES

这里可以绑定一些事件（例如）：

事件列表文档：https://cloud.tencent.com/document/product/269/37416

   // 监听系统级事件
    wx.$TUIKit.on(wx.$TUIKitEvent.SDK_NOT_READY, this.onSdkNotReady)
    wx.$TUIKit.on(wx.$TUIKitEvent.KICKED_OUT, this.onKickedOut)
    wx.$TUIKit.on(wx.$TUIKitEvent.ERROR, this.onTIMError)
    wx.$TUIKit.on(wx.$TUIKitEvent.NET_STATE_CHANGE, this.onNetStateChange)
    wx.$TUIKit.on(wx.$TUIKitEvent.SDK_RELOAD, this.onSDKReload)
    wx.$TUIKit.on(wx.$TUIKitEvent.SDK_READY, this.onSDKReady)

因为我前面定义了

wx.$TUIKit 为全局的变量

登陆

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

退出

let promise = wx.$TUIKit.logout();
promise.then(function(imResponse) {
  console.log(imResponse.data); // 登出成功
}).catch(function(imError) {
  console.warn('logout error:', imError);
});

发送消息

（这里是给摸一个人发送消息，但是一般项是在某个群组发送消息，这里举个例子）

sendTextMessage(){//tim发送消息
      var self=this;
      if(!self.messageContent){
        tools.msgErr("请输入将要发送的消息");
        return;
      }
      const message =  wx.$TUIKit.createTextMessage({
        to: "user1",
        conversationType: TIM.TYPES.CONV_C2C,
        payload: { text: self.messageContent }
      })
      self.tim.sendMessage(message)
      .then((imResponse)=>{
        // 发送成功
        console.log(imResponse);
      })
      .catch((imError)=>{
        // 发送失败
        console.warn('sendMessage error:', imError);
      })
    }

加入群组（需要在腾讯控制台创建群组，然后就有了群组id）

加入群组需要在登录成功回调再加入

// 加入群组
        wx.$TUIKit.joinGroup({ groupID:"群组id"}).then(function(imResponse) {
          console.log("===================加入群组成功============")
          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.log("===================加入群组失败============")
          console.warn('joinGroup error:', imError) // 申请加群失败的相关信息
        });

监听消息

然后在自页面里面去监听IM的消息

onMessageReceived 这个事件 

监听事件可以有多个 比如 送礼 上麦 提出房间什么等等 

然后在针对页面作出相应的处理就好

最后终于好了，调试一下

 

 

标签：console,TUIKit,群组,imResponse,即时通讯,TIM,IM,腾讯,wx
From： https://www.cnblogs.com/yf-html/p/16772605.html