本文介紹如何基于 UNIAPP 使用 即時通訊SDK ZIM SDK 快速實現(xiàn)基本的消息收發(fā)功能。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比海西網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式海西網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋海西地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

1 uniapp im 即時通訊功能 方案介紹

即時通訊SDK ZIM SDK 提供了如下接入方案：

在此方案中，您需要通過您自己的業(yè)務系統(tǒng)實現(xiàn)以下業(yè)務邏輯：

• 搭建客戶端的用戶管理邏輯，并下發(fā)用戶 ID 用于客戶端登錄。
• 鑒權 Token，建議由您的業(yè)務后臺自行實現(xiàn)，保證鑒權數(shù)據(jù)安全。

uni-app SDK 是一個基于原生 iOS/Android 平臺 ZIM SDK 的 uni-app Wrapper。開發(fā)者如需使用 uni-app 開發(fā) Web 或小程序平臺的應用，請下載對應的 SDK 集成使用：下載 Web SDK 和 下載小程序 SDK。

2 集成 IM 即時通訊SDK 的前提條件

在使用 IM即時通訊 SDK ZIM SDK 前，請確保：

• 已在 ZEGO 控制臺 創(chuàng)建項目，獲取到了接入 IM即時通訊 ZIM SDK 服務所需的 AppID 和 ServerSecret。ZIM 服務權限不是默認開啟的，使用前，請先在 ZEGO 控制臺 自助開通 ZIM 即時通訊 服務（詳情請參考 項目管理 - 即時通訊），若無法開通 ZIM即時通訊 服務，請聯(lián)系 ZEGO 技術支持開通。
• 已獲取登錄 即時通訊 SDK 所需的 Token，詳情請參考 使用 Token 鑒權。

3 集成 uniapp IM 即時通訊 SDK

3.1 （可選）新建項目

此步驟以如何創(chuàng)建新項目為例，如果是集成到已有項目，可忽略此步。

1. 啟動 HBuilderX，選擇“文件 > 新建 > 項目”菜單。
   

2. 在出現(xiàn)的表單中，選擇 “uni-app” 平臺，并填寫項目名稱。
   

3. 單擊“創(chuàng)建”，即可創(chuàng)建項目。

3.2 導入ZIM 即時通訊 SDK

以下兩種方式可以任選一種導入。

方式一：在 ZEGO即構(gòu)科技 官網(wǎng)下載 ZIM 即時通訊 SDK

1. 請參考 下載 頁面，獲取最新版本的 SDK 到本地，并將得到的 “zego-ZIMUniPlugin.zip” 文件解壓縮。

2. 將解壓縮后的文件夾，直接復制到項目工程根目錄下的 “nativeplugins” 文件夾，如果沒有該目錄，請手動創(chuàng)建。
   

方式二：通過 uni-app 插件市場獲取 ZIM uni-app SDK

通過 uni-app 插件市場也有兩種方式導入，請任選一種：

• 單擊 “購買（0元） for 云打包”，選擇相應的項目導入。

• 單擊 “下載 for 離線打包”，離線導入。

  1. 下載 SDK 到本地，并將得到的 “zego-ZIMUniPlugin.zip” 文件解壓縮。
  2. 將解壓縮后的文件夾，直接復制到項目工程根目錄下的 “nativeplugins” 文件夾，如果沒有該目錄，請手動創(chuàng)建。

3.3 在 uni-app 項目中導入插件

1. 單擊項目目錄的 “manifest.json” 文件后，單擊 “App原生插件配置” 中的 “選擇本地插件” 或 “選擇云端插件”。
   

2. 在彈出的選擇框中，選擇 “Zego ZIM 即時通訊 SDK” 后，單擊“確認”，即添加成功。

3.4 自定義調(diào)試基座

3.4.1 制作自定義調(diào)試基座

uni-app 官方自定義調(diào)試基座使用說明，請參考 什么是自定義調(diào)試基座及使用說明 。

1. 選擇 “運行 > 運行到手機或模擬器 > 制作自定義調(diào)試基座” 菜單。
   

2. 在彈出的界面中，按照 uni-app 教程，填寫相關信息，并單擊“打包”進行云打包。
   

   打包成功后，控制臺會收到 uni-app 的相關提示。
   

3.4.2 切換運行基座為自定義調(diào)試基座

