手把手教你uniapp接入聊天IM即時通訊功能-原始碼分享

本文介紹如何基于uniapp使用 IM即時通訊SDK ZIM SDK 快速實作同騰訊微信訊息收發聊天交友功能，實作uniapp跨平臺框架開發多端應用，節省開發成本，

1 IM即時通訊SDK接入方案介紹

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

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

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

2 接入IM即時通訊SDK的前提條件

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

• 開發環境：

  • React Native 0.60.0 或以上版本，
  • iOS 9.0 或以上版本的 iOS 設備或模擬器（推薦使用真機），
  • Android 4.0.3 或以上版本的 Android 設備或模擬器（推薦使用真機），如果為真機，請開啟“允許除錯”選項，
  • iOS / Android 設備已經連接到 Internet，
  • 配置 VS Code 開發環境，可在應用商店中搜索 “React Native Tools” 擴展并下載，

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

3 集成 IM即時通訊SDK

3.1 （可選）新建專案

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

1. 使用 React Native 內置的命令列工具，創建一個名為 “zego-zim-example” 的新專案，

   此命令列工具不需要安裝，可以直接用 node 自帶的 npx 命令來使用：

   npx react-native init zego-zim-example
   

2. 編譯運行 iOS 平臺：

   yarn react-native run-ios
   

3. 編譯運行 Android 平臺：

   yarn react-native run-android
   

3.2 匯入 IM即時通訊SDK

開發者可以使用 npm 獲取 IM即時通訊SDK，

1. 執行 npm i zego-zim-react-native 或 yarn add zego-zim-react-native 命令安裝依賴，

   npm 下載包支持 typescript 語言(推薦)，

2. 匯入IM即時通訊SDK，

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

   或

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

4 IM即時通訊SDK實作聊天訊息收發訊息

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

4.1 IM即時通訊原始碼實作流程

請參考 跑通示例原始碼 獲取IM即時通訊原始碼，

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

請參考 3.2 匯入IM即時通訊 SDK，使用 npm 獲取 SDK，匯入 SDK 檔案，

2. 創建 ZIM 即時通訊 實體

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

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

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

3. IM即時通訊 監聽回呼事件

在客戶端登錄前，開發者可以通過呼叫 on 介面，自定義 ZIM 即時通訊 中的事件回呼，接收到IM即時通訊 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 即時通訊SDK

創建實體后，客戶端 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. IM即時通訊發送訊息

IM即時通訊 客戶端 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. IM即時通訊 接收訊息

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

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

7. IM即時通訊Demo 退出登錄

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

zim.logout();

8. 銷毀 ZIM 即時通訊 實體

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

zim.destroy();

4.2 IM即時通訊 API 時序圖

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

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

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

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

標籤：其他

上一篇：測驗行業干了5年，從只會點點點到了現在的測驗開發，總算是證明了自己

下一篇：從零實作在線云相親APP｜程式員脫單神器（內附原始碼Demo)