微信小程序集成騰訊云 IM SDK

1、背景

　　因業(yè)務(wù)功能需求需要接入IM（即時聊天）功能，一開始想到的是使用 WebSocket 來實現(xiàn)這個功能，然天意捉弄（哈哈）服務(wù)器版本太低不支持 wx 協(xié)議（也就不支持 WebSocket了）不得不尋找第三方服務(wù)了，因客戶端目前采用微信小程序來開發(fā)，那想到的肯定就是使用他們自家的IM功能了。至此就有了本篇文章了。

2、文檔地址

1）騰訊云即時聊天：https://cloud.tencent.com/document/product/269

2）微信小程序Demo：https://github.com/tencentyun/TIMSDK/tree/master/WXMini（官方采用的是MPVUE 來開發(fā)）這點已提了建議（自家的小程序居然采用了別家的框架 哈哈 有點打臉的感覺，不得不說 MPVUE 我還沒入門 哈哈，看來得學(xué)習(xí)下這個框架了，騰訊的工程師都使用它了，不得不說它是一個優(yōu)秀的小程序框架了）

　　 3）IM SDK ：https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/Message.html?_ga=1.163142140.1311859679.1566291063

3、IM SDK 集成

　　3.1、導(dǎo)入 SDK

　　　　導(dǎo)入SDK，也就是引入他們的js 文件，下載地址：https://github.com/tencentyun/TIMSDK/tree/master/WXMini/sdk，或者使用npm工具導(dǎo)入。這里就不在啰嗦了，默認大家都會哦。

　　　　（為了大家看的清楚，將其他不用的包抹掉）

　　3.2、初始化　

import TIM from 'tim-wx-sdk';
// 發(fā)送圖片、文件等消息需要的 COS SDK
import COS from "cos-wx-sdk-v5";//如果聊天發(fā)送的是純文字，這里不必要導(dǎo)入

let options = {
  SDKAppID: 0 // 接入時需要將0替換為您的即時通信應(yīng)用的 SDKAppID
};
// 創(chuàng)建 SDK 實例，TIM.create() 方法對于同一個 SDKAppID 只會返回同一份實例
let tim = TIM.create(options); // SDK 實例通常用 tim 表示

// 注冊 COS SDK 插件
tim.registerPlugin({'cos-wx-sdk': COS});//如果聊天發(fā)送的是純文字，這里不需要注冊

　　　　設(shè)置日志級別：

tim.setLogLevel(1);

　　3.3、登錄

　　　　　　登錄之前，需要了解 UserSig以及在服務(wù)器端生成UserSig，

　　　　　　UserSing：UserSig 是用戶登錄即時通信 IM 的密碼，其本質(zhì)是對 UserID 等信息加密后得到的密文，本文將指導(dǎo)您如何生成 UserSig。

　　　　　　服務(wù)端生成 UserSig：（我們的服務(wù)器采用的是C#，其他語言請查看官網(wǎng)：https://cloud.tencent.com/document/product/269/32688）

　　　　　　因我們服務(wù)端采用的是C#，所以這里只給出C#服務(wù)端生成UserSig的代碼

　　　　　　

　　　　　NuGet 命令行集成　　　　

PM> Install-Package tls-sig-api-v2

　　　　 使用

using tencentyun;

TLSSigAPIv2 api = new TLSSigAPIv2(1400000000, "5bd2850fff3ecb11d7c805251c51ee463a25727bddc2385f3fa8bfee1bb93b5e");
string sig = api.GenSig("userId");//userId：應(yīng)該是您的 userId
System.Console.WriteLine(sig);

　　　　tim 登錄

 tim.login({
            userID: userId,
            userSig:userSig//通過服務(wù)端獲得
          }).then((imResponse) => {
            console.log(imResponse.data); // 登錄成功
            app.globalData.isImLogin = true
          }).catch((imError) => {
            console.warn('login error:', imError); // 登錄失敗的相關(guān)信息
          })

　　3.4、消息的收發(fā)

　　　　　　發(fā)（以純文字為例）：

// 發(fā)送文本消息，Web 端與小程序端相同
// 1. 創(chuàng)建消息實例，接口返回的實例可以上屏
let message = tim.createTextMessage({
  to: 'user1',
  conversationType: TIM.TYPES.CONV_C2C
  payload: {
    text: 'Hello world!'
  }
});
// 2. 發(fā)送消息
let promise = tim.sendMessage(message);
promise.then(function(imResponse) {
  // 發(fā)送成功
  console.log(imResponse);
}).catch(function(imError) {
  // 發(fā)送失敗
  console.warn('sendMessage error:', imError);
});

　　　　收：

let onMessageReceived = function(event) {
  // event.data - 存儲 Message 對象的數(shù)組 - [Message]
};
tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);

　　　　*注意*：

　　　　這里的 tim.on(TIM.EVENT.MESSAGE_RECEIVED,function(event){}) 這個接口是全局的，不管您寫在那里，小程序首次啟動的時候都會調(diào)用它，每當有新消息來是這個接口也會監(jiān)聽到。

　　　　　在進入聊天界面后，調(diào)用tim.getMessageList()接口獲取歷史聊天記錄。

　　　建議：在進入聊天界面后，請將本次的會話上報為已讀，只有這樣設(shè)置后（上面所說的 小程序首次啟動是監(jiān)聽的 tim.on(TIM.EVENT.MESSAGE_RECEIVED,function(event){}) 才會不會收到已讀的消息）

　　　　已讀上報：　　

// 將某會話下所有未讀消息已讀上報
tim.setMessageRead({conversationID: '會話ID'});

　　3.5、退出

tim.logout()

4、完成

說明：

　　　　1：如有疑問，可以與我取得聯(lián)系

　　　　2：已官方文檔為主，很有可能過些時間后文檔及SDK會發(fā)生變化

　　　　3：官方文檔已在上文中給出

　　　　4：文章首發(fā)于公眾號

　　　　5：服務(wù)端使用的小程序包是盛派的SDK（https://weixin.senparc.com）

總結(jié)

以上是生活随笔為你收集整理的微信小程序集成腾讯云 IM SDK的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。