채팅방 접속하기

VChatCloud SDK를 사용하여 채팅방에 접속하는 방법을 안내합니다.

사전 준비

• VChatCloud SDK 설치: JavaScript SDK가 프로젝트에 설치되어 있어야 합니다
• 채널키: VChatCloud CMS에서 발급받은 채팅방 고유 식별자
• 서비스ID: VChatCloud 계정의 이메일 주소

SDK 설치 방법은 JavaScript SDK 개요를 참고하세요.

채팅방 접속 방법

joinChannel 메소드를 사용하여 채팅방에 접속합니다.

파라미터

속성	타입	필수	설명
roomId	string	필수	채팅방의 고유 ID (채널키)
clientKey	string	필수	사용자를 식별하는 고유 키
nickName	string	필수	사용자가 채팅방에서 사용할 닉네임
userInfo	object	선택	사용자 프로필 정보 (선택)

콜백 함수

콜백 함수는 두 개의 파라미터를 받습니다.

function callback(error, history) {
  // error: 에러 발생 시 에러 객체, 성공 시 null
  // history: 과거 메시지 목록 배열
}

history 배열 구조

속성	타입	설명
logType	string	로그 타입 (예: message)
roomId	string	채팅방 ID
clientKey	string	메시지를 보낸 사용자의 고유 키
message	string	메시지 내용
mimeType	string	메시지 타입 (text, file, emoji_img 등)
messageType	string	메시지 유형 (일반 메시지는 null, 공지는 notice)
nickName	string	사용자 닉네임
date	string	메시지 전송 일시 (YYYY-MM-DD HH:mm:ss)
grade	string	사용자 등급 (예: user)
userInfo	object	사용자 프로필 정보 (joinChannel 시 설정한 값)

채팅방 정보 접근

콜백 함수가 실행되는 시점에 channel 객체를 통해 채팅방 정보에 접근할 수 있습니다.

• channel.roomName: 채팅방 이름
• channel.roomId: 채팅방 ID

예제 코드

import { VChatCloud } from "@vchatcloud/sdk";

// SDK 초기화
const vChatCloud = new VChatCloud({
  serviceId: "YOUR_SERVICE_ID"
});

// 채팅방 접속
const channel = vChatCloud.joinChannel(
  {
    roomId: "YOUR_CHANNEL_KEY",
    clientKey: "user123",
    nickName: "홍길동"
  },
  (error, history) => {
    if (error) {
      console.error("접속 실패:", error);
      return;
    }

    console.log("채팅방 접속 성공");
    console.log("채팅방 이름:", channel.roomName);

    // 이전 메시지 표시
    history.forEach(msg => {
      console.log(`${msg.nickName}: ${msg.message}`);
    });
  }
);

사용자 프로필 정보 연동

채팅방 접속 시 userInfo 객체를 전달하여 프로필 사진, 사용자 레벨 등 추가 정보를 설정할 수 있습니다. 이 정보는 다른 사용자에게도 전달되어 더 풍부한 채팅 UI를 구현할 수 있습니다.

userInfo 활용 예시

userInfo 객체에는 애플리케이션에 필요한 모든 사용자 데이터를 자유롭게 추가할 수 있습니다.

• profile: 프로필 이미지 URL
• level: 사용자 레벨
• badge: 사용자 뱃지 정보
• role: 사용자 역할 (관리자, 일반 사용자 등)
• customData: 기타 커스텀 데이터

프로필 정보와 함께 접속하기

// 사용자 프로필 정보
const userProfile = {
  nickName: "홍길동",
  profileUrl: "https://example.com/profiles/user1.jpg",
  statusMessage: "안녕하세요!",
  level: 5
};

// 프로필 정보 포함하여 채팅방 접속
const channel = vChatCloud.joinChannel(
  {
    roomId: "YOUR_CHANNEL_KEY",
    clientKey: "user123",
    nickName: userProfile.nickName,
    userInfo: {
      profile: userProfile.profileUrl,
      statusMessage: userProfile.statusMessage,
      level: userProfile.level
    }
  },
  (error, history) => {
    if (error) {
      console.error("접속 실패:", error);
      return;
    }

    console.log("채팅방 접속 성공");
  }
);

프로필 정보를 활용한 UI 구현

메시지 수신 시 사용자의 프로필 정보를 활용하여 더 풍부한 UI를 구현할 수 있습니다.

channel.onNotifyMessage = (event) => {
  const { nickName, message, userInfo } = event;
  const profileUrl = userInfo?.profile || '/default-avatar.png';
  const userLevel = userInfo?.level || 1;

  const messageElement = document.createElement('div');
  messageElement.innerHTML = `
    <div class="message-wrapper">
      <img src="${profileUrl}" alt="${nickName}" class="profile-image" />
      <div class="user-info">
        <strong>${nickName}</strong> (Lv.${userLevel})
      </div>
      <div class="message-content">${message}</div>
    </div>
  `;

  document.getElementById('chat-container').appendChild(messageElement);
};