チャットアプリは、個人的およびビジネスコミュニケーションの両面で重要な役割を果たしています。人々がリアルタイムでつながり、情報を共有し、協力するためのシームレスな方法を提供します。

利用シーン

個人的なコミュニケーション

つながりの維持：距離に関係なく、家族や友人と連絡を取り、最新情報を共有し、関係を維持
• インスタントメッセージング：従来の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を取得します。