• UIKit
  • SDK
  • サーバー API
Chat/
SDK/
React Native/
SDK
  • Run Demo
  • SDK の統合
  • 初期化
  • ログインとログアウト
  • メッセージ
    • メッセージの概要
    • メッセージ送信
    • メッセージの受信
    • 過去のメッセージ
    • メッセージ転送
    • メッセージの変更
    • メッセージ挿入
    • メッセージ削除
    • メッセージをクリア
    • メッセージの取り消し
    • オンラインメッセージ
    • 既読レシート
    • クエリーメッセージ
    • グループ @ メッセージ
    • ターゲットグループメッセージ
    • 通知のサイレントモード
    • メッセージ拡張
  • グループ
    • Overview
    • グループ管理
    • グループプロファイル
    • グループメンバーの管理
    • グループメンバープロファイル
    • グループプロパティのカスタマイズ
    • コミュニティ管理
  • ユーザー
    • ユーザープロファイル
    • 友達管理
    • 友達リスト
    • ブラックリスト
  • オフラインプッシュ
    • オフラインプッシュ
  • ローカル検索
    • メッセージ検索
    • 友達を検索
    • グループの検索
    • グループメンバーの検索
  • シグナリング
    • シグナリング管理
  • Changelog
  • Guideline for Beginners
  • コンソールガイド
    • アプリケーションの作成とアップグレード
    • 基本設定
    • 機能設定
    • アカウント管理
    • グループ管理
    • コールバック設定
  • 製品紹介
    • メッセージ管理
      • シングルチャットメッセージ
      • メッセージの保存
      • オフラインプッシュ
      • グループメッセージ
      • メッセージフォーマット
    • アカウントシステム
      • ログイン認証
      • オンライン状態管理
    • グループ関連
      • グループシステム
      • グループ管理
    • ユーザープロファイルとリレーションシップチェーン
      • 資料管理
      • リレーションシップチェーン管理
  • 購入ガイド
    • 課金の概要
    • 価格
  • エラーコード

Run Demo

ここでは、主にTencent CloudのInstant Messaging(IM)Demo(React Native)を素早く実行する方法をご紹介します。

環境要件


バージョン
React Native
0.63.4バージョン以降
Android
Android Studio 3.5以降のバージョン。Appの要件はAndroid 4.1以降のバージョンのデバイスです。
iOS
Xcode 11.0以降のバージョン。プロジェクトに有効な開発者署名を設定済みであることを確認してください。

前提条件

Tencent Cloudアカウントの登録を行い、実名認証が完了済みであること。

その1:テストユーザーの作成

IMコンソールでご自分のアプリケーションを選択し、左側ナビゲーションバーで支援ツール->UserSig生成&検証の順にクリックし、2つのUserIDおよびそれに対応するUserSigを作成します。UserID署名(Key)UserSigの3つをコピーし、その後のログインで使用します。
説明:
このアカウントは開発テストのみに使用します。アプリケーションのリリース前のUserSigの正しい発行方法は、サーバーで生成し、Appのインターフェース向けに提供する方法となります。UserSigが必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。




その2:React Native SDKの統合

前提条件

React Nativeプロジェクトの作成が完了しているか、またはベースになるReact Nativeプロジェクトがすでにあること。

統合の手順

IM SDKのインストール

次のコマンドを使用して、React Native IM SDKの最新バージョンをインストールします。コマンドラインで次を実行します。
// npm
npm install react-native-tim-js

// yarn
yarn add react-native-tim-js

SDKの初期化完了

initSDKを呼び出して、SDKの初期化を完了します。sdkAppIDを渡します。
import { TencentImSDKPlugin, LogLevelEnum } from 'react-native-tim-js';

TencentImSDKPlugin.v2TIMManager.initSDK(
sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integrating
loglevel: LogLevelEnum.V2TIM_LOG_DEBUG, // Log
listener: V2TimSDKListener(),
);
この手順ではIM SDKにいくつかのリスナーをマウントすることができます。これには主に、ネットワーク状態およびユーザー情報の変更などが含まれます。詳細については、このドキュメントをご参照ください。

テストユーザーのログイン

1. この時点で、最初にコンソール上で作成したテストアカウントを使用して、ログイン検証を完了することが可能です。
2. TencentImSDKPlugin.v2TIMManager.loginメソッドを呼び出し、テストアカウントにログインします。戻り値res.codeが0であれば、ログインは成功です。
import { TencentImSDKPlugin } from 'react-native-tim-js';
const res = await TencentImSDKPlugin.v2TIMManager.login(
userID: userID,
userSig: userSig,
);
説明:
このアカウントは開発テストのみに使用します。アプリケーションのリリース前のUserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供する方法となります。UserSigが必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。

メッセージの送信

ここでは、テキストメッセージの送信を例に挙げます。そのフローは次のとおりです:
1. createTextMessage(String)を呼び出してテキストメッセージを作成します。
2. 戻り値に基づいて、メッセージIDを取得します。
3. sendMessage()を呼び出して、このIDのメッセージを送信します。receiverには、その前に作成した別のテストアカウントIDを入力できます。シングルチャットメッセージを送信する場合はgroupIDの入力は不要です。
サンプルコード:
import { TencentImSDKPlugin } from 'react-native-tim-js';

