Quick Start (React)
아래 내용을 따라하면 기본적인 채팅방 데모를 실행하여 나만의 채팅방을 만들 수 있습니다. VChatCloud CMS에서는 생성된 채팅방의 참여자를 관리하거나 공지사항을 발송하는 등 다양한 운영 기능을 활용할 수 있습니다. 더 나아가 VChatCloud의 REST API를 이용하면, 고객님의 서비스에 채팅 기능을 직접 연동하고 사용자 관리, 메시지 전송 등 세부 기능을 제어하여 더욱 강력하고 유연한 맞춤형 채팅 솔루션을 구축할 수 있습니다.
STEP 1. 무료 회원가입하기
1. 홈페이지
VChatCloud 첫 페이지로 이동해서 상단의 무료 이용하기 버튼을 클릭합니다.
2. 가입페이지
무료 이용 신청 양식에 이메일, 이름, 비밀번호, 비밀번호 확인을 입력하시고 약관에 동의 하신 후 회원가입을 완료해주세요.
3. 가입 완료
가입하신 이메일 주소로 인증 확인 메일이 발송됩니다.
4. 이메일 확인
인증 확인 메일 본문에 이메일 인증 버튼을 클릭하시면 회원가입 절차가 완료됩니다.
STEP 2. 채팅방 개설하기
1. CMS 로그인
VChatCloud 첫 페이지 상단의 로그인 버튼을 클릭합니다. 회원 가입 시 등록한 이메일, 비밀번호로 로그인을 해주세요.
2. CMS 채팅방 개설
좌측 메뉴 채팅방 관리 > 채팅방 목록을 클릭합니다. 채팅방 개설 버튼을 통해 개설 시 필요한 정보들을 입력 후 생성 버튼을 클릭합니다.
3. CMS 채팅방 완료 확인
채팅방 목록 화면에 노출이 되었다면, 정상적으로 채팅방이 만들어졌습니다.
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-kit
2
3
3. 파일 수정하기
index.html
에 아래 내용을 추가합니다. head
사이에 script
태그를 2개 작성합니다.
<head>
<!-- ...기존 코드들 -->
<script src="https://www.vchatcloud.com/lib/e7lib-latest.min.js"></script>
</head>
2
3
4
그 후 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;
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
4. 개발서버 실행하기
터미널에 아래 명령어를 실행 해 개발서버를 실행합니다.
npm run dev
그 후 아래에 나타난 주소를 클릭해 개발서버에 접속합니다.