회원가입 및 개설 | VChatCloud 문서

# STEP1. 무료 회원가입 하기

# STEP2. 채팅방 개설하기

# STEP3. 소스 코드 작성하기 & 실행하기

# 준비사항

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

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

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

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

1
2
3
4
5

그 후 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;

1
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

개요 →