Web对接腾讯IM 最友好的新手教程

Tips:作者是基于脚手架项目Vue，但是适用于任意脚手架项目流程

　　并且不需要后端完全脱离，可以通过用户ID进行关联腾讯IM

　　下面介绍详细流程（注意如果是小程序还是有一点区别，但是区别不大，看底部官方文档连接）

 

效果图(这个UI是自定义的有点丑我照着原型图画的勉强用)：

 

 

 

1.开发准备，去腾讯IM开通账号创建应用，获取下面两个参数

 * 腾讯云 SDKAppId，需要替换为您自己账号下的 SDKAppId。

 * appKey

 

2.前端本地生成 UserSig用于腾讯IM登录（这个一般后端提供参数，不需要的可以跳过这步）

Tips:UserSig 一般是调用后端接口返回参数用于前端登录IM进行更多操作，原因前端代码虽然能够正确计算出 UserSig，但仅适合快速调通 SDK 的基本功能，不适合线上产品，

　　这是因为客户端代码中的 SECRETKEY 很容易被反编译逆向破解，尤其是 Web 端的代码被破解的难度几乎为零，旦您的密钥泄露，攻击者就可以计算出正确的 UserSig 来盗用您的腾讯云流量

　　正确的做法是将 UserSig 的计算代码和加密密钥放在您的业务服务器上，然后由 App 按需向您的服务器获取实时算出的 UserSig，由于破解服务器的成本要高于破解客户端 App，

　　所以服务器计算的方案能够更好地保护您的加密密钥

 

1).创建config.js （注意填写下面的变量值）

// * 腾讯云 SDKAppId，需要替换为您自己账号下的 SDKAppId。
const SDKAPPID =　******
/**
   * 签名过期时间，建议不要设置的过短
   * <p>
   * 时间单位：秒
   * 默认时间：7 x 24 x 60 x 60 = 604800 = 7 天
   */
const EXPIRETIME = 604800
// appKey
const SECRETKEY = '**************************************'

export default {
    SDKAPPID,
    EXPIRETIME,
    SECRETKEY
}

 

2).创建GenerateTestUserSig.js 和 lib-generate-test-usersig.min.js 

 

lib-generate-test-usersig.min.js

由于这个是腾讯IM提供的一个js 代码特别多这里就不放具体代码了下面有链接直接点击去复制出来

https://github.com/tencentyun/TIMSDK/blob/master/Web/Demo/public/debug/lib-generate-test-usersig.min.js

 

GenerateTestUserSig.js

(提示：这个js官方也提供了 但是复制出来是错误的代码，反正我试了很久虽然解决了错误，但是依然有代码警告提示.

new window.LibGenerateTestUserSig 这个构造函数找不到，删除官方里的window就可以了，我是这样修改的，可以正常使用没有任何错误，

而且本地生成usersig,官方文档并没有说要使用到这个lib-generate-test-usersig.min.js库，就很坑，因为根据他提供的GenerateTestUserSig.js里面就必须依赖这个js库，

我也是找了好久才找到的。。。发现缺少这个东西)

https://github.com/tencentyun/TIMSDK/blob/master/Web/Demo/public/debug/GenerateTestUserSig.js

这个是官方提供的GenerateTestUserSig.js （建议忽略看看就好了,直接复制下面我已经改好的代码就可以了）

 

 

注意这里要引入 上面config.js中定义的常量 注意地址的正确 和lib-generate-test-usersig.min.js 两个js资源文件

const func = require('./lib-generate-test-usersig.min.js')
const LibGenerateTestUserSig = func.LibGenerateTestUserSig
import  config from './config.js'

function genTestUserSig(userID) {
  /**
   * 腾讯云 SDKAppId，需要替换为您自己账号下的 SDKAppId。
   *
   * 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到 SDKAppId，
   * 它是腾讯云用于区分客户的唯一标识。
   */
  var SDKAPPID = config.SDKAPPID;

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

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

  var generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
  var userSig = generator.genTestUserSig(userID);
  return {
    SDKAppID: SDKAPPID,
    userSig: userSig
  };
}

export default {
    genTestUserSig
}

 

3.页面使用初始化IM实列 并且完成登录

1.安装npm

// IM Web SDK
npm install tim-js-sdk --save
// 发送图片、文件等消息需要的上传插件
npm install tim-upload-plugin --save

 

2.页面调用 和登录

 

import config from './IM/config.js'
// IM Web SDK
import TIM from 'tim-js-sdk';
// 发送图片、文件等消息需要的上传插件
import TIMUploadPlugin from 'tim-upload-plugin';
import UserSig from './IM/GenerateTestUserSig.js'

const testUserID = '707d3df7d2a216b0c5562c35a01e6002' // 注意这个是用户ID 后端接口返回的提供的可以是其他id 只要是唯一性 不会变就可以


let options = {
  SDKAppID: config.SDKAPPID // 接入时需要将0替换为您的即时通信应用的 SDKAppID
};
let tim = TIM.create(options); // SDK 实例通常用 tim 表示
// 设置 SDK 日志输出级别，详细分级请参见 setLogLevel 接口的说明
tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
// tim.setLogLevel(1); // release级别，SDK 输出关键信息，生产环境时建议使用
 
// 注册腾讯云即时通信 IM 上传插件，即时通信 IM SDK 发送图片、语音、视频、文件等消息需要使用上传插件，将文件上传到腾讯云对象存储
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});

// 开始登录 这里是前端生成本地 userSig（一般调用后端接口返回　　）
let { userSig } = UserSig.genTestUserSig(testUserID);

let promise = tim.login({userID: testUserID, userSig: userSig});
promise.then(function(imResponse) {
  console.log(imResponse.data); // 登录成功
        setTimeout(() => {
            // 这里逻辑代码 因为是异步IM状态可能还没同步完成 所以这里延时器执执行在调用的其他IM api接口，如果你是先实列化 在通过点击去登录那就不需要这个延时器
        }, 500)
  if (imResponse.data.repeatLogin === true) {
    // 标识账号已登录，本次登录操作为重复登录。v2.5.1 起支持
    console.log(imResponse.data.errorInfo);
  }
}).catch(function(imError) {
  console.warn('login error:', imError); // 登录失败的相关信息
});

 

5.退出IM登录

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

 

6.获取当前登录用户的所有会话列表

let promise = tim.getConversationList();
promise.then(function(imResponse) {
  const conversationList = imResponse.data.conversationList; // 全量的会话列表，用该列表覆盖原有的会话列表
}).catch(function(imError) {
  console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
});

 

7.默认获取左侧第一个会话列表的用户的聊天记录数据并展示

// 注意这里的 conversationID 是左侧列表会话的你要拉取那个对象的conversationID 在获取会话列表的时候 会包含这个字段
let promise = tim.getMessageList({conversationID: 'C2Ctest', count: 15});
promise.then(function(imResponse) {
  const messageList = imResponse.data.messageList; // 消息列表。
  const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
  const isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
});

 

8.给指定用户发送消息

// 注意这个 to属性的值 在获取会话列表的时候 里面有一个userID字段 层级比较多 仔细展示开数据结构找一下 然后填入下面的to值
let message = tim.createTextMessage({
  to: 'user1',
  conversationType: TIM.TYPES.CONV_C2C,
  payload: {
    text: 'Hello world!'
  },
  // 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到，v2.10.2起支持）
  // cloudCustomData: 'your cloud custom data'
});
// 2. 发送消息
let promise = tim.sendMessage(message);
promise.then(function(imResponse) {
  // 发送成功
  console.log(imResponse);
}).catch(function(imError) {
  // 发送失败
  console.warn('sendMessage error:', imError);
});

 

9.更多腾讯IM API（已读，删除指定会话，撤回，消息更新监听，获取个人资料，与当前聊天是否是好友，获取好友列表，群列表，加好友，删好友，创建和解散群等...）

请看下面的官方文档介绍：

https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html

 

 

我是马丁的车夫，欢迎转发收藏！