VChatCloud 개발자센터

한국어

한국어

Appearance

Quick Start (React) ​

아래 내용을 따라하면 기본적인 채팅방 데모를 실행하여 나만의 채팅방을 만들 수 있습니다. VChatCloud CMS에서는 생성된 채팅방의 참여자를 관리하거나 공지사항을 발송하는 등 다양한 운영 기능을 활용할 수 있습니다. 더 나아가 VChatCloud의 REST API를 이용하면, 고객님의 서비스에 채팅 기능을 직접 연동하고 사용자 관리, 메시지 전송 등 세부 기능을 제어하여 더욱 강력하고 유연한 맞춤형 채팅 솔루션을 구축할 수 있습니다.

STEP 1. 무료 회원가입하기 ​

1. 홈페이지 ​

VChatCloud 첫 페이지로 이동해서 상단의 무료 이용하기 버튼을 클릭합니다.

메인 홈페이지

2. 가입페이지 ​

무료 이용 신청 양식에 이메일, 이름, 비밀번호, 비밀번호 확인을 입력하시고 약관에 동의 하신 후 회원가입을 완료해주세요.

가입페이지

3. 가입 완료 ​

가입하신 이메일 주소로 인증 확인 메일이 발송됩니다.

가입 완료 팝업

4. 이메일 확인 ​

인증 확인 메일 본문에 이메일 인증 버튼을 클릭하시면 회원가입 절차가 완료됩니다.

이메일 확인

STEP 2. 채팅방 개설하기 ​

1. CMS 로그인 ​

VChatCloud 첫 페이지 상단의 로그인 버튼을 클릭합니다. 회원 가입 시 등록한 이메일, 비밀번호로 로그인을 해주세요.

CMS 로그인

2. CMS 채팅방 개설 ​

좌측 메뉴 채팅방 관리 > 채팅방 목록을 클릭합니다. 채팅방 개설 버튼을 통해 개설 시 필요한 정보들을 입력 후 생성 버튼을 클릭합니다.

채팅방 생성

3. CMS 채팅방 완료 확인 ​

채팅방 목록 화면에 노출이 되었다면, 정상적으로 채팅방이 만들어졌습니다.

채팅방 생성 완료 확인

STEP3. 소스 코드 작성 및 실행하기 ​

준비사항 ​

React UI Kit를 실행하기 위해서는 아래의 준비물이 필요합니다.

  • Node.js
  • npm (또는 사용하시는 패키지 매니저)

1. 채팅방 채널 키 복사 ​

개설하신 채팅방의 Channel Key를 복사하여 따로 메모해주세요.

채널 키 복사

2-0. 코딩없이 실행하기 ​

만약 커스터마이징이 필요하지 않은 경우라면 간단하게 iframe 방식을 사용해서 해당 채팅방을 사용하실 수 있습니다.

  1. 메인 홈페이지에서 데모화면 버튼을 클릭하고 여러 화면 중 복사하고자 하는 메뉴를 클릭하여 소스 코드 복사 버튼을 클릭하여 따로 복사해주세요.
  2. 메모장을 여신 후 복사한 내용을 붙여넣습니다. 메모장의 <iframe src='url' ...></iframe>에서 url부분에 있는 channelKey를 변경합니다.
    • channelKey를 변경하기 위해서는 channelKey=VBrhzLZgGG-nAFo5CS7jp-20210802120142에서 VBrhzLZgGG-nAFo5CS7jp-20210802120142 부분을 단계 1에서 복사한 Channel Key로 변경해주세요.
  3. 해당 파일을 <파일명>.html(html 형식)로 저장합니다. 그 후 저장된 파일을 실행하면 접속하실 수 있습니다.

데모 소스 복사YouTube 링크 없는 화면

2. 프로젝트 생성 ​

프로젝트를 생성 할 폴더에서 아래 명령어를 입력해 실행합니다.

타입스크립트를 사용하려면 --template 파라미터를 react-ts로 변경해 사용할 수 있습니다.

bash
npm create vite@latest vchatcloud-react-project -- --template react

명령어를 실행 한 뒤 framework선택에서 React를 선택해 새 프로젝트를 생성합니다. 그 후 프로젝트 폴더로 이동한 뒤 아래 명령어를 실행해서 @vchatcloud/react-ui-kit를 설치합니다.

bash
cd vchatcloud-react-project

npm install @vchatcloud/react-ui-kit

3. 파일 수정하기 ​

index.html에 아래 내용을 추가합니다. head사이에 script태그를 2개 작성합니다.

html
<head>
  <!-- ...기존 코드들 -->
  <script src="https://www.vchatcloud.com/lib/e7lib-latest.min.js"></script>
</head>

그 후 App.tsx에 아래 내용을 입력합니다. 단 필요한 값은 새로 대체하여 사용합니다.

  • roomId : 1단계에서 복사한 Channel Key를 입력합니다.
  • clientKey : 사용자끼리 중복되지 않는 고유한 키 값
  • nickName : 사용자 닉네임
tsx
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. 개발서버 실행하기 ​

터미널에 아래 명령어를 실행 해 개발서버를 실행합니다.

bash
npm run dev

그 후 아래에 나타난 주소를 클릭해 개발서버에 접속합니다.