如何使用 uni-app 快速集成聊天会话能力？

移动互联网时代，即时通讯（IM）功能是许多app不可或缺的一部分，然而在即时通讯app开发时，开发者常常面临着选择困难：是为每个平台单独开发应用，还是有限开发某个平台？uni-app的出现，为这一问题提供了一个高效答案。uni-app以其"一次编写，多端运行"的理念，为开发者带来了前所未有的便捷。

uni-app是基于Vue.js开发所有前端应用的框架，它支持通过一套代码来同时编译到iOS、Android、Web以及各种小程序平台。这种"一次编写，多端运行"的开发模式，不仅极大地提高了开发效率，也降低了维护成本。快速迭代和热更新功能更是让应用能够迅速响应市场和用户需求，保持竞争力。

本文将以网易云信 IM uni-app SDK为基础， 教大家如何在uni-app 项目中集成聊天会话能力。

一、项目准备

  1. 注册网易云信开发者账号：首先，你需要在网易云信官网上注册一个开发者账号，并创建一个应用，获取App Key和Secret Key。
  1. 安装uni-app开发环境：下载并安装HBuilderX，这是uni-app的官方开发工具。
  1. 集成网易云信SDK：在uni-app项目中集成网易云信IM SDK。通常，这可以通过在项目中引入SDK的JavaScript文件来完成。

二、初始化SDK和登录认证

完成准备工作后，为了确保SDK能够正确、稳定地与网易云信的后端服务进行交互，我们需要进行初始化操作。

在这个过程中，SDK会进行一系列的准备工作，比如加载必要的资源、建立与服务器的连接、验证应用的身份等。只有SDK初始化成功，您的应用才能使用SDK提供的各种功能，比如发送和接收消息、管理用户会话等。

初始化步骤：

  1. 在uni-app项目中引入网易云信IM SDK。
  2. 初始化SDK，传入App Key。
  3. 实现用户登录逻辑，获取accessToken。

代码示例：

