Quick Start (React)
VChatCloud에 가입하고 채팅방을 만들어보세요. 이 가이드에서는 회원가입부터 채팅방을 만들고, 채팅방을 실행하는 데 필요한 Channel Key를 확인하고, 내 채팅방을 실행하는 방법까지 안내합니다.
STEP 1. VChatCloud 회원가입
1. 회원가입 페이지 접속
VChatCloud 홈페이지 상단의 [무료 이용하기] 버튼을 클릭하여 회원가입 페이지로 이동합니다.
2. 가입 정보 입력
양식에 이메일, 이름, 비밀번호를 입력하고 약관 동의 후 회원가입 버튼을 클릭하세요.
3. 이메일 인증
가입한 이메일로 인증 메일이 발송됩니다. 메일 본문의 이메일 인증 버튼을 클릭하면 회원가입이 완료됩니다.
STEP 2. 채팅방 만들고 Channel Key 확인하기
회원가입을 완료했다면 이제 채팅방을 만들 차례입니다.
1. CMS 로그인
VChatCloud 홈페이지에서 [로그인] 버튼을 클릭하여 가입한 정보로 CMS에 로그인합니다.
2. 채팅방 만들기
로그인 후, 왼쪽 메뉴에서 채팅방 관리 > 채팅방 목록으로 이동한 뒤 채팅방 개설 버튼을 클릭하세요. 필요한 정보를 입력하고 생성 버튼을 누르면 채팅방이 만들어집니다.
3. Channel Key 복사하기
채팅방 목록에서 방금 만든 채팅방의 Channel Key를 복사하여 따로 메모해두세요. 이 키는 이후 STEP 3에서 채팅방을 실행할 때 필요합니다.
TIP
더 많은 기능이 궁금하신가요?
- 채팅방 운영: CMS에서 참여자를 관리하고 공지사항을 보내는 등 다양한 기능을 활용해 보세요.
- 내 서비스에 채팅 연동: REST API를 사용하면 당신의 서비스에 직접 채팅 기능을 연동하여 더 강력한 맞춤형 솔루션을 만들 수 있습니다.
STEP3. 소스 코드 작성 및 실행하기
준비사항
React UI Kit를 실행하기 위해서는 아래의 준비물이 필요합니다.
- Node.js
- npm (또는 사용하시는 패키지 매니저)
1. 채팅방 채널 키 복사
개설하신 채팅방의 Channel Key를 복사하여 따로 메모해주세요.
2-0. 코딩없이 실행하기
만약 커스터마이징이 필요하지 않은 경우라면 간단하게 iframe 방식을 사용해서 해당 채팅방을 사용하실 수 있습니다.
- 메인 홈페이지에서 데모화면 버튼을 클릭하고 여러 화면 중 복사하고자 하는 메뉴를 클릭하여
소스 코드 복사버튼을 클릭하여 따로 복사해주세요. - 메모장을 여신 후 복사한 내용을 붙여넣습니다. 메모장의
<iframe src='url' ...></iframe>에서 url부분에 있는channelKey를 변경합니다.channelKey를 변경하기 위해서는channelKey=VBrhzLZgGG-nAFo5CS7jp-20210802120142에서VBrhzLZgGG-nAFo5CS7jp-20210802120142부분을단계 1에서 복사한Channel Key로 변경해주세요.
- 해당 파일을
<파일명>.html(html 형식)로 저장합니다. 그 후 저장된 파일을 실행하면 접속하실 수 있습니다.
2. 프로젝트 생성
프로젝트를 생성 할 폴더에서 아래 명령어를 입력해 실행합니다.
타입스크립트를 사용하려면 --template 파라미터를 react-ts로 변경해 사용할 수 있습니다.
npm create vite@latest vchatcloud-react-project -- --template react명령어를 실행 한 뒤 framework선택에서 React를 선택해 새 프로젝트를 생성합니다. 그 후 프로젝트 폴더로 이동한 뒤 아래 명령어를 실행해서 @vchatcloud/react-ui-kit를 설치합니다.
cd vchatcloud-react-project
npm install @vchatcloud/react-ui-kit3. 파일 수정하기
index.html에 아래 내용을 추가합니다. head사이에 script태그를 2개 작성합니다.
<head>
<!-- ...기존 코드들 -->
<script src="https://www.vchatcloud.com/lib/e7lib-latest.min.js"></script>
</head>그 후 App.tsx에 아래 내용을 입력합니다. 단 필요한 값은 새로 대체하여 사용합니다.
roomId: 1단계에서 복사한Channel Key를 입력합니다.clientKey: 사용자끼리 중복되지 않는 고유한 키 값nickName: 사용자 닉네임
import { VChatCloudApp, ChannelUserGrade } from "@vchatcloud/react-ui-kit";
import { FC, useEffect, useRef } from "react";
const App: FC = () => {
const [roomId, clientKey, nickName, grade, userInfo] = [
"YOUR_ROOM_ID",
// clientKey는 원하는 값을 사용하면 되지만, 사용자끼리 중복되지 않도록 주의해주세요.
// 같은 clientKey로 로그인 시 기존에 로그인 된 사용자는 접속이 종료됩니다.
// 또는 `setRandomClientKey`함수를 불러와 사용할 수 있습니다.
"YOUR_CLIENT_KEY",
"YOUR_NICKNAME",
"user",
{ profile: 1 },
];
const privateContainer = useRef<HTMLDivElement>(null);
// private container 사용 시
useEffect(() => {
if (!privateContainer.current) return;
privateContainer.current.style.display = "none";
const observer = new MutationObserver(() => {
if (!privateContainer.current) return;
privateContainer.current.style.display =
privateContainer.current.children.length === 0 ? "none" : "block";
});
observer.observe(privateContainer.current, { childList: true });
return () => observer.disconnect();
}, []);
return (
<>
<div className="app" style={{ width: "100%", height: "100vh" }}>
<VChatCloudApp
clientKey={clientKey}
email="YOUR_EMAIL" // VChatCloud CMS계정 ID
grade={grade}
nickName={nickName}
privateContainer=".private-container" // querySelector 파라미터 또는 HTMLElement
roomId={roomId}
sessionType="parameter"
userInfo={userInfo}
// logoUrl="LOGO_IMG_URL"
// company="YOUR_COMPANY_NAME"
/>
</div>
{/* 비밀채팅용 wrapper */}
<div
className="app private-container"
ref={privateContainer}
style={{ width: "100%", height: "100vh" }}
/>
</>
);
};
export default App;4. 개발서버 실행하기
터미널에 아래 명령어를 실행 해 개발서버를 실행합니다.
npm run dev그 후 아래에 나타난 주소를 클릭해 개발서버에 접속합니다.