React

적용 시나리오

Web & H5 플랫폼은 부동산 중개 상담, 전자상거래 온라인 고객 서비스, 원격 보험금 청구 평가 등 시나리오에서 개인 메시징(1V1) 또는 그룹 채팅(Group)을 별도로 통합합니다.


개발 환경 요구사항

React ≥ v18.0(17.x 버전 지원 안 됨)
TypeScript
node(12.13.0 ≤ node 버전 ≤ 17.0.0, Node.js 공식 LTS 버전 16.17.0 추천)
npm(node 버전과 매칭되는 버전)

chat-uikit-react 통합

단계 1: 프로젝트 생성

1. 하나의 새로운 React 프로젝트를 생성하며, ts 템플릿을 사용할지 여부를 자체로 선택할 수 있습니다.
npx create-react-app sample-chat --template typescript
2. 프로젝트 생성 완료 후 프로젝트가 위치한 디렉터리로 전환합니다.
cd sample-chat

단계 2: chat-uikit-react 컴포넌트 다운로드

npm 방식을 통해 chat-uikit-react를 다운로드하여 프로젝트에서 사용하며, 또한 GitHub에서도 관련 오픈 소스 코드가 제공되므로 이를 기반으로 당신의 컴포넌트 라이브러리를 개발할 수 있습니다.
npm install @tencentcloud/chat-uikit-react

단계 3: chat-uikit-react 컴포넌트를 가져와서 userID / groupID를 입력하고, 대화를 열어 채팅합니다.

주의:
아래 코드에는 SDKAppID, userIDuserSig이 기입되지 않아 단계 4에서 관련 정보를 획득한 후 교체해야 합니다.
설명:
conversationID: 대화 ID. 대화 ID 구성 방식:
C2C${userID}(1대1 채팅)
GROUP${groupID}(그룹 채팅)
그룹 채팅에 관하여:
API [createGroup](https://web.sdk.qcloud.com/im/doc/chat-engine/ITUIGroupService.html#createGroup !7a98f97b561db02dacd13003fe30cc3d)을 호출함으로써 groupID를 획득할 수 있습니다.
라이브 방송 그룹인 경우, API joinGroup을 호출하여 그룹에 가입해야만 채팅할 수 있습니다.
채팅 들어가기
API switchConversation을 호출함으로써 conversationID를 입력하여 채팅 페이지로 들어갑니다.
npm 통합 방식
소스 코드 통합 방식
App.tsx의 콘텐츠를 교체하거나 하나의 새로운 컴포넌트를 생성하여 가져올 수 있습니다.
import React, { useEffect } from 'react';
import { TUIKit, TUIChat } from '@tencentcloud/chat-uikit-react';
import { TUILogin } from '@tencentcloud/tui-core';
import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';

const config = {
SDKAppID: 0, // Your SDKAppID, Get it from Step 4
userID: 'test-user1', // Login UserID
userSig: '', // Your userSig
}
export default function SampleChat() {
const init = () => {
TUILogin.login({
...config,
useUploadPlugin: true
}).then(() => {
openChat();
}).catch(() => {});
}

const openChat = () => {
// 1v1 chat: conversationID = `C2C${userID}`
// group chat: conversationID = `GROUP${groupID}`
const conversationID = '';
TUIConversationService.switchConversation(conversationID);
};

useEffect(() => {
init();
}, []);
// language support en or zh
return (
<TUIKit language={'en'}>
<TUIChat/>
</TUIKit>
)
}
1. TUIKit를 자신의 프로젝트의 src 파일 디렉터리로 복사합니다.
macOS 측
Windows 측
mkdir -p ./src/TUIKit && rsync -av ./node_modules/@tencentcloud/chat-uikit-react/ ./src/TUIKit
xcopy .\node_modules\@tencentcloud\chat-uikit-react .\src\TUIKit /i /e
2. App.tsx의 콘텐츠를 교체하거나 하나의 새로운 컴포넌트를 생성하여 가져올 수 있습니다.
import React, { useEffect, useState } from 'react';
import { TUILogin } from '@tencentcloud/tui-core';
import { TUIKit, TUIChat } from './TUIKit/index';
import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";

const config = {
SDKAppID: 0, // Your SDKAppID
userID: 'test-user1', // Login UserID
userSig: '', // Your userSig
}
export default function SampleChat() {
const init = () => {
TUILogin.login({
...config,
useUploadPlugin: true
}).then(() => {
openChat();
}).catch(() => {});
}

const openChat = () => {
// 1v1 chat: conversationID = `C2C${userID}`
// group chat: conversationID = `GROUP${groupID}`
const conversationID = '';
TUIConversationService.switchConversation(conversationID);
};
useEffect(() => {
init();
}, []);
// language support en or zh
return (
<TUIKit language={'en'}>
<TUIChat/>
</TUIKit>
)
}


단계 4: 애플리케이션 생성

1. Chat Console에 로그인합니다.
2. ‘Create Application’를 클릭하고 애플리케이션 이름을 입력한 다음 ‘Create’를 클릭합니다.

3. 생성이 완료되면 콘솔 개요 페이지에서 새 애플리케이션의 상태, 서비스 버전, SDKAppID, 생성 시간, 태그, 만료 시간을 볼 수 있습니다.


단계 5: userID 및 userSig 획득

userID
위에서 생성한 Application을 클릭하여 들어가면 왼쪽 사이드바에서 Chat 제품 입구를 볼 수 있으며, 클릭하여 들어갑니다.
Chat 제품 서브페이지로 들어간 후 Users를 클릭하여 사용자 관리 페이지로 들어갑니다.
Create account을 클릭하면 계정 정보 입력창이 뜹니다. 일반 회원인 경우, General 유형을 추천드립니다.
더 나은 메시지 송수신 등 기능을 경험하기 위해 2개의 userID를 생성하는 것이 좋습니다.

userSig, 콜솔에서 제공하는 개발 툴을 이용하여 실시간으로 생성할 수 있습니다. 개발 툴을 이용하시려면 Chat Console > Development Tools > UserSig Tools > Signature (UserSig) Generator 를 클릭하십시오.


단계 6: 프로젝트 시작

App.tsx의 SDKAppID, userID, userSig를 교체한 다음과 같은 명령을 실행합니다.
npm run start
주의:
1. 단계 3의 코드 중 SDKAppID, userIDuserSig이 모두 성공적으로 교체되었는지를 확인하십시오. 교체되지 않은 경우 프로젝트 이상이 발생하게 됩니다.
2. userIDuserSig은 일대일 대응 관계이며, 자세한 내용은 UserSig 생성을 참고하시기 바랍니다.
3. 프로젝트 시작이 실패하면 개발 환경 요구사항을 충족하는지 여부를 확인하십시오.

단계 7: 첫 번째 메시지 보내기

입력창에 메시지를 입력하고 enter 키를 클릭하여 발송합니다.


자주 받는 질문들

UserSig란 무엇입니까?

UserSig은 사용자 Chat에 로그인하기 위한 비밀번호로 본질적으로는 UserID 등 정보에 대한 암호화를 통해 얻은 암호문입니다.

UserSig을 어떻게 생성합니까?

UserSig 발급 방식은 UserSig의 컴퓨팅 코드를 당신의 서버 측에 통합하고 프로젝트 지향의 인터페이스를 제공하며, UserSig이 필요할 때 프로젝트에서 업무 서버로 요청을 개시하여 동적 UserSig을 획득하는 것입니다. 자세한 내용은 서버 측 UserSig 생성을 참고하시기 바랍니다.
주의:
여기서 예시된 코드는 클라이언트 코드에 SECRETKEY를 구성하여 UserSig을 획득하는 솔루션을 채택하였으며, 이 솔루션에서 SECRETKEY는 역컴파일에 의해 쉽게 해독되며, 암호키가 유출되면 공격자가 당신의 Tencent Cloud 트래픽을 도용할 수 있으므로, 이 방법은 로컬 실행 및 기능 디버깅에만 적용됩니다. 정확한 UserSig 발급 방식은 위의 내용을 참고하십시오.

react 17.x 버전이 지원됩니까?

현재 17.x 버전은 지원되지 않고 React ≥ v18.0만 지원됩니다.

참고 문서

UIKit 관련:

더 많은 기능을 구현하려면 ChatEngine API 문서를 참고하십시오.