- 제품 소개
- 구매 가이드
- 다운로드 센터
- 시작하기
- 시나리오 솔루션
- How to intergrate TUIChat independently in Uniapp（Vue2 & Vue3）
- How to intergrate TUIChat independently in Web（Vue2 & Vue3）
- AI Chatbot
- End-to-end encrypted chat with Virgil
- 대규모 엔터테인먼트 협업 커뮤니티
- 라이브 룸 구축 가이드
- How to integrate Tencent IM with Salesforce
- How to integrate Tencent IM with Zendesk
- How to integrate chat widget to your Shopify online store
- Discord 구현 가이드
- IM을 게임에 통합하는 방법
- Flutter Avchatroom
- 클라이언트 APIs
- 서버 APIs
- Generating UserSig
- RESTful APIs
- RESTful API Overview
- RESTful API List
- Message Related
- Session Related
- Group Related
- User Management
- Global Mute Management
- Operations Management
- Chatbots
- Webhooks
- Webhook Overview
- Webhook Command List
- Online Status Webhooks
- Relationship Chain Webhooks
- One-to-One Message Webhooks
- Group Webhooks
- 그룹 생성 전 콜백
- After a Group Is Created
- Before Applying to Join a Group
- Before Inviting a User to a Group
- After a User Joins a Group
- After a User Leaves a Group
- 그룹 내 발언 전 콜백
- 그룹 내 발언 후 콜백
- 그룹 만원 후 콜백
- After a Group Is Disbanded
- 그룹 정보 변경 후 콜백
- 그룹 메시지 회수 후 콜백
- Webhook for Online and Offline Status of Audio-Video Group Members
- Webhook for Exceptions When Group Messages Are Sent
- 토픽 생성 전 콜백
- 토픽 생성 후 콜백
- 토픽 해산 후 콜백
- 토픽 프로필 수정 후 콜백
- Webhook Mutual Authentication Configuration Guide
- Chatbot webhooks
- 콘솔 가이드
- FAQ
- 협약 및 인증
- IM 정책
- 에러 코드
- 문의하기
- 제품 소개
- 구매 가이드
- 다운로드 센터
- 시작하기
- 시나리오 솔루션
- How to intergrate TUIChat independently in Uniapp（Vue2 & Vue3）
- How to intergrate TUIChat independently in Web（Vue2 & Vue3）
- AI Chatbot
- End-to-end encrypted chat with Virgil
- 대규모 엔터테인먼트 협업 커뮤니티
- 라이브 룸 구축 가이드
- How to integrate Tencent IM with Salesforce
- How to integrate Tencent IM with Zendesk
- How to integrate chat widget to your Shopify online store
- Discord 구현 가이드
- IM을 게임에 통합하는 방법
- Flutter Avchatroom
- 클라이언트 APIs
- 서버 APIs
- Generating UserSig
- RESTful APIs
- RESTful API Overview
- RESTful API List
- Message Related
- Session Related
- Group Related
- User Management
- Global Mute Management
- Operations Management
- Chatbots
- Webhooks
- Webhook Overview
- Webhook Command List
- Online Status Webhooks
- Relationship Chain Webhooks
- One-to-One Message Webhooks
- Group Webhooks
- 그룹 생성 전 콜백
- After a Group Is Created
- Before Applying to Join a Group
- Before Inviting a User to a Group
- After a User Joins a Group
- After a User Leaves a Group
- 그룹 내 발언 전 콜백
- 그룹 내 발언 후 콜백
- 그룹 만원 후 콜백
- After a Group Is Disbanded
- 그룹 정보 변경 후 콜백
- 그룹 메시지 회수 후 콜백
- Webhook for Online and Offline Status of Audio-Video Group Members
- Webhook for Exceptions When Group Messages Are Sent
- 토픽 생성 전 콜백
- 토픽 생성 후 콜백
- 토픽 해산 후 콜백
- 토픽 프로필 수정 후 콜백
- Webhook Mutual Authentication Configuration Guide
- Chatbot webhooks
- 콘솔 가이드
- FAQ
- 협약 및 인증
- IM 정책
- 에러 코드
- 문의하기
설명：
Chat UIKit은 Tencent Cloud IM SDK를 기반으로 하는 UI 컴포넌트 라이브러리로, 세션, 채팅, 관계 체인, 그룹, 음성/영상 통화 등의 기능을 포함한 일부 범용 UI 컴포넌트를 제공합니다.
UI 컴포넌트를 기반으로 블록을 쌓는 것처럼 자신의 비즈니스 로직을 빠르게 구축할 수 있습니다.
Chat UIKit의 컴포넌트는 UI 기능을 구현하는 동시에 IM SDK에 해당하는 인터페이스를 호출하여 IM 관련 로직과 데이터를 처리하므로 개발자는 Chat UIKit을 사용할 때 자신의 업무에만 집중하거나 필요에 따라 확장할 수 있습니다.
Example App
데모 실행
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의 계산 코드를 서버에 통합하고 App 지향 API를 제공하는 것이 가장 좋습니다. UserSig가 필요할 때 App은 동적 UserSig에 대한 요청을 서버에 보낼 수 있습니다. 자세한 내용은 서버에서 UserSig 생성을 참고하십시오.
3단계: 프로젝트 실행
# Launch the project$ cd examples/sample-chat$ npm run start
4단계: 첫 번째 메시지 전송
1. 프로젝트가 성공적으로 실행된 후 ‘+’ 아이콘을 클릭하여 세션을 생성합니다.
2. 입력란에 다른 사용자의 userID를 검색합니다.
3. 사용자 프로필 사진을 클릭하여 세션을 시작합니다.
4. 입력란에 메시지를 입력하고 "Enter"키를 누르면 전송됩니다.
예
아니오
문제 해결에 도움이 되었나요?