uniapp實作IM即時通訊仿微信聊天功能

本文介紹如何基于 UNIAPP 使用 即時通訊SDK ZIM SDK 快速實作基本的訊息收發功能，

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

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

在此方案中，您需要通過您自己的業務系統實作以下業務邏輯：

• 搭建客戶端的用戶管理邏輯，并下發用戶 ID 用于客戶端登錄，
• 鑒權 Token，建議由您的業務后臺自行實作，保證鑒權資料安全，

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

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

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

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

3 集成 uniapp IM 即時通訊 SDK

3.1 （可選）新建專案

此步驟以如何創建新專案為例，如果是集成到已有專案，可忽略此步，

1. 啟動 HBuilderX，選擇“檔案 > 新建 > 專案”選單，
   

2. 在出現的表單中，選擇 “uni-app” 平臺，并填寫專案名稱，
   

3. 單擊“創建”，即可創建專案，

3.2 匯入ZIM 即時通訊 SDK

以下兩種方式可以任選一種匯入，

方式一：在 ZEGO即構科技 官網下載 ZIM 即時通訊 SDK

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

2. 將解壓縮后的檔案夾，直接復制到專案工程根目錄下的 “nativeplugins” 檔案夾，如果沒有該目錄，請手動創建，
   

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

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

• 單擊 “購買（0元） for 云打包”，選擇相應的專案匯入，

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

  1. 下載 SDK 到本地，并將得到的 “zego-ZIMUniPlugin.zip” 檔案解壓縮，
  2. 將解壓縮后的檔案夾，直接復制到專案工程根目錄下的 “nativeplugins” 檔案夾，如果沒有該目錄，請手動創建，

3.3 在 uni-app 專案中匯入插件

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

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

3.4 自定義除錯基座

3.4.1 制作自定義除錯基座

uni-app 官方自定義除錯基座使用說明，請參考 什么是自定義除錯基座及使用說明 ，

1. 選擇 “運行 > 運行到手機或模擬器 > 制作自定義除錯基座” 選單，
   

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

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

3.4.2 切換運行基座為自定義除錯基座

自定義除錯基座，請選擇“運行 > 運行到手機或模擬器 > 運行基座選擇 > 自定義除錯基座”選單，

3.5 集成 JS 封裝層

3.5.1 匯入 JS 封裝層

以下兩種方式可以任選一種匯入，

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

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

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

  匯入的 JS 封裝層將存盤在 “js_sdk” 目錄中，
  

3.5.2 在專案中引入 JS 封裝層

匯入后，可以在業務代碼中引入 JS 封裝層，并呼叫 ZIM 相關介面，示例如下：

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

或

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

4 實作仿微信的基本收發訊息聊天功能

以下流程中，我們以客戶端 A 和 B 的訊息互動為例，實作 1v1 通信功能：

4.1 uniapp 即時通訊 實作流程

請參考 跑通示例原始碼 獲取原始碼，

1. 匯入ZIM 即時通訊 SDK 檔案

請參考 3.2 匯入 SDK，匯入 SDK 檔案，

2. 創建 ZIM即時通訊 實體

首先我們需要在專案中創建 ZIM 實體，一個實體對應的是一個用戶，表示一個用戶以客戶端的身份登錄系統，

例如，客戶端 A、B 分別呼叫 create(@create) 介面，傳入在 2 前提條件 中獲取到的 AppID，創建了 A、B 的實體：

var appID = xxxx;
// 靜態同步方法，創建 zim 實體，傳入 AppID
var zim = ZIM.create(appID);

3. 監聽回呼事件

在客戶端登錄前，開發者可以通過呼叫 on 介面，自定義 ZIM 中的事件回呼，接收到 SDK 例外、訊息通知回呼等的通知，

// 注冊監聽“運行時錯誤資訊”的回呼  
zim.on('error', function (zim, errorInfo) {
    console.log('error', errorInfo.code, errorInfo.message);
});

// 注冊監聽“網路連接狀態變更”的回呼
zim.on('connectionStateChanged', function (zim, { state, event, extendedData }) {
    console.log('connectionStateChanged', state, event, extendedData);
});

// 注冊監聽“收到單聊訊息”的回呼
zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
    console.log('receivePeerMessage', messageList, fromConversationID);
});

// 注冊監聽“令牌即將過期”的回呼
zim.on('tokenWillExpire', function (zim, { second }) {
    console.log('tokenWillExpire', second);
    // 可以在這里呼叫 renewToken 介面來更新 token
    // 新 token 生成可以參考上文
    zim.renewToken(token)
        .then(function({ token }){
            // 更新成功
        })
        .catch(function(err){
            // 更新失敗
        })
});

4. 登錄 ZIM 即時通訊

創建實體后，客戶端 A 和 B 需要登錄 ZIM，只有登錄成功后才可以開始發送、接收訊息、更新 Token 等，

客戶端需要使用各自的用戶資訊和 Token 進行登錄，呼叫 login 介面進行登錄，傳入用戶資訊 ZIMUserInfo 物件，以及在 2 前提條件 中獲取到的 Token 進行鑒權，鑒權通過后才能登錄成功，

• “userID”、“userName” 支持開發者自定義規則生成，建議開發者將 “userID” 設定為一個有意義的值，可將其與自己的業務賬號系統進行關聯，
• 如果 Token 過期，需要在 tokenWillExpire 即將過期回呼介面中，呼叫 renewToken 介面，更新 Token 后才能正常使用 SDK，

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

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

5. 發送訊息聊天驗證

客戶端 A 登錄成功后，可以向客戶端 B 發送訊息，

目前 ZIM 支持的訊息型別如下：

以下為發送單聊文本訊息為例：客戶端 A 可以呼叫 sendPeerMessage 介面，傳入客戶端 B 的 userID、訊息內容等資訊，即可發送一條文本訊息到 B 的客戶端，

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

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

6. 接收訊息聊天驗證

客戶端 B 登錄 ZIM 后，將會收到在 on 回呼中設定的 receivePeerMessage 監聽介面，收到客戶端 A 發送過來的訊息，

// 注冊監聽“收到單聊訊息”的回呼
zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
    console.log('receivePeerMessage', messageList, fromConversationID);
});

7. 退出登錄

如果客戶端需要退出登錄，直接呼叫 logout 介面即可，

zim.logout();

8. 銷毀 ZIM 實體

如果不需要 ZIM 實體，可直接呼叫 destroy 介面，銷毀實體，

zim.destroy();

4.2 API 時序圖

通過以上的實作流程描述，API 介面呼叫時序圖如下：

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

獲取本文即時通訊框架接入IM 即時通訊聊天的開發檔案、技術支持，訪問即構檔案中心IM即時通訊開發檔案頁，可多平臺實作聊天社交IM即時通訊功能；

近期有開發規劃的開發者可上即構官網查看，恰逢即構七周年全線音視頻產品1折的優惠，聯系商務獲取"IM即時通訊一個月免費試用 "產品優惠；

標籤：JavaScript

上一篇：JavaScript設計模式及代碼實作——單例模式

下一篇：徹底弄懂bind，apply，call三者的區別 (轉)