微信小程式集成騰訊雲 IM SDK
- 2019 年 10 月 3 日
- 筆記
微信小程式集成騰訊雲 IM SDK
1、背景
因業務功能需求需要接入IM（即時聊天）功能，一開始想到的是使用 WebSocket 來實現這個功能，然天意捉弄（哈哈）伺服器版本太低不支援 wx 協議（也就不支援 WebSocket了）不得不尋找第三方服務了，因客戶端目前採用微信小程式來開發，那想到的肯定就是使用他們自家的IM功能了。至此就有了本篇文章了。
2、文檔地址
1）騰訊雲即時聊天：https://cloud.tencent.com/document/product/269
2）微信小程式Demo：https://github.com/tencentyun/TIMSDK/tree/master/WXMini（官方採用的是MPVUE 來開發）這點已提了建議（自家的小程式居然採用了別家的框架 哈哈 有點打臉的感覺，不得不說 MPVUE 我還沒入門 哈哈，看來得學習下這個框架了，騰訊的工程師都使用它了，不得不說它是一個優秀的小程式框架了）
3、IM SDK 集成
3.1、導入 SDK
導入SDK，也就是引入他們的js 文件，下載地址：https://github.com/tencentyun/TIMSDK/tree/master/WXMini/sdk，或者使用npm工具導入。這裡就不在啰嗦了，默認大家都會哦。
（為了大家看的清楚，將其他不用的包抹掉）
3.2、初始化
import TIM from 'tim-wx-sdk'; // 發送圖片、文件等消息需要的 COS SDK import COS from "cos-wx-sdk-v5";//如果聊天發送的是純文字，這裡不必要導入 let options = { SDKAppID: 0 // 接入時需要將0替換為您的即時通訊應用的 SDKAppID }; // 創建 SDK 實例，TIM.create() 方法對於同一個 SDKAppID 只會返回同一份實例 let tim = TIM.create(options); // SDK 實例通常用 tim 表示 // 註冊 COS SDK 插件 tim.registerPlugin({'cos-wx-sdk': COS});//如果聊天發送的是純文字，這裡不需要註冊
設置日誌級別：
tim.setLogLevel(1);
3.3、登錄
登錄之前，需要了解 UserSig以及在伺服器端生成UserSig，
UserSing：UserSig 是用戶登錄即時通訊 IM 的密碼，其本質是對 UserID 等資訊加密後得到的密文，本文將指導您如何生成 UserSig。
服務端生成 UserSig：（我們的伺服器採用的是C#，其他語言請查看官網：https://cloud.tencent.com/document/product/269/32688）
因我們服務端採用的是C#，所以這裡只給出C#服務端生成UserSig的程式碼
NuGet 命令行集成
PM> Install-Package tls-sig-api-v2
使用
using tencentyun; TLSSigAPIv2 api = new TLSSigAPIv2(1400000000, "5bd2850fff3ecb11d7c805251c51ee463a25727bddc2385f3fa8bfee1bb93b5e"); string sig = api.GenSig("userId");//userId：應該是您的 userId System.Console.WriteLine(sig);
tim 登錄
tim.login({ userID: userId, userSig:userSig//通過服務端獲得 }).then((imResponse) => { console.log(imResponse.data); // 登錄成功 app.globalData.isImLogin = true }).catch((imError) => { console.warn('login error:', imError); // 登錄失敗的相關資訊 })
3.4、消息的收發
發（以純文字為例）：
// 發送文本消息，Web 端與小程式端相同 // 1. 創建消息實例，介面返回的實例可以上屏 let message = tim.createTextMessage({ to: 'user1', conversationType: TIM.TYPES.CONV_C2C payload: { text: 'Hello world!' } }); // 2. 發送消息 let promise = tim.sendMessage(message); promise.then(function(imResponse) { // 發送成功 console.log(imResponse); }).catch(function(imError) { // 發送失敗 console.warn('sendMessage error:', imError); });
收：
let onMessageReceived = function(event) { // event.data - 存儲 Message 對象的數組 - [Message] }; tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
*注意*：
這裡的 tim.on(TIM.EVENT.MESSAGE_RECEIVED,function(event){}) 這個介面是全局的，不管您寫在那裡，小程式首次啟動的時候都會調用它，每當有新消息來是這個介面也會監聽到。
在進入聊天介面後，調用tim.getMessageList()介面獲取歷史聊天記錄。
建議：在進入聊天介面後，請將本次的會話上報為已讀，只有這樣設置後（上面所說的 小程式首次啟動是監聽的 tim.on(TIM.EVENT.MESSAGE_RECEIVED,function(event){}) 才會不會收到已讀的消息 ）
已讀上報：
// 將某會話下所有未讀消息已讀上報 tim.setMessageRead({conversationID: '會話ID'});
3.5、退出
tim.logout()
4、完成
說明：
1：如有疑問，可以與我取得聯繫
2：已官方文檔為主，很有可能過些時間後文檔及SDK會發生變化
3：官方文檔已在上文中給出
4：文章首發於公眾號
5：服務端使用的小程式包是盛派的SDK（https://weixin.senparc.com）