自定義調(diào)試基座，請選擇“運行 > 運行到手機或模擬器 > 運行基座選擇 > 自定義調(diào)試基座”菜單。

3.5 集成 JS 封裝層

3.5.1 導入 JS 封裝層

以下兩種方式可以任選一種導入。

• 方式一：請參考 下載 頁面，獲取最新版本的 JS 封裝層到本地，并將得到的 “zego-ZIMUniPlugin-JS.zip” 文件解壓縮。

  下載的 JS 封裝層可以拷貝到 HBuilderX 的 “js_sdk” 目錄中。（如無該目錄，請創(chuàng)建一個）
  

• 方式二：在插件市場的 Zego ZIM 即時通訊原生插件（JS 封裝層） 界面單擊右側(cè)的 “使用 HBuilderX 導入插件”。
  

  導入的 JS 封裝層將存儲在 “js_sdk” 目錄中。
  

3.5.2 在項目中引入 JS 封裝層

導入后，可以在業(yè)務代碼中引入 JS 封裝層，并調(diào)用 ZIM 相關接口，示例如下：

import { ZIM } from 'zego-zim-react-native';

或

const ZIM = require('zego-zim-react-native').ZIM;

4 實現(xiàn)仿微信的基本收發(fā)消息聊天功能

以下流程中，我們以客戶端 A 和 B 的消息交互為例，實現(xiàn) 1v1 通信功能：

4.1 uniapp 即時通訊 實現(xiàn)流程

請參考 跑通示例源碼 獲取源碼。

1. 導入ZIM 即時通訊 SDK 文件

請參考 3.2 導入 SDK，導入 SDK 文件。

2. 創(chuàng)建 ZIM即時通訊 實例

首先我們需要在項目中創(chuàng)建 ZIM 實例，一個實例對應的是一個用戶，表示一個用戶以客戶端的身份登錄系統(tǒng)。

例如，客戶端 A、B 分別調(diào)用 create(@create) 接口，傳入在 2 前提條件 中獲取到的 AppID，創(chuàng)建了 A、B 的實例：

var appID = xxxx;
// 靜態(tài)同步方法，創(chuàng)建 zim 實例，傳入 AppID
var zim = ZIM.create(appID);

3. 監(jiān)聽回調(diào)事件

在客戶端登錄前，開發(fā)者可以通過調(diào)用 on 接口，自定義 ZIM 中的事件回調(diào)，接收到 SDK 異常、消息通知回調(diào)等的通知。

// 注冊監(jiān)聽“運行時錯誤信息”的回調(diào)  
zim.on('error', function (zim, errorInfo) {
    console.log('error', errorInfo.code, errorInfo.message);
});

// 注冊監(jiān)聽“網(wǎng)絡連接狀態(tài)變更”的回調(diào)
zim.on('connectionStateChanged', function (zim, { state, event, extendedData }) {
    console.log('connectionStateChanged', state, event, extendedData);
});

// 注冊監(jiān)聽“收到單聊消息”的回調(diào)
zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
    console.log('receivePeerMessage', messageList, fromConversationID);
});

// 注冊監(jiān)聽“令牌即將過期”的回調(diào)
zim.on('tokenWillExpire', function (zim, { second }) {
    console.log('tokenWillExpire', second);
    // 可以在這里調(diào)用 renewToken 接口來更新 token
    // 新 token 生成可以參考上文
    zim.renewToken(token)
        .then(function({ token }){
            // 更新成功
        })
        .catch(function(err){
            // 更新失敗
        })
});

4. 登錄 ZIM 即時通訊

創(chuàng)建實例后，客戶端 A 和 B 需要登錄 ZIM，只有登錄成功后才可以開始發(fā)送、接收消息、更新 Token 等。

客戶端需要使用各自的用戶信息和 Token 進行登錄。調(diào)用 login 接口進行登錄，傳入用戶信息 ZIMUserInfo 對象，以及在 2 前提條件 中獲取到的 Token 進行鑒權，鑒權通過后才能登錄成功。

• “userID”、“userName” 支持開發(fā)者自定義規(guī)則生成。建議開發(fā)者將 “userID” 設置為一個有意義的值，可將其與自己的業(yè)務賬號系統(tǒng)進行關聯(lián)。
• 如果 Token 過期，需要在 tokenWillExpire 即將過期回調(diào)接口中，調(diào)用 renewToken 接口，更新 Token 后才能正常使用 SDK。

