关于uniapp:手把手教你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 即时通讯一个月收费试用 “ 产品优惠；