10분 만에 React를 사용하여 UIKit으로 채팅 앱 만들기

채팅 앱은 개인 및 전문적 커뮤니케이션에서 중요한 역할을 합니다. 사람들이 실시간으로 연결하고, 정보를 공유하며, 협업할 수 있는 원활한 방법을 제공합니다.

• 연결 유지: 가족 및 친구와 연락을 유지하고, 업데이트를 공유하며, 거리에 상관없이 관계를 유지합니다.

• 인스턴트 메시징: 기존 SMS보다 빠르고 대화형이며, 텍스트, 음성 및 비디오 옵션이 있습니다.

• 팀 커뮤니케이션: 실시간 토론, 프로젝트 업데이트 및 피드백으로 생산성을 높입니다.

• 원격 작업: 분산 팀에서 가상 회의, 파일 공유 및 협업 작업에 필수적입니다.

• 즉각적인 지원: 고객에게 실시간 도움과 지원을 제공하여 만족도와 충성도를 높입니다.

• 챗봇: AI를 사용하여 일반적인 질문을 처리하고 24/7 지원을 제공합니다.

• 온라인 수업: 학생-교사 상호 작용, Q&A 세션 및 과제 제출을 용이하게 합니다.

• 스터디 그룹: 학생들이 협력하고, 주제를 토론하며, 리소스를 공유할 수 있습니다.

• 관심 그룹: 공통의 취미나 관심사를 기반으로 커뮤니티에 참여하여 아이디어와 경험을 교환합니다.

• 실시간 상호 작용: 실시간으로 라이브 스트림 및 게임 커뮤니티와 소통합니다.

강력한 채팅 앱을 구축하면 다양한 시나리오에서 사용자 커뮤니케이션 경험을 향상시킬 수 있습니다. 대화, 채팅, 그룹 및 완전한 UI를 사용하여 웹에서 빠르게 구축하고 싶으신가요? React.js와 Tencent RTC를 사용하여 10분 안에 실시간 채팅 앱을 만드는 단계별 가이드를 따라하세요!

• React v18.0 (17.x 버전은 지원되지 않습니다.)

• TypeScript

• Node (Node 버전은 12.13.0 이상, 17.0.0 이하여야 합니다. Node.js의 공식 LTS 버전 16.17.0을 권장합니다.)

• npm (사용 중인 Node 버전과 일치하는 버전을 사용하세요.)

새 React 프로젝트를 생성합니다. TS 템플릿을 사용할지 여부를 선택할 수 있습니다.

npx create-react-app sample-chat --template typescript jsx

프로젝트가 생성된 후 프로젝트 디렉토리로 이동합니다.

cd sample-chat jsx

npm을 사용하여 chat-uikit-react를 다운로드하고 프로젝트에서 사용합니다. 또한 GitHub에서 관련 오픈 소스 코드도 제공되므로 이를 기반으로 자체 구성 요소 라이브러리를 개발할 수 있습니다.

npm install @tencentcloud/chat-uikit-react jsx

참고:

• 다음 코드에서 SDKAppID, userID 및 userSig가 입력되지 않았습니다. 4단계에서 필요한 정보를 획득하고 그에 따라 교체하세요.

• npm 통합 방법

• 소스 코드 통합 방법

• App.tsx의 내용을 교체하거나 새 구성 요소를 만들어 포함할 수 있습니다.

`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,// 4단계에서 얻은 SDKAppID입니다.userID: 'xxx',// 5단계에서 얻은 userID입니다.// UserSig는 사용자가 IM에 로그인하기 위한 암호입니다. userID와 같은 정보를 암호화하여 생성된 암호문입니다. 5단계에서 얻습니다.userSig: 'xxx',// 5단계에서 얻은 userSig입니다.useUploadPlugin: true, }; TUILogin.login(loginInfo).then(() => { const { chat } = TUILogin.getContext(); setChat(chat); }).catch(() => {}); } useEffect(() => { init(); }, [])

return ( <TUIKit chat={chat} language={'en'}></TUIKit>// 영어 또는 중국어 지원 ) } jsx`

1. Chat 콘솔에 로그인합니다.

2. 애플리케이션 생성을 클릭하고 애플리케이션 이름을 입력한 다음 생성을 클릭합니다.

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

대상 애플리케이션 탭을 클릭하고 계정 관리 페이지로 이동하여 계정을 생성하고 userID를 획득합니다.

!https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/d049465311ea11efbf645254007bbd8c.png

IM 콘솔 > UserSig 도구로 이동하여 userID를 입력하여 userSig를 생성하고 userSig를 복사합니다. userSig에 대한 자세한 내용은 UserSig 생성을 참조하세요.

App.tsx에서 SDKAppID, userID 및 userSig를 교체한 다음 다음 명령을 실행합니다.

npm run start jsx

참고:

1. 3단계에서 SDKAppID, userID 및 userSig가 성공적으로 교체되었는지 확인하세요. 그렇지 않으면 프로젝트가 비정상적으로 작동할 수 있습니다.

2. userID는 userSig에 해당합니다. 자세한 내용은 UserSig 생성을 참조하세요.

3. 프로젝트가 시작되지 않으면 환경 요구 사항이 충족되었는지 확인하세요.

UserSig란 무엇인가요?

UserSig는 IM에 로그인할 수 있는 암호입니다. userID와 같은 정보를 암호화하여 생성된 암호문입니다.

UserSig는 어떻게 생성하나요?

UserSig 발급 방법은 UserSig의 계산 코드를 서버에 통합하고 프로젝트를 위한 API를 제공하는 것입니다. UserSig가 필요할 때 프로젝트는 비즈니스 서버에 요청을 보내 동적 UserSig를 얻습니다. 자세한 내용은 서버에서 UserSig를 생성하는 방법을 참조하세요.