Πώς να χρησιμοποιήσετε το uni-app για να ενσωματώσετε γρήγορα τις δυνατότητες συνομιλίας;

Πώς να χρησιμοποιήσετε το uni-app για να ενσωματώσετε γρήγορα τις δυνατότητες συνομιλίας συνομιλίας;

2024-07-08

Στην εποχή του Διαδικτύου για κινητά, η λειτουργία άμεσων μηνυμάτων (IM) είναι αναπόσπαστο μέρος πολλών εφαρμογών, ωστόσο, κατά την ανάπτυξη εφαρμογών ανταλλαγής άμεσων μηνυμάτων, οι προγραμματιστές βρίσκονται συχνά αντιμέτωποι με μια δύσκολη επιλογή: εάν θα αναπτύξουν ξεχωριστές εφαρμογές για κάθε πλατφόρμα. ανάπτυξη περιορισμένης ανάπτυξης για μια συγκεκριμένη πλατφόρμα. Η εμφάνιση του uni-app παρέχει μια αποτελεσματική απάντηση σε αυτό το πρόβλημα. Με την ιδέα του "γράψτε μια φορά, εκτελέστε σε πολλαπλά τερματικά", το uni-app προσφέρει πρωτοφανή ευκολία στους προγραμματιστές.

Το uni-app είναι ένα πλαίσιο για την ανάπτυξη όλων των εφαρμογών front-end που βασίζονται στο Vue.js. Υποστηρίζει ταυτόχρονη μεταγλώττιση σε iOS, Android, Web και διάφορες πλατφόρμες μικρών προγραμμάτων μέσω ενός συνόλου κωδικών. Αυτό το μοντέλο ανάπτυξης "γράψτε μια φορά, εκτελέστε σε πολλαπλά τερματικά" όχι μόνο βελτιώνει σημαντικά την αποδοτικότητα ανάπτυξης, αλλά μειώνει και το κόστος συντήρησης. Οι λειτουργίες γρήγορης επανάληψης και άμεσης ενημέρωσης επιτρέπουν στις εφαρμογές να ανταποκρίνονται γρήγορα στις ανάγκες της αγοράς και των χρηστών και να παραμένουν ανταγωνιστικές.

Αυτό το άρθρο θα βασίζεται σεNetEase Yunxin IM uni-app SDKΩς βάση, θα σας διδάξουμε πώς να ενσωματώνετε τις δυνατότητες συνομιλίας συνομιλίας στο έργο uni-app.

1. Προετοιμασία έργου

Καταχωρίστε έναν λογαριασμό προγραμματιστή NetEase Yunxin: Πρώτα, πρέπει να το κάνετεΕπίσημος ιστότοπος NetEase YunxinΚαταχωρίστε έναν λογαριασμό προγραμματιστή στο Διαδίκτυο και δημιουργήστε μια εφαρμογή για να αποκτήσετε το κλειδί εφαρμογής και το μυστικό κλειδί.

Εγκατάσταση περιβάλλοντος ανάπτυξης uni-app: Κατεβάστε και εγκαταστήστε το HBuilderX, το οποίο είναι το επίσημο εργαλείο ανάπτυξης του uni-app.

Ενσωματώστε το SDK του NetEase Cloud Trust: Ενσωματώστε το SDK του NetEase Cloud Trust στο έργο uni-app. Συνήθως, αυτό επιτυγχάνεται με την εισαγωγή των αρχείων JavaScript του SDK στο έργο σας.

2. Αρχικοποιήστε το SDK και τον έλεγχο ταυτότητας σύνδεσης

Μετά την ολοκλήρωση των εργασιών προετοιμασίας, προκειμένου να διασφαλίσουμε ότι το SDK μπορεί να αλληλεπιδράσει σωστά και σταθερά με τις υπηρεσίες back-end του NetEase Yunxin, πρέπει να εκτελέσουμε λειτουργίες προετοιμασίας.

Κατά τη διάρκεια αυτής της διαδικασίας, το SDK θα εκτελέσει μια σειρά από προετοιμασίες, όπως η φόρτωση των απαραίτητων πόρων, η δημιουργία σύνδεσης με τον διακομιστή, η επαλήθευση της ταυτότητας της εφαρμογής κ.λπ. Μόνο όταν το SDK προετοιμαστεί με επιτυχία, μπορεί η εφαρμογή σας να χρησιμοποιήσει τις διάφορες λειτουργίες που παρέχονται από το SDK, όπως αποστολή και λήψη μηνυμάτων, διαχείριση περιόδων σύνδεσης χρήστη κ.λπ.

Βήματα αρχικοποίησης:

Εισαγάγετε το NetEase Yunxin IM SDK στο έργο uni-app.
Εκκινήστε το SDK και περάστε το στο App Key.
Εφαρμόστε τη λογική σύνδεσης χρήστη και αποκτήστε το 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. Friend Management

Μετά την ολοκλήρωση της προετοιμασίας, πρέπει να ολοκληρώσουμε τις βασικές ενέργειες για την υλοποίηση της λειτουργίας άμεσων μηνυμάτων, η οποία περιλαμβάνει τη δημιουργία, διαχείριση και αναζήτηση σχέσεων φίλων μεταξύ των χρηστών. Μέσω αυτών των λειτουργιών, οι χρήστες μπορούν εύκολα να προσκαλέσουν άλλους χρήστες να συμμετάσχουν στον κοινωνικό τους κύκλο και να διαχειριστούν τις σχέσεις φίλων τους:

(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

Κοινή χρήση τεχνολογίας