Compartilhamento de tecnologia

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

Na era da Internet móvel, a função de mensagens instantâneas (IM) é uma parte indispensável de muitos aplicativos. No entanto, ao desenvolver aplicativos de mensagens instantâneas, os desenvolvedores muitas vezes enfrentam uma escolha difícil: desenvolver aplicativos separados para cada plataforma ou desenvolver aplicativos separados. desenvolver desenvolvimento limitado para uma determinada plataforma? O surgimento do uni-app fornece uma resposta eficiente para este problema. Com seu conceito de “escrever uma vez, executar em vários terminais”, o uni-app traz conveniência sem precedentes aos desenvolvedores.

uni-app é uma estrutura para desenvolver todos os aplicativos front-end baseados em Vue.js. Ele suporta compilação simultânea para iOS, Android, Web e várias plataformas de pequenos programas por meio de um conjunto de códigos. Este modelo de desenvolvimento "gravar uma vez, executar em vários terminais" não apenas melhora muito a eficiência do desenvolvimento, mas também reduz os custos de manutenção. As funções de iteração rápida e atualização dinâmica permitem que os aplicativos respondam rapidamente às necessidades do mercado e do usuário e permaneçam competitivos.

Este artigo será baseado emSDK de aplicativo único NetEase Yunxin IMComo base, ensinaremos como integrar recursos de conversação por chat no projeto uni-app.

1. Preparação do projeto

1. Registre uma conta de desenvolvedor NetEase Yunxin: primeiro, você precisaSite oficial da NetEase YunxinRegistre uma conta de desenvolvedor na Internet e crie um aplicativo para obter a App Key e a Secret Key.

1. Instale o ambiente de desenvolvimento uni-app: Baixe e instale o HBuilderX, que é a ferramenta oficial de desenvolvimento do uni-app.

1. Integre o NetEase Cloud Trust SDK: Integre o NetEase Cloud Trust IM SDK no projeto uni-app. Normalmente, isso é feito introduzindo os arquivos JavaScript do SDK em seu projeto.

2. Inicialize o SDK e faça login

Depois de concluir o trabalho de preparação, para garantir que o SDK possa interagir de maneira correta e estável com os serviços de back-end do NetEase Yunxin, precisamos realizar operações de inicialização.

Durante este processo, o SDK realizará uma série de preparativos, como carregar os recursos necessários, estabelecer conexão com o servidor, verificar a identidade da aplicação, etc. Somente quando o SDK for inicializado com sucesso seu aplicativo poderá usar as diversas funções fornecidas pelo SDK, como envio e recebimento de mensagens, gerenciamento de sessões de usuário, etc.

Etapas de inicialização:

1. Introduzir NetEase Yunxin IM SDK no projeto uni-app.
2. Inicialize o SDK e passe a chave do aplicativo.
3. Implemente a lógica de login do usuário e obtenha o accessToken.

Exemplo de código:

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. Gerenciamento de amigos

Após a conclusão da inicialização, precisamos realizar as ações básicas para implementar a função de mensagens instantâneas, que envolve o estabelecimento, gerenciamento e consulta de relações de amizade entre usuários. Através destas operações, os usuários podem facilmente convidar outros usuários para ingressar em seu círculo social e gerenciar seus relacionamentos de amizade:

(1) Adicionar amigos: Isso é feito chamando a interface de adição de amigos do 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) Excluir amigos: Isso é feito chamando a interface de exclusão de amigos do 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) Obtenha a lista de amigos: Isso é feito chamando a interface de obtenção da lista de amigos do 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. Função de bate-papo

A seguir, implementaremos os principais recursos de chat, que envolvem várias etapas, como envio, recebimento e exibição de mensagens.

1. Envie uma mensagem de texto:

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

O recebimento de mensagens geralmente é feito ouvindo eventos fornecidos pelo SDK. Aqui está um exemplo de escuta de eventos de mensagens de texto:

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

                    上一篇
                    下一篇