技術共有

ユニアプリを使用してチャット会話機能を迅速に統合するにはどうすればよいですか?

2024-07-08

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

モバイル インターネットの時代において、インスタント メッセージング (IM) 機能は多くのアプリに不可欠な要素となっています。しかし、インスタント メッセージング アプリを開発する場合、開発者はプラットフォームごとに個別のアプリケーションを開発するか、それとも別のアプリケーションを開発するかという難しい選択に直面することがよくあります。特定のプラットフォーム向けに限定的な開発を行う。 uni-app の出現は、この問題に対する効率的な解決策を提供します。 uni-app は、「一度書いたら、複数の端末で実行できる」というコンセプトにより、開発者にこれまでにない利便性をもたらします。

uni-app は、Vue.js に基づいてすべてのフロントエンド アプリケーションを開発するためのフレームワークであり、一連のコードを通じて iOS、Android、Web およびさまざまな小規模プログラム プラットフォームへの同時コンパイルをサポートします。この「一度書いたら複数の端末で実行できる」開発モデルにより、開発効率が大幅に向上するだけでなく、メンテナンスコストも削減されます。迅速なイテレーション機能とホット アップデート機能により、アプリケーションは市場やユーザーのニーズに迅速に対応し、競争力を維持できます。

この記事は以下に基づいて説明しますNetEase Yunxin IM ユニアプリ SDK基礎として、ユニアプリ プロジェクトにチャット会話機能を統合する方法を説明します。

1. プロジェクトの準備

  1. NetEase Yunxin 開発者アカウントを登録します。まず、次のことを行う必要があります。NetEase Yunxin 公式ウェブサイトインターネット上で開発者アカウントを登録し、アプリキーとシークレットキーを取得するアプリケーションを作成します。
  1. uni-app 開発環境のインストール: uni-app の公式開発ツールである HBuilderX をダウンロードしてインストールします。
  1. NetEase Cloud Trust SDK の統合: NetEase Cloud Trust IM SDK をユニアプリ プロジェクトに統合します。通常、これは SDK の JavaScript ファイルをプロジェクトに導入することによって実現されます。

2. SDKの初期化とログイン認証

準備作業が完了したら、SDK が NetEase Yunxin のバックエンド サービスと正しく安定して対話できるようにするために、初期化操作を実行する必要があります。

このプロセス中に、SDK は必要なリソースのロード、サーバーとの接続の確立、アプリケーションの ID の検証などの一連の準備を実行します。 SDK が正常に初期化された場合にのみ、アプリケーションはメッセージの送受信、ユーザー セッションの管理など、SDK が提供するさまざまな機能を使用できるようになります。

初期化手順:

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