Kuinka käyttää uni-sovellusta chat-keskusteluominaisuuksien nopeaan integrointiin?

2024-07-08

Mobiili-Internetin aikakaudella pikaviestitoiminto (IM) on välttämätön osa monia sovelluksia. Kuitenkin pikaviestisovelluksia kehitettäessä kehittäjät joutuvat usein vaikean valinnan eteen: kehittääkö jokaiselle alustalle erillisiä sovelluksia vai käyttääkö niitä. kehittää rajoitettua kehitystä tietylle alustalle? Uni-sovelluksen ilmestyminen tarjoaa tehokkaan vastauksen tähän ongelmaan. Uni-sovellus tarjoaa kehittäjille ennennäkemättömän mukavuuden "kirjoita kerran, käytä useissa päätteissä" -konseptillaan.

uni-app on kehys kaikkien Vue.js-pohjaisten käyttöliittymäsovellusten kehittämiseen. Se tukee samanaikaista kääntämistä iOS-, Android-, Web- ja useille pienille ohjelmaalustoille koodijoukon avulla. Tämä "kirjoita kerran, suorita useilla päätelaitteilla" -kehitysmalli ei ainoastaan paranna kehitystehokkuutta, vaan myös vähentää ylläpitokustannuksia. Nopea iteraatio ja kuumat päivitystoiminnot antavat sovellusten vastata nopeasti markkinoiden ja käyttäjien tarpeisiin ja säilyttää kilpailukykynsä.

Tämä artikkeli perustuuNetEase Yunxin IM uni-app SDKPohjalla opetamme sinulle kuinka integroida chat-keskusteluominaisuudet uni-app-projektiin.

1. Hankkeen valmistelu

Rekisteröi NetEase Yunxin -kehittäjätili: Ensin sinun on tehtäväNetEase Yunxin virallinen verkkosivustoRekisteröi kehittäjätili Internetissä ja luo sovellus sovellusavaimen ja salaisen avaimen hankkimiseksi.

Asenna uni-app kehitysympäristö: Lataa ja asenna HBuilderX, joka on uni-appin virallinen kehitystyökalu.

Integroi NetEase Cloud Trust SDK: Integroi NetEase Cloud Trust IM SDK uni-app -projektiin. Yleensä tämä saavutetaan lisäämällä SDK:n JavaScript-tiedostot projektiisi.

2. Alusta SDK ja kirjautumistodennus

Valmistelun jälkeen meidän on suoritettava alustustoiminnot varmistaaksemme, että SDK voi olla oikein ja vakaasti vuorovaikutuksessa NetEase Yunxinin taustapalveluiden kanssa.

Tämän prosessin aikana SDK suorittaa joukon valmisteluja, kuten lataa tarvittavat resurssit, muodostaa yhteyden palvelimeen, tarkistaa sovelluksen henkilöllisyyden jne. Vain kun SDK on alustettu onnistuneesti, sovelluksesi voi käyttää SDK:n tarjoamia eri toimintoja, kuten viestien lähettämistä ja vastaanottamista, käyttäjäistuntojen hallintaa jne.

Alustusvaiheet:

Ota NetEase Yunxin IM SDK osaksi uni-app-projektia.
Alusta SDK ja välitä sovellusavain.
Ota käyttöön käyttäjän kirjautumislogiikka ja hanki accessToken.

Esimerkki koodista:

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. Ystävänhallinta

Kun alustus on valmis, meidän on suoritettava perustoimenpiteet pikaviestitoiminnon toteuttamiseksi, joka sisältää käyttäjien välisten ystäväsuhteiden luomisen, hallinnan ja kyselyn. Näiden toimintojen avulla käyttäjät voivat helposti kutsua muita käyttäjiä liittymään sosiaaliseen piiriinsä ja hallita heidän ystäväsuhteitaan:

(1) Lisää ystäviä: Tämä saavutetaan kutsumalla SDK:n Add friend -liittymä.

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) Poista ystäviä: Tämä saavutetaan kutsumalla SDK:n ystävänpoistokäyttöliittymä.

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) Hanki ystävälista: Tämä saavutetaan kutsumalla SDK:n hanki kaverilista -liittymä.

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-toiminto

Seuraavaksi otamme käyttöön tärkeimmät chat-ominaisuudet, jotka sisältävät useita vaiheita, kuten viestien lähettämisen, vastaanottamisen ja viestien näyttämisen.

1. Lähetä tekstiviesti:

// 发送文本消息函数
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. Vastaanota viestejä

Viestien vastaanottaminen saavutetaan yleensä kuuntelemalla SDK:n tarjoamia tapahtumia. Tässä on esimerkki tekstiviestitapahtumien kuuntelusta:

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

Teknologian jakaminen