クイックスタート（Web）

Recent Pages

クイックスタート（Web）

最終更新日:2024-04-11 16:20:42

﻿Chat UIKit React﻿
説明：
Chat UIKitはTencent Cloud IM SDKをベースにしたUIコンポーネントライブラリであり、汎用UIコンポーネント及び会話、チャット、リレーションシップチェーン、グループ、オーディオビデオ通話などの機能を提供します。
UIコンポーネントを使用すれば、自分の業務ロジックを積み木を組み合わせるように素早く構築できます。
Chat UIKitが提供したコンポーネントは、UI機能を実装すると同時に、IM SDKに応じてインスタンスを呼出して、IMに関するロジックとデータ処理も実装します。そのため、開発者がChat UIKitを使用する時、自分の業務とカスタム拡張だけに集中するだけです。
Example App
チャット機能をデモするプログラムをご用意しておりますので、公式サイトでこれらのdemoを参照できます。また、GitHubで関連のオープンソースコードも公開しています。
﻿
﻿
﻿
Demoのクイックスタート
ステップ1：ソースコードのダウンロード
# Run the code in CLI
$ git clone https://github.com/TencentCloud/chat-uikit-react
# Go to the project  
$ cd chat-uikit-react
# Install dependencies of the demo
$ npm install && cd examples/sample-chat && npm install
ステップ2：demoの設定
1. examples/sample-chatプロジェクトを開き、./examples/sample-chat/src/debug/GenerateTestUserSig.jsパスでGenerateTestUserSig.jsファイルに進みます。
2. GenerateTestUserSig.jsファイルでSDKAPPIDとSECRETKEYを設定します。具体的な値はIMコンソールから取得してください。対象アプリケーションカードをクリックし、設定ページに進みます。
﻿
﻿
3. Basic InformationエリアでDisplay keyをクリックし、キーの情報をコピーしてGenerateTestUserSigファイルに保存します。
ご注意：
ここで説明するUserSigの作成は、クライアントのソースコードでSECRETKEYを設定する方法を使用します。この方法では、逆コンパイルによってSECRETKEYがハックされる可能性が大きいです。キーが漏洩すると、攻撃者はご利用中のTencent Cloudのトラフィックを盗用できます。そのためこの方法は、ローカルでのDemoクイックスタートおよび機能デバッグにのみ適します。
UserSigの正しい発行方法として、UserSigの演算コードをご利用中のサーバーに集約し、Appのインターフェースを提供し、UserSigを必要とする場合、ご利用中のAppから業務サーバーにリクエストを送信し動的UserSigの取得を要求します。詳しくは、サーバーでのUserSig新規作成をご参照ください。
ステップ3：プロジェクトの起動
# Launch the project
$ cd examples/sample-chat
$ npm run start
ステップ4:初メッセージの送信
1. プロジェクトを正常に起動した後、「+」アイコンをクリックし、会話を作成します。
2. 入力ボックスで他のユーザーのuserIDを検索します。
3. ユーザープロファイルフォトをクリックして会話を開始します。
4. 入力ボックスにメッセージを入力し、「enter」キーを押して送信します。
﻿
﻿
Quick Links
Demo App
Client API
Free Demos
FAQ
GitHub Source
Generating UserSig