Condivisione della tecnologia

Come utilizzare uni-app per integrare rapidamente le funzionalità di conversazione in chat?

2024-07-08

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

Nell'era dell'Internet mobile, la funzione di messaggistica istantanea (IM) è una parte indispensabile di molte app. Tuttavia, quando sviluppano app di messaggistica istantanea, gli sviluppatori si trovano spesso di fronte a una scelta difficile: se sviluppare applicazioni separate per ciascuna piattaforma oppure sviluppare uno sviluppo limitato per una determinata piattaforma ? L'emergere di uni-app fornisce una risposta efficace a questo problema. Con il suo concetto di "scrivi una volta, esegui su più terminali", uni-app offre agli sviluppatori una comodità senza precedenti.

uni-app è un framework per lo sviluppo di tutte le applicazioni front-end basate su Vue.js. Supporta la compilazione simultanea su iOS, Android, Web e varie piattaforme di piccoli programmi tramite una serie di codici. Questo modello di sviluppo "scrivi una volta, esegui su più terminali" non solo migliora notevolmente l'efficienza dello sviluppo, ma riduce anche i costi di manutenzione. Le funzioni di iterazione rapida e aggiornamento a caldo consentono alle applicazioni di rispondere rapidamente alle esigenze del mercato e degli utenti e di rimanere competitive.

Questo articolo sarà basato suNetEase Yunxin IM SDK uni-appCome base, ti insegneremo come integrare le funzionalità di conversazione via chat nel progetto uni-app.

1. Preparazione del progetto

  1. Registra un account sviluppatore NetEase Yunxin: innanzitutto devi farloSito ufficiale di NetEase YunxinRegistra un account sviluppatore su Internet e crea un'applicazione per ottenere la chiave app e la chiave segreta.
  1. Installa l'ambiente di sviluppo uni-app: scarica e installa HBuilderX, che è lo strumento di sviluppo ufficiale di uni-app.
  1. Integra l'SDK di NetEase Cloud Trust: integra l'SDK di NetEase Cloud Trust IM nel progetto uni-app. In genere, ciò si ottiene introducendo i file JavaScript dell'SDK nel progetto.

2. Inizializzare l'SDK e l'autenticazione dell'accesso

Dopo aver completato il lavoro di preparazione, per garantire che l'SDK possa interagire correttamente e stabilmente con i servizi back-end di NetEase Yunxin, dobbiamo eseguire le operazioni di inizializzazione.

Durante questo processo, l'SDK eseguirà una serie di preparativi, come caricare le risorse necessarie, stabilire una connessione con il server, verificare l'identità dell'applicazione, ecc. Solo quando l'SDK viene inizializzato correttamente la tua applicazione può utilizzare le varie funzioni fornite dall'SDK, come l'invio e la ricezione di messaggi, la gestione delle sessioni utente, ecc.

Passaggi di inizializzazione:

  1. Introduci NetEase Yunxin IM SDK nel progetto uni-app.
  2. Inizializza l'SDK e passa la chiave dell'app.
  3. Implementare la logica di accesso dell'utente e ottenere accessToken.

Esempio di codice:

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. Gestione degli amici

Una volta completata l'inizializzazione, dobbiamo completare le azioni di base per implementare la funzione di messaggistica istantanea, che prevede l'instaurazione, la gestione e l'interrogazione delle relazioni di amicizia tra gli utenti. Attraverso queste operazioni gli utenti possono facilmente invitare altri utenti a unirsi alla propria cerchia sociale e gestire le proprie relazioni di amicizia:

(1) Aggiungi amici: ciò si ottiene richiamando l'interfaccia di aggiunta amici dell'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) Elimina amici: ciò si ottiene richiamando l'interfaccia Elimina amici dell'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) Ottieni l'elenco degli amici: ciò si ottiene richiamando l'interfaccia per ottenere l'elenco degli amici dell'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. Funzione chat

Successivamente, implementeremo le funzionalità principali della chat, che implicano più passaggi come l'invio di messaggi, la ricezione di messaggi e la visualizzazione di messaggi.

1. Invia un messaggio di testo:

// 发送文本消息函数
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. Ricevi messaggi

La ricezione dei messaggi avviene solitamente ascoltando gli eventi forniti dall'SDK. Ecco un esempio di ascolto degli eventi dei messaggi di testo:

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