const createMessage =
await TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.createTextMessage("The text to create");

const id = createMessage.data!.id!; // The message creation ID

const res = await TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.sendMessage(
id: id, // Pass in the message creation ID to
receiver: "The userID of the destination user",
groupID: "The groupID of the destination group",
);
説明:
送信に失敗した場合は、sdkAppIDが知らない人宛てのメッセージ送信をサポートしていないことが原因の可能性があります。コンソールで有効にしてからテストに使用してください。
このリンクをクリックして、フレンドリレーションシップチェーンのチェックを無効にしてください。

セッションリストの取得

前の手順でテストメッセージの送信が完了しましたので、別のテストアカウントでログインし、セッションリストをプルできるようになりました。
セッションリストの取得には次の2つの方法があります:
1. 長時間接続コールバックを監視し、セッションリストをリアルタイムに更新します。
2. APIをリクエストし、ページごとに一括でセッションリストを取得します。
一般的なユースケースは次のようなものです:
アプリケーションの起動後すぐにセッションリストを取得し、その後は長時間接続を監視して、セッションリストの変更をリアルタイムに更新します。
セッションリストの一括リクエスト
セッションリストを取得するためにはnextSeqを保守し、現在の位置を記録する必要があります。
import { useState } from "react";
import { TencentImSDKPlugin } from "react-native-tim-js";

const [nextSeq, setNextSeq] = useState<string>("0");

const getConversationList = async () => {
const count = 10;
const res = await TencentImSDKPlugin.v2TIMManager
.getConversationManager()
.getConversationList(count, nextSeq);
setNextSeq(res.data?.nextSeq ?? "0");
};
この時点で、前の手順で別のテストアカウントを使用して送信したメッセージのセッションを見ることができるようになりました。
長時間接続の監視によるセッションリストのリアルタイム取得
この手順では、先にSDKにリスナーをマウントしてからコールバックイベントを処理し、UIを更新する必要があります。
1. リスナーをマウントします。
import { TencentImSDKPlugin } from "react-native-tim-js";

const addConversationListener = () => {
TencentImSDKPlugin.v2TIMManager
.getConversationManager()
.addConversationListener({
onNewConversation: (conversationList) => {
// new conversation created callback
_onConversationListChanged(conversationList);
},
onConversationChanged: (conversationList) => {
// conversation changed callback
_onConversationListChanged(conversationList);
},
});
};
2. コールバックイベントを処理し、最新のセッションリストをインターフェース上に表示します。
const _onConversationListChanged = (list) => {
// you can use conversation list to update UI
};

メッセージの受信

Tencent Cloud IM React Native SDKによるメッセージの受信には2つの方法があります。
1. 長時間接続コールバックを監視し、メッセージの変更をリアルタイムに取得し、メッセージ履歴リストを更新してレンダリングします。
2. APIをリクエストし、ページごとに一括でメッセージ履歴を取得します。
一般的なユースケースは次のようなものです。
1. インターフェースが新しいセッションに入ると、まず一定量のメッセージ履歴を一括でリクエストし、メッセージ履歴リストの表示に用います。
2. 長時間接続を監視し、新しいメッセージをリアルタイムに受信してメッセージ履歴リストに追加します。
メッセージ履歴リストの一括リクエスト
ページごとに取得するメッセージ数が多すぎると取得速度に影響しますので、多すぎてはなりません。20通前後に設定することをお勧めします。
次のリクエストの際に使用できるよう、現在のページ数を動的に記録しなければなりません。
サンプルコードは次のとおりです:
import { TencentImSDKPlugin } from "react-native-tim-js";

const getGroupHistoryMessageList = async () => {
const groupID = "";
const count = 20;
const lastMsgID = "";
const res = await TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.getGroupHistoryMessageList(groupID, count, lastMsgID);
const msgList = res.data ?? [];
// here you can use msgList to render your message list
};
長時間接続の監視による新メッセージのリアルタイム取得
メッセージ履歴リストを初期化すると、新しいメッセージは長時間接続V2TimAdvancedMsgListener.onRecvNewMessageから受信します。
onRecvNewMessageコールバックがトリガーされると、必要に応じて新しいメッセージをメッセージ履歴リストに追加することができます。
リスナーをバインドするサンプルコードは次のとおりです:
import { TencentImSDKPlugin } from "react-native-tim-js";

const adVancesMsgListener = {
onRecvNewMessage: (newMsg) => {
_onReceiveNewMsg(newMsg);
/// ... other listeners related to message
},
};

const addAdvancedMsgListener = () => {
TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.addAdvancedMsgListener(adVancesMsgListener);
};
この時点で、IMモジュールの開発は基本的に完了し、メッセージの送受信や様々なセッションに入ることが可能になりました。 続いて、グループ、ユーザープロファイル、リレーションシップチェーン、オフラインプッシュ、ローカル検索などの関連機能の開発を完了することができます。詳細については、SDK APIドキュメントをご参照ください。

よくあるご質問

demoを実行するとUndefined symbols for architecture x86_64 [duplicate]が表示されます。どうすればいいですか?

ドキュメントをご参照ください。

demoを実行するとFailed to resolve: react-native-0.71.0-rc.0-debugが表示されます。どうすればいいですか?

ドキュメントをご参照ください。