기술나눔

uni-app을 사용하여 채팅 대화 기능을 빠르게 통합하는 방법은 무엇입니까?

2024-07-08

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

모바일 인터넷 시대에 IM(인스턴트 메시징) 기능은 많은 앱에서 없어서는 안될 부분입니다. 그러나 인스턴트 메시징 앱을 개발할 때 개발자는 플랫폼별로 별도의 애플리케이션을 개발할지, 아니면 다른 앱을 개발할지 고민하는 경우가 많습니다. 특정 플랫폼에 대한 제한된 개발을 개발합니까? 유니앱의 등장은 이러한 문제에 대한 효율적인 해답을 제시하고 있습니다. "한 번 작성하면 여러 터미널에서 실행"이라는 개념을 통해 uni-app은 개발자에게 전례 없는 편리함을 제공합니다.

uni-app은 Vue.js를 기반으로 모든 프런트엔드 애플리케이션을 개발하기 위한 프레임워크로, 코드 세트를 통해 iOS, Android, 웹 및 다양한 소규모 프로그램 플랫폼에 대한 동시 컴파일을 지원합니다. 이 "한 번 작성하고 여러 터미널에서 실행"하는 개발 모델은 개발 효율성을 크게 향상시킬 뿐만 아니라 유지 관리 비용도 절감합니다. 신속한 반복 및 핫 업데이트 기능을 통해 애플리케이션은 시장과 사용자 요구에 신속하게 대응하고 경쟁력을 유지할 수 있습니다.

이 기사는 다음을 기반으로 작성됩니다.NetEase Yunxin IM 유니앱 SDK기본적으로 유니앱 프로젝트에 채팅 대화 기능을 통합하는 방법을 알려드립니다.

1. 프로젝트 준비

  1. NetEase Yunxin 개발자 계정 등록: 먼저 다음을 수행해야 합니다.NetEase Yunxin 공식 홈페이지인터넷에 개발자 계정을 등록하고 앱 키와 비밀 키를 얻기 위한 애플리케이션을 만듭니다.
  1. uni-app 개발 환경 설치: uni-app의 공식 개발 도구인 HBuilderX를 다운로드하여 설치합니다.
  1. NetEase Cloud Trust SDK 통합: Uni-app 프로젝트에 NetEase Cloud Trust IM SDK를 통합합니다. 일반적으로 이는 SDK의 JavaScript 파일을 프로젝트에 도입하여 수행됩니다.

2. SDK 초기화 및 로그인 인증

준비 작업을 완료한 후 SDK가 NetEase Yunxin의 백엔드 서비스와 정확하고 안정적으로 상호 작용할 수 있도록 초기화 작업을 수행해야 합니다.

이 과정에서 SDK는 필요한 리소스 로딩, 서버와의 연결 설정, 애플리케이션의 신원 확인 등 일련의 준비를 수행합니다. SDK가 성공적으로 초기화되어야 애플리케이션에서 메시지 보내기 및 받기, 사용자 세션 관리 등 SDK가 제공하는 다양한 기능을 사용할 수 있습니다.

초기화 단계:

  1. Uni-app 프로젝트에 NetEase Yunxin IM SDK를 도입합니다.
  2. SDK를 초기화하고 앱 키를 전달합니다.
  3. 사용자 로그인 논리를 구현하고 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. 친구 관리

초기화가 완료된 후에는 사용자 간의 친구 관계 설정, 관리 및 쿼리를 포함하는 인스턴트 메시징 기능을 구현하기 위한 기본 작업을 완료해야 합니다. 이러한 작업을 통해 사용자는 쉽게 다른 사용자를 자신의 소셜 서클에 가입하도록 초대하고 친구 관계를 관리할 수 있습니다.

(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