// 登錄時，需要開發(fā)者 按照 "使用 Token 鑒權" 文檔生成 token 即可
// userID 和 userName，最大 32 字節(jié)的字符串。僅支持數(shù)字，英文字符 和 '~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '=', '-', '`', ';', '’', ',', '.', '<', '>', '/', '\'。
var userInfo = { userID: 'xxxx', userName: 'xxxx' };
var token = '';

zim.login(userInfo, token)
    .then(function () {
        // 登錄成功
    })
    .catch(function (err) {
        // 登錄失敗
    });

5. 發(fā)送消息聊天驗證

客戶端 A 登錄成功后，可以向客戶端 B 發(fā)送消息。

目前 ZIM 支持的消息類型如下：

消息類型	說明	特性及適用場景
ZIMTextMessage(1)	文本消息。消息大小不超過 32 KB，單個客戶端發(fā)送頻率限制為 10 次/秒。	消息可靠有序，可存儲為歷史消息；一般適用于“單聊”、“群聊”等即時聊天的場景。
ZIMCommandMessage(2)	開發(fā)者可自定義數(shù)據(jù)類型的信令消息。消息大小不超過 5 KB，單個客戶端發(fā)送頻率限制為 10 次/秒。	支持更高的并發(fā)；一般適用于“語聊房”、“在線課堂”等房間內(nèi)的即時聊天；房間解散后，消息不保存。
ZIMBarrageMessage(20)	房間內(nèi)彈幕文本消息。消息大小不超過 5 KB，單個客戶端發(fā)送頻率無限制。	專門用于房間內(nèi)的高頻、不可靠、允許丟掉的消息，一般適用于發(fā)送“彈幕消息”的場景中。 支持高并發(fā)，但不可靠，不保證消息送達。

以下為發(fā)送單聊文本消息為例：客戶端 A 可以調(diào)用 sendPeerMessage 接口，傳入客戶端 B 的 userID、消息內(nèi)容等信息，即可發(fā)送一條文本消息到 B 的客戶端。

var toUserID = 'xxxx1';
var config = { 
    priority: 1 // 消息優(yōu)先級，取值為 低:1 默認,中:2,高:3
};

// 發(fā)送單聊 `Text` 信息
var messageTextObj = { type: 1, message: '文本消息內(nèi)容' };
zim.sendPeerMessage(messageTextObj, toUserID, config)
    .then(function ({ message }) {
        // 發(fā)送成功
    })
    .catch(function (err) {
        // 發(fā)送失敗
    });

6. 接收消息聊天驗證

客戶端 B 登錄 ZIM 后，將會收到在 on 回調(diào)中設置的 receivePeerMessage 監(jiān)聽接口，收到客戶端 A 發(fā)送過來的消息。

// 注冊監(jiān)聽“收到單聊消息”的回調(diào)
zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
    console.log('receivePeerMessage', messageList, fromConversationID);
});

7. 退出登錄

如果客戶端需要退出登錄，直接調(diào)用 logout 接口即可。

zim.logout();

8. 銷毀 ZIM 實例

如果不需要 ZIM 實例，可直接調(diào)用 destroy 接口，銷毀實例。

zim.destroy();

4.2 API 時序圖

通過以上的實現(xiàn)流程描述，API 接口調(diào)用時序圖如下：

5 uniapp跨平臺框架接入ZIM 即時通訊 SDK更多幫助

獲取本文即時通訊框架接入IM 即時通訊聊天的開發(fā)文檔、技術支持，訪問即構(gòu)文檔中心IM即時通訊開發(fā)文檔頁，可多平臺實現(xiàn)聊天社交IM即時通訊功能；

近期有開發(fā)規(guī)劃的開發(fā)者可上即構(gòu)官網(wǎng)查看，恰逢即構(gòu)七周年全線音視頻產(chǎn)品1折的優(yōu)惠，聯(lián)系商務獲取"IM即時通訊一個月免費試用 "產(chǎn)品優(yōu)惠；

本文名稱：uniapp實現(xiàn)IM即時通訊仿微信聊天功能
URL分享：http://weahome.cn/article/dsojghg.html