import Nim from '@path/to/nim-sdk.js';
// 初始化SDK
Nim.init({appKey: 'YOUR_APP_KEY' // 替换为你的App Key
});
// 用户登录函数
async function login(accid, password) {try {// 调用SDK登录接口获取accessTokenlet loginResult = await Nim.login({accid: accid,password: password,rememberMe: true});// 存储accessToken到本地（这里使用uni-app的API）uni.setStorageSync('accessToken', loginResult.accessToken);console.log('登录成功', loginResult);// 成果：用户登录成功，accessToken已被存储，可以进行后续的IM操作} catch (error) {console.error('登录失败', error);// 处理登录失败的情况，例如提示用户重新输入账号密码或检查网络状态}
}
// 调用登录函数（这里只是示例，实际开发中你需要从用户输入或其他地方获取accid和password）
login('testUser', 'password123');
// 调用login函数后，将尝试使用提供的accid和password登录，并处理登录结果

三、好友管理

初始化完成后，我们需要完成实现即时通讯功能的基础动作，涉及到用户之间好友关系的建立、管理和查询。通过这些操作，用户可以方便地邀请其他用户加入自己的社交圈，管理自己的好友关系：

（1）添加好友：通过调用SDK的添加好友接口实现。

let accessToken = uni.getStorageSync('accessToken');
// 添加好友函数
async function addFriend(userId, friendId) {try {// 检查accessToken是否有效if (!accessToken) {console.error('accessToken无效或不存在');return;}// 调用SDK添加好友接口let result = await Nim.friend.add({fromAccid: userId, // 当前用户IDtoAccid: friendId, // 目标用户IDmsg: '添加你为好友', // 邀请消息}, accessToken);console.log('添加好友结果', result);// 成果：如果成功，result将包含添加好友操作的响应信息} catch (error) {console.error('添加好友失败', error);// 处理添加好友失败的情况，例如提示用户检查网络或重新尝试}
}
// 调用添加好友函数（这里只是示例，实际开发中你需要从用户输入或其他地方获取userId和friendId）
addFriend('currentUser', 'targetUser');
// 调用addFriend函数后，将尝试添加指定的friendId为好友，并处理结果

（2）删除好友：通过调用SDK的删除好友接口实现。

let accessToken = uni.getStorageSync('accessToken');
// 删除好友函数
async function deleteFriend(userId, friendId) {try {// 检查accessToken是否有效if (!accessToken) {console.error('accessToken无效或不存在');return;}// 调用SDK删除好友接口let result = await Nim.friend.delete({fromAccid: userId, // 当前用户IDtoAccid: friendId, // 目标用户ID}, accessToken);console.log('删除好友结果', result);// 成果：如果成功，result将包含删除好友操作的响应信息// 根据返回结果更新本地好友列表（如果需要）} catch (error) {console.error('删除好友失败', error);// 处理删除好友失败的情况，例如提示用户检查网络或重新尝试}
}
// 调用删除好友函数（这里只是示例，实际开发中你需要从用户列表或其他地方获取userId和friendId）
deleteFriend('currentUser', 'targetUser');
// 调用deleteFriend函数后，将尝试删除指定的friendId为好友，并处理结果

（3）获取好友列表：通过调用SDK的获取好友列表接口实现。

let accessToken = uni.getStorageSync('accessToken');
// 获取好友列表函数
async function getFriendList(userId) {try {// 检查accessToken是否有效if (!accessToken) {console.error('accessToken无效或不存在');return;}// 调用SDK获取好友列表接口let result = await Nim.friend.getFriendList({accid: userId, // 当前用户ID}, accessToken);console.log('好友列表', result);// 成果：成功获取好友列表，result将包含好友信息// 根据返回结果更新本地好友列表（如果需要）} catch (error) {console.error('获取好友列表失败', error);// 处理获取好友列表失败的情况，例如提示用户检查网络或重新尝试}
}
// 调用获取好友列表函数（这里只需要当前用户ID）
getFriendList('currentUser');
// 调用getFriendList函数后，将尝试获取当前用户的好友列表，并处理结果

四、聊天功能

接下来，我们将实现最核心的聊天能力，涉及到发送消息、接收消息、显示消息等多个步骤。

1、发送文本消息：

// 发送文本消息函数
async function sendTextMessage(toAccid, content) {try {// 从本地存储中获取accessTokenlet accessToken = uni.getStorageSync('accessToken');// 检查accessToken是否有效if (!accessToken) {console.error('accessToken无效或不存在');return;}// 调用SDK发送文本消息接口let result = await Nim.message.sendText({toSessionType: Nim.SESSION_TYPE_SINGLE, // 会话类型：单人会话toAccid: toAccid, // 目标用户IDmsgBody: {text: content // 消息内容}}, accessToken);console.log('发送文本消息结果', result);// 成果：如果成功，result将包含发送消息操作的响应信息} catch (error) {console.error('发送文本消息失败', error);// 处理发送文本消息失败的情况，例如提示用户检查网络或重新发送消息}
}
// 调用发送文本消息函数（这里只是示例，实际开发中你需要从用户输入或其他界面元素获取toAccid和content）
sendTextMessage('receiverAccid', 'Hello, this is a test message.');
// 调用sendTextMessage函数后，将尝试向指定用户发送文本消息，并处理结果

2. 接收消息

接收消息通常是通过监听SDK提供的事件来实现的，这里给出监听文本消息事件的示例：

// 监听文本消息事件
Nim.message.on(Nim.EVENT.NEW_MSG, function(msg) { if (msg.sessionType === Nim.SESSION_TYPE_SINGLE && msg.msgType === Nim.MSG_TYPE_TEXT) {// 处理单人会话中的文本消息console.log('收到文本消息', msg.content.text);   // 根据需要更新UI显示消息内容  }});

3、 显示消息

// 假设你已经从接收消息的事件处理函数中获取了消息数据，并存储在某个变量中，如newMsg// 渲染消息到UI的函数（这里以Vue.js的语法为例）
function renderMessage(newMsg) {// 创建消息元素（这里只是示例，具体实现取决于你的UI设计）let messageElement = `<div>${newMsg.sender} 说: ${newMsg.content}</div>`; // 假设newMsg包含sender和content属性// 将消息元素添加到页面中的某个容器中（如id为"chatWindow"的div元素）document.getElementById('chatWindow').innerHTML += messageElement;
}// 在接收到新消息时调用渲染函数
// ...（在之前的监听文本消息事件的处理函数中

通过本文的介绍，我们详细讲解了如何在uni-app中使用网易云信IM SDK（注册可下载demo）构建实时通讯应用。从项目准备到好友管理，再到聊天功能和消息通知的实现，每个步骤都附带了代码示例和解释说明，希望能够帮助你更好地理解和掌握相关知识。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/40330.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

BLOB视频技术原理，如何将Blob视频转换为MP4格式？

BLOB视频技术原理，如何将Blob视频转换为MP4格式？

BLOB视频的制作涉及将视频数据转换为二进制大对象&#xff08;BLOB&#xff09;格式&#xff0c;然后对其进行编码、分割、封装和传输。在目标设备上&#xff0c;BLOB数据被解析、解码和播放&#xff0c;同时可能需要进行实时的优化以适应播放条件。这种制作方式旨在提供一种高…
阅读更多...
linux监控服务器磁盘、内存空间使用率到达90%发送邮件脚本

linux监控服务器磁盘、内存空间使用率到达90%发送邮件脚本

以下是一个使用Python编写的Linux监控服务器磁盘、内存空间使用率并在达到90%时发送邮件的脚本&#xff1a; import os import smtplib from email.mime.text import MIMEText from email.header import Header# 设置阈值 DISK_THRESHOLD 90 MEMORY_THRESHOLD 90# 获取磁盘使…
阅读更多...
7月11日云技术研讨会 | 车载信息安全全流程实施方案

7月11日云技术研讨会 | 车载信息安全全流程实施方案

伴随着汽车的智能网联化发展&#xff0c;网络攻击也逐渐渗透漫延至汽车领域&#xff0c;汽车行业面临着重大的信息安全挑战。此外&#xff0c;UNECE WP.29 R155和ISO/SAE 21434等标准也对汽车的信息安全提出了规范化要求&#xff0c;旨在分阶段将产品全生命周期中由信息安全威胁…
阅读更多...
中介子方程四十二

中介子方程四十二

XXFXXuXXWXXuXXdXXrXXαXXuXpXXKXηXiXXnXXyXηXuXXrXXaXnXXαXLXyXXWXuXeXuXWXXyXLXαXXnXaXXrXXuXηXyXXnXXiXηXKXXpXuXXαXXrXXdXXuXWXπXXWXeXyXeXbXπXpXXNXXqXeXXrXXαXXuXpXXKXηXiXXnXXyXηXuXXrXXaXnXXαXLXyXXWXuXeXuXWXXyXLXαXXnXaXXrXXuXηXyXXnXXiXηXKXXpXuXXα…
阅读更多...
JavaScript中的this指向

JavaScript中的this指向

1. 全局环境下的this 在全局环境中&#xff08;在浏览器中是window对象&#xff0c;在Node.js中是global对象&#xff09;&#xff0c;this指向全局对象。 console.log(this window); // 在浏览器中为true console.log(this.document ! undefined); // true&#xff0c;因为…
阅读更多...
opencv编译报错OpenCV does not recognize MSVC_VERSION “1940“

opencv编译报错OpenCV does not recognize MSVC_VERSION “1940“

具体如下: CMake Warning at cmake/OpenCVDetectCXXCompiler.cmake:182 (message):OpenCV does not recognize MSVC_VERSION "1940". Cannot set OpenCV_RUNTIME Call Stack (most recent call first):CMakeLists.txt:174 (include) 打开源码\opencv\sources\cmak…
阅读更多...
如何加密U盘？U盘加密软件推荐

如何加密U盘？U盘加密软件推荐

U盘是我们最常用的移动存储设备&#xff0c;可以帮助我们随身携带大量数据。为了避免U盘数据泄露&#xff0c;我们需要加密保护U盘。那么&#xff0c;U盘该如何加密呢&#xff1f;下面小编就为大家推荐两款专业的U盘加密软件。 U盘超级加密3000 U盘超级加密3000是一款优秀的U盘…
阅读更多...
大模型概述-定义/分类/训练/应用

大模型概述-定义/分类/训练/应用

大模型概述 随着时代的发展, 大模型各个领域的应用正在不断扩大. 本文尽力梳理各种材料, 将从概念定义, 类型分类, 训练以及应用等方面对大模型进行一个简要的概述. 如果你想了解大模型但是却缺乏基础的知识或者觉得无从下手, 那么阅读该文章可能对你有所帮助. 如果想了解更多…
阅读更多...
react antd表格翻页时记录勾选状态

react antd表格翻页时记录勾选状态

在Ant Design的React表格&#xff08;Table&#xff09;组件中&#xff0c;如果需要在翻页时记住勾选状态&#xff0c;可以通过以下步骤实现&#xff1a; 使用rowSelection属性来控制勾选状态&#xff0c;并添加preserveSelectedRowKeys: true以保留 key。 设置rowKey属性。 …
阅读更多...
Django任意URL跳转漏洞（CVE-2018-14574）

Django任意URL跳转漏洞（CVE-2018-14574）

目录 Django介绍 URL跳转漏洞介绍 Django任意URL跳转漏洞介绍 环境搭建 防御方法 前段时间在面试时&#xff0c;问到了URL跳转漏洞&#xff0c;我没有回答好&#xff0c;下午把URL跳转漏洞学习了&#xff0c;发现也不难&#xff0c;看来还需要学习的东西很多呀&#xff0c…
阅读更多...
cadence symbol修改之一

cadence symbol修改之一

cdaence virtuoso 复制cell&#xff0c;或者拷贝symbol之后&#xff0c;再次调用的时候&#xff0c;symbol还是跟随原来的cell名字 解决办法 打开对应的symbol 修改partName为 cellName
阅读更多...
把前端打包放到Eladmin框架中运行

把前端打包放到Eladmin框架中运行

再resuorces目录创建static文件夹&#xff0c;然后把前端文件放进来 然后修改 ConfigurerAdapter文件&#xff0c;如下图所示 这样就可以通过ip端口/index.html 这样访问啦&#xff01;
阅读更多...
基于Lua源码开发动态库供lua脚本使用

基于Lua源码开发动态库供lua脚本使用

通过require的方式可以加载动态库&#xff0c;然后脚本就可以使用库中提供的函数&#xff0c;一般过程如下&#xff1a; 比如有一个动态库名为&#xff1a;MyFirstLua.dll 则使用时&#xff1a;MyFirstLua require("MyFirstLua") 导出的函数接口名称一定是 int l…
阅读更多...
垂直领域大模型的机遇与挑战：从构建到应用

垂直领域大模型的机遇与挑战：从构建到应用

在人工智能技术的浪潮中，大模型以其强大的数据处理和学习能力，成为推动科技进步的重要力量。然而，这种跨领域应用的过程并非一帆风顺，既面临挑战也蕴含机遇。本文从复旦大学的研究工作出发，详细分析大模型的机遇与挑战。 背景 GPT4技术报告指出，GPT4仍处于通用人工智…
阅读更多...
Mybatis连接数据库

Mybatis连接数据库

文章目录 大纲定义类、创建表添加相关依赖五件套5.1 mybatis-config.xml5.2 MybatisUtils.java5.3 \**Mapper.xml5.4 \**Mapper.java5.5 \**Dao.java 测试类 大纲 在Java中定义类、在数据库汇总创建表添加依赖编写5件套测试 定义类、创建表 import java.time.LocalDate; imp…
阅读更多...
土壤分析仪：分析土壤中的各种养分

土壤分析仪：分析土壤中的各种养分

土壤作为地球生命的摇篮&#xff0c;承载着农作物的生长与繁衍。土壤中的养分是农作物生长的关键。 一、土壤分析仪的工作原理 土壤分析仪是一种采用先进传感技术的仪器设备&#xff0c;能够精确测量土壤中的PH值、电导率、有机质含量、养分含量以及微生物数量等参数。它利用多…
阅读更多...
# Kafka_深入探秘者（9）：kafka 集群管理

# Kafka_深入探秘者（9）：kafka 集群管理

Kafka_深入探秘者&#xff08;9&#xff09;&#xff1a;kafka 集群管理 一、kafka 集群概述 1、kafka 集群概述&#xff1a; 集群是一种计算机系统&#xff0c;它通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作。在某种意义上&#xff0c;他们可…
阅读更多...
ffmpeg下载/配置环境/测试

ffmpeg下载/配置环境/测试

一、下载 1、访问FFmpeg官方网站下载页面&#xff1a;FFmpeg Download Page&#xff1b; 2、选择适合Windows的版本&#xff08;将鼠标移动到windows端&#xff09;。通常&#xff0c;你会找到“Windows builds from gyan.dev”或者“BtbN GitHub Releases”等选项&#xff0…
阅读更多...
研0学习Python基础4

研0学习Python基础4

1.数组是一种存储大量同性质数据的连续内存空间&#xff0c;只要使用相同的变量名称&#xff0c;便可以连续访问 每一组数据。由于数组元素的便利性&#xff0c;使得大多数程序中都可以看到数组的身影。数组是一 个带有多个数据且模式相同的元素集合。比如&#xff0c;数值所…
阅读更多...
WHAT - React Immer

WHAT - React Immer

官方文档&#xff1a;https://immerjs.github.io/immer/example-setstate useState ImmeruseImmeruseReducer ImmeruseImmerReducerRedux Immer React 和 Immer 是两个不同的工具&#xff0c;它们在处理状态管理和状态更新时可以很好地结合使用。 React React 是一个用于…
阅读更多...
最新文章

Copyright @ 2022~2023