Comment utiliser uni-app pour intégrer rapidement des fonctionnalités de conversation par chat ?

2024-07-08

À l'ère de l'Internet mobile, la fonction de messagerie instantanée (MI) est un élément indispensable de nombreuses applications. Cependant, lors du développement d'applications de messagerie instantanée, les développeurs sont souvent confrontés à un choix difficile : développer des applications distinctes pour chaque plate-forme ou créer des applications distinctes. développer un développement limité pour une certaine plate-forme ? L’émergence d’uni-app apporte une réponse efficace à cette problématique. Avec son concept « écrire une fois, exécuter sur plusieurs terminaux », uni-app apporte une commodité sans précédent aux développeurs.

uni-app est un framework pour développer toutes les applications frontales basées sur Vue.js. Il prend en charge la compilation simultanée sur iOS, Android, Web et diverses petites plates-formes de programmes via un ensemble de codes. Ce modèle de développement « écrire une fois, exécuter sur plusieurs terminaux » améliore non seulement considérablement l'efficacité du développement, mais réduit également les coûts de maintenance. Les fonctions d'itération rapide et de mise à jour à chaud permettent aux applications de répondre rapidement aux besoins du marché et des utilisateurs et de rester compétitives.

Cet article sera basé surSDK uni-app NetEase Yunxin IMComme base, nous vous apprendrons comment intégrer les capacités de conversation par chat dans le projet uni-app.

1. Préparation du projet

Enregistrez un compte développeur NetEase Yunxin : tout d'abord, vous devezSite officiel de NetEase YunxinEnregistrez un compte de développeur sur Internet et créez une application pour obtenir la clé d'application et la clé secrète.

Installer l'environnement de développement uni-app : Téléchargez et installez HBuilderX, qui est l'outil de développement officiel d'uni-app.

Intégrez le SDK NetEase Cloud Trust : intégrez le SDK NetEase Cloud Trust IM dans le projet uni-app. Généralement, cela se fait en introduisant les fichiers JavaScript du SDK dans votre projet.

2. Initialisez le SDK et l'authentification de connexion

Après avoir terminé le travail de préparation, afin de garantir que le SDK peut interagir correctement et de manière stable avec les services back-end de NetEase Yunxin, nous devons effectuer des opérations d'initialisation.

Au cours de ce processus, le SDK effectuera une série de préparations, telles que le chargement des ressources nécessaires, l'établissement d'une connexion avec le serveur, la vérification de l'identité de l'application, etc. Ce n'est que lorsque le SDK est initialisé avec succès que votre application peut utiliser les différentes fonctions fournies par le SDK, telles que l'envoi et la réception de messages, la gestion des sessions utilisateur, etc.

Étapes d'initialisation :

Introduisez le SDK NetEase Yunxin IM dans le projet uni-app.
Initialisez le SDK et transmettez la clé d’application.
Implémentez la logique de connexion utilisateur et obtenez accessToken.

Exemple de code :

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. Gestion des amis

Une fois l'initialisation terminée, nous devons effectuer les actions de base pour mettre en œuvre la fonction de messagerie instantanée, qui implique l'établissement, la gestion et l'interrogation des relations amicales entre les utilisateurs. Grâce à ces opérations, les utilisateurs peuvent facilement inviter d'autres utilisateurs à rejoindre leur cercle social et gérer leurs relations amicales :

(1) Ajouter des amis : ceci est réalisé en appelant l'interface d'ajout d'amis du 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) Supprimer des amis : ceci est réalisé en appelant l'interface de suppression d'amis du 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) Obtenir la liste d'amis : Ceci est réalisé en appelant l'interface d'obtention de la liste d'amis du 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. Fonction de discussion

Ensuite, nous mettrons en œuvre les fonctionnalités de chat de base, qui impliquent plusieurs étapes telles que l'envoi de messages, la réception de messages et l'affichage de messages.

1. Envoyez un message texte :

// 发送文本消息函数
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. Recevoir des messages

La réception de messages s'effectue généralement en écoutant les événements fournis par le SDK. Voici un exemple d'écoute des événements de messages texte :

// 监听文本消息事件
Nim.message.on(Nim.EVENT.NEW_MSG, function(msg) { 
 if (msg.sessionType === Nim.SESSION_TYPE_SINGLE

Partage de technologie