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