チャットアプリは、個人的およびビジネスコミュニケーションの両面で重要な役割を果たしています。人々がリアルタイムでつながり、情報を共有し、協力するためのシームレスな方法を提供します。
利用シーン
個人的なコミュニケーション
- つながりの維持：距離に関係なく、家族や友人と連絡を取り、最新情報を共有し、関係を維持
• インスタントメッセージング：従来のSMSより高速で対話的、テキスト、音声、ビデオに対応
ビジネスコラボレーション
- チームコミュニケーション：リアルタイムの討論、プロジェクト更新、フィードバックで生産性を向上
• リモートワーク：分散チームでの仮想会議、ファイル共有、共同作業に不可欠
カスタマーサポート
- 即時サポート：顧客にリアルタイムのヘルプとサポートを提供し、満足度とロイヤリティを向上
• チャットボット：AIを活用して一般的な問い合わせに対応し、24時間365日のサポートを提供
教育
- オンライン授業：学生と教師の交流、Q&Aセッション、課題提出を促進
• 学習グループ：学生が協力し、トピックについて議論し、リソースを共有
ソーシャル・エンターテインメント
- 趣味のグループ：共通の趣味や興味に基づくコミュニティでアイデアや経験を交換
• ライブインタラクション：ライブストリームやゲームコミュニティとリアルタイムで交流
環境要件
- React v18.0（v17.x非対応）
• TypeScript
• Node（v12.13.0以降、v17.0.0以前。Node.js公式LTSバージョン16.17.0推奨）
• npm（使用するNodeバージョンに対応したもの）
chat-uikit-reactの導入
ステップ1：プロジェクトの作成
npx create-react-app sample-chat --template typescript
cd sample-chat
ステップ2：chat-uikit-reactコンポーネントのインストール
npm install @tencentcloud/chat-uikit-react
ステップ3：chat-uikit-reactコンポーネントの組み込み
注意：コード内のSDKAppID、userID、userSigは未入力です。ステップ4で必要な情報を取得して置き換えてください。
[コード例は原文と同じ]
import React, { useEffect, useState } from 'react';
import { ChatSDK } from '@tencentcloud/chat';
import { TUIKit } from '@tencentcloud/chat-uikit-react';
import { TUILogin } from '@tencentcloud/tui-core';
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
export default function SampleChat() {
const [chat, setChat] = useState<ChatSDK>();
const init = () => {
const loginInfo = {
SDKAppID: 0,// Your SDKAppID. Get it from Step 4userID: 'xxx',// Your userID. Get it from Step 5// UserSig is a cipher for a user to log in to IM. It is the ciphertext generated by//encrypting information such as userID. Get it from Step 5userSig: 'xxx',// Your userSig. Get it from Step 5useUploadPlugin: true,
};
TUILogin.login(loginInfo).then(() => {
const { chat } = TUILogin.getContext();
setChat(chat);
}).catch(() => {});
}
useEffect(() => {
init();
}, [])
return (
<TUIKit chat={chat} language={'en'}></TUIKit>// language support en or zh
)
}
ステップ4：アプリケーションの作成
- Chatコンソールにログイン
- アプリケーションの作成をクリックし、名前を入力して作成
- 作成後、コンソール概要ページで新しいアプリケーションの状態確認が可能
ステップ5：userIDとuserSigの取得
- 対象アプリケーションタブをクリックし、アカウント管理ページでアカウントを作成
• IMコンソール > UserSigツールでuserSigを生成
ステップ6：プロジェクトの起動
App.tsxでSDKAppID、userID、userSigを置き換え、以下のコマンドを実行：
npm run start
注意事項：
• ステップ3での情報置き換えを確実に行うこと
• userIDとuserSigは対応関係にあること
• 起動失敗時は環境要件を確認
ステップ7：最初のメッセージ送信
- プロジェクト起動後、左側の+をクリックして1対1チャットを開始
- ステップ5で作成したuserIDを検索ボックスに入力しEnter
- メッセージを入力してEnterで送信
よくある質問
Q: UserSigとは？
A: IMへのログインに使用する暗号で、userIDなどの情報を暗号化して生成された文字列です。
Q: UserSigの生成方法は？
A: サーバーにUserSig計算コードを組み込み、プロジェクト用APIを提供します。必要時にプロジェクトがビジネスサーバーにリクエストを送信して動的なUserSigを取得します。