Обмен технологиями

Как использовать uni-app для быстрой интеграции возможностей общения в чате?

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

В эпоху мобильного Интернета функция обмена мгновенными сообщениями (IM) является неотъемлемой частью многих приложений. Однако при разработке приложений для обмена мгновенными сообщениями разработчики часто сталкиваются с трудным выбором: разрабатывать отдельные приложения для каждой платформы или делать это отдельно. разработать ограниченную разработку для определенной платформы? Появление uni-app дает эффективный ответ на эту проблему. Благодаря своей концепции «напиши один раз, запусти на нескольких терминалах», uni-app обеспечивает беспрецедентное удобство для разработчиков.

uni-app — это фреймворк для разработки всех интерфейсных приложений на базе Vue.js. Он поддерживает одновременную компиляцию для iOS, Android, Web и различных небольших программных платформ с помощью набора кодов. Эта модель разработки «напиши один раз, запусти на нескольких терминалах» не только значительно повышает эффективность разработки, но и снижает затраты на обслуживание. Функции быстрой итерации и горячего обновления позволяют приложениям быстро реагировать на потребности рынка и пользователей и оставаться конкурентоспособными.

Эта статья будет основана наNetEase Yunxin IM SDK для единого приложенияВ качестве основы мы научим вас, как интегрировать возможности общения в чате в проект uni-app.

1. Подготовка проекта

  1. Зарегистрируйте учетную запись разработчика NetEase Yunxin: во-первых, вам необходимоОфициальный сайт NetEase YunxinЗарегистрируйте учетную запись разработчика в Интернете и создайте приложение для получения ключа приложения и секретного ключа.
  1. Установите среду разработки uni-app: загрузите и установите HBuilderX, который является официальным инструментом разработки uni-app.
  1. Интеграция NetEase Cloud Trust SDK: Интегрируйте NetEase Cloud Trust IM SDK в проект uni-app. Обычно это достигается путем добавления в проект файлов JavaScript SDK.

2. Инициализируйте SDK и аутентификацию при входе.

После завершения подготовительных работ, чтобы гарантировать корректное и стабильное взаимодействие SDK с серверными сервисами NetEase Yunxin, нам необходимо выполнить операции инициализации.

В ходе этого процесса SDK выполнит ряд подготовительных действий, таких как загрузка необходимых ресурсов, установка соединения с сервером, проверка личности приложения и т. д. Только после успешной инициализации SDK ваше приложение сможет использовать различные функции, предоставляемые SDK, такие как отправка и получение сообщений, управление сеансами пользователей и т. д.

Шаги инициализации:

  1. Внедрите NetEase Yunxin IM SDK в проект uni-app.
  2. Инициализируйте SDK и передайте ключ приложения.
  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登录接口获取accessToken
    let 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登录，并处理登录结果

3. Управление друзьями

После завершения инициализации нам необходимо выполнить основные действия по реализации функции обмена мгновенными сообщениями, которая предполагает установление, управление и запрос дружеских отношений между пользователями. С помощью этих операций пользователи могут легко приглашать других пользователей присоединиться к их кругу общения и управлять отношениями с друзьями:

(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, // 当前用户ID
      toAccid: friendId, // 目标用户ID
      msg: '添加你为好友', // 邀请消息
    }, 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, // 当前用户ID
      toAccid: 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函数后，将尝试获取当前用户的好友列表，并处理结果

4. Функция чата

Далее мы реализуем основные возможности чата, которые включают в себя несколько шагов, таких как отправка сообщений, получение сообщений и отображение сообщений.

1. Отправьте текстовое сообщение:

// 发送文本消息函数
async function sendTextMessage(toAccid, content) {
  try {
    // 从本地存储中获取accessToken
    let 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, // 目标用户ID
      msgBody: {
        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

个人简介

潜心研究技术三十余年，精通java、linux、javascript、php、css、等等各种语言，在开源领域有诸多贡献，建立开发者文档站，将一些技术开发中的问题分享出来，以供大家查阅

我的联系方式

邮箱