Wie kann man mit Uni-App Chat-Konversationsfunktionen schnell integrieren?

2024-07-08

Im Zeitalter des mobilen Internets ist die Instant-Messaging-Funktion (IM) ein unverzichtbarer Bestandteil vieler Apps. Bei der Entwicklung von Instant-Messaging-Apps stehen Entwickler jedoch oft vor der schwierigen Entscheidung, ob sie für jede Plattform separate Anwendungen entwickeln oder nicht eine begrenzte Entwicklung für eine bestimmte Plattform entwickeln? Das Aufkommen von Uni-App bietet eine effiziente Antwort auf dieses Problem. Mit dem Konzept „Einmal schreiben, auf mehreren Terminals ausführen“ bietet uni-app Entwicklern einen beispiellosen Komfort.

uni-app ist ein Framework für die Entwicklung aller Front-End-Anwendungen auf Basis von Vue.js. Es unterstützt die gleichzeitige Kompilierung auf iOS, Android, Web und verschiedenen kleinen Programmplattformen über eine Reihe von Codes. Dieses Entwicklungsmodell „Einmal schreiben, auf mehreren Terminals ausführen“ verbessert nicht nur die Entwicklungseffizienz erheblich, sondern reduziert auch die Wartungskosten. Dank der schnellen Iterations- und Hot-Update-Funktionen können Anwendungen schnell auf Markt- und Benutzeranforderungen reagieren und wettbewerbsfähig bleiben.

Dieser Artikel basiert aufNetEase Yunxin IM Uni-App SDKAls Grundlage zeigen wir Ihnen, wie Sie Chat-Konversationsfunktionen in das Uni-App-Projekt integrieren.

1. Projektvorbereitung

Registrieren Sie ein NetEase Yunxin-Entwicklerkonto: Zuerst müssen Sie dies tunOffizielle Website von NetEase YunxinRegistrieren Sie ein Entwicklerkonto im Internet und erstellen Sie eine Anwendung, um den App Key und Secret Key zu erhalten.

Installieren Sie die Uni-App-Entwicklungsumgebung: Laden Sie HBuilderX herunter und installieren Sie es, das offizielle Entwicklungstool von Uni-App.

NetEase Cloud Trust SDK integrieren: NetEase Cloud Trust IM SDK in das Uni-App-Projekt integrieren. Normalerweise wird dies durch die Einführung der JavaScript-Dateien des SDK in Ihr Projekt erreicht.

2. Initialisieren Sie das SDK und die Anmeldeauthentifizierung

Nach Abschluss der Vorbereitungsarbeiten müssen wir Initialisierungsvorgänge durchführen, um sicherzustellen, dass das SDK korrekt und stabil mit den Back-End-Diensten von NetEase Yunxin interagieren kann.

Während dieses Prozesses führt das SDK eine Reihe von Vorbereitungen durch, z. B. das Laden der erforderlichen Ressourcen, das Herstellen einer Verbindung mit dem Server, das Überprüfen der Identität der Anwendung usw. Nur wenn das SDK erfolgreich initialisiert wurde, kann Ihre Anwendung die verschiedenen vom SDK bereitgestellten Funktionen nutzen, z. B. das Senden und Empfangen von Nachrichten, das Verwalten von Benutzersitzungen usw.

Initialisierungsschritte:

Führen Sie das NetEase Yunxin IM SDK in das Uni-App-Projekt ein.
Initialisieren Sie das SDK und übergeben Sie den App-Schlüssel.
Implementieren Sie die Benutzeranmeldelogik und erhalten Sie das AccessToken.

Codebeispiel:

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. Freundeverwaltung

Nachdem die Initialisierung abgeschlossen ist, müssen wir die grundlegenden Aktionen zur Implementierung der Instant-Messaging-Funktion ausführen, die den Aufbau, die Verwaltung und die Abfrage von Freundschaftsbeziehungen zwischen Benutzern umfasst. Durch diese Vorgänge können Benutzer ganz einfach andere Benutzer einladen, ihrem sozialen Kreis beizutreten und ihre Freundschaftsbeziehungen zu verwalten:

(1) Freunde hinzufügen: Dies wird durch Aufrufen der Schnittstelle zum Hinzufügen von Freunden des SDK erreicht.

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) Freunde löschen: Dies wird durch Aufrufen der Schnittstelle zum Löschen von Freunden des SDK erreicht.

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) Erhalten Sie die Freundesliste: Dies wird durch Aufrufen der Schnittstelle zum Abrufen der Freundesliste des SDK erreicht.

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. Chat-Funktion

Als Nächstes implementieren wir die Kernfunktionen des Chats, die mehrere Schritte umfassen, z. B. das Senden von Nachrichten, das Empfangen von Nachrichten und das Anzeigen von Nachrichten.

1. Senden Sie eine SMS:

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

Der Empfang von Nachrichten erfolgt normalerweise durch das Abhören von Ereignissen, die vom SDK bereitgestellt werden. Hier ist ein Beispiel für das Abhören von Textnachrichtenereignissen:

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

Technologieaustausch