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

 

 

我是馬丁的車夫，歡迎轉發收藏！