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를 입력하고, 대화를 열어 채팅합니다.
주의:
설명:
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를 입력하여 채팅 페이지로 들어갑니다.
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 4userID: 'test-user1', // Login UserIDuserSig: '', // 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 zhreturn (<TUIKit language={'en'}><TUIChat/></TUIKit>)}
1. TUIKit를 자신의 프로젝트의 src 파일 디렉터리로 복사합니다.
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 SDKAppIDuserID: 'test-user1', // Login UserIDuserSig: '', // 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 zhreturn (<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
, userID
및 userSig
이 모두 성공적으로 교체되었는지를 확인하십시오. 교체되지 않은 경우 프로젝트 이상이 발생하게 됩니다.2.
userID
와 userSig
은 일대일 대응 관계이며, 자세한 내용은 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만 지원됩니다.