메시지 수신

VChatCloud SDK는 channel 객체에 이벤트 핸들러를 등록하여 채팅방에서 발생하는 다양한 메시지를 실시간으로 수신하고 처리하는 기능을 제공합니다.

이 문서에서는 공개 메시지, 귓속말, 공지사항 등 주요 메시지 수신 이벤트 핸들러의 사용법을 상세히 설명합니다.

사전 준비

모든 이벤트 핸들러를 사용하기 전에, vChatCloud.joinChannel을 통해 채팅방 입장이 완료되어 channel 객체가 성공적으로 생성되어야 합니다. 자세한 내용은 SDK 개요 문서를 참고하세요.

Event 객체 공통 구조

대부분의 메시지 수신 이벤트 핸들러는 아래와 같은 구조의 event 객체를 파라미터로 전달받습니다.

필드명	타입	설명
senderKey	string	메시지를 보낸 사용자의 clientKey
nickName	string	메시지를 보낸 사용자의 닉네임
message	string	메시지 내용
mimeType	string	메시지 타입 (text, emoji, file, emoji_img)
date	string	메시지 전송 시간 (YYYY-MM-DD HH:mm:ss)
messageCount	number	현재 채팅방의 총 메시지 수
grade	string	메시지를 보낸 사용자의 등급

메시지 수신 이벤트 핸들러

채팅방에서 발생하는 주요 메시지들을 수신하는 이벤트 핸들러입니다.

공개 메시지 수신

채팅방의 모든 사용자에게 공개되는 메시지를 수신합니다. mimeType 필드를 확인하여 텍스트, 파일, 이모티콘 등 메시지 유형을 구분할 수 있습니다.

channel.onNotifyMessage = (event) => {
  console.log(`[메시지] ${event.nickName}: ${event.message}`);

  // mimeType에 따라 파일, 이모티콘 등 분기 처리
  if (event.mimeType === 'file') {
    // 파일 정보 파싱 (배열 형태인지 확인)
    const fileData = JSON.parse(event.message);
    const fileInfo = Array.isArray(fileData) ? fileData[0] : fileData;
    // 파일 다운로드 URL 생성
    const fileUrl = `https://vchatcloud.com/api/openapi/loadFile?fileKey=${fileInfo.id}&roomId=${channel.roomId}`;
    console.log(`파일: ${fileInfo.name} (${fileInfo.size}bytes)`);
  } else if (event.mimeType === 'emoji_img') {
    // 이모티콘 이미지 경로 처리
    console.log(`이모티콘: ${event.message}`);
  }
};

파일 메시지 수신

파일 메시지를 수신하면 message 필드에 파일 정보가 JSON 형태로 전달됩니다. 파일 고유 키와 채팅방 ID를 조합하여 다운로드 URL을 생성할 수 있습니다.

파일 정보 구조

파일 메시지의 message 필드는 JSON 문자열 형태로 전달되며, 다음 정보를 포함합니다.

필드	타입	설명
id	string	파일의 고유 키
name	string	파일의 원본 이름
type	string	파일 확장자
size	number	파일 크기 (바이트)
expire	string	만료 일자 (yyyy-MM-dd)

예제 코드

channel.onNotifyMessage = (event) => {
  if (event.mimeType === 'file') {
    // 파일 정보 파싱 (배열 형태인지 확인)
    const fileData = JSON.parse(event.message);
    const fileInfo = Array.isArray(fileData) ? fileData[0] : fileData;

    // 파일 다운로드 URL 생성
    const fileUrl = `https://vchatcloud.com/api/openapi/loadFile?fileKey=${fileInfo.id}&roomId=${channel.roomId}`;

    // 파일 정보 표시
    console.log(`파일명: ${fileInfo.name}`);
    console.log(`파일 크기: ${fileInfo.size} bytes`);
    console.log(`다운로드 URL: ${fileUrl}`);

    // 파일 다운로드 처리
    const link = document.createElement('a');
    link.href = fileUrl;
    link.download = fileInfo.name;
    link.click();
  }
};

이모티콘 메시지 수신

이모티콘 메시지를 수신하면 message 필드에 이미지 URL이 전달됩니다. 이를 <img> 태그의 src 속성에 설정하여 채팅 화면에 표시할 수 있습니다.

예제 코드

channel.onNotifyMessage = (event) => {
  if (event.mimeType === 'emoji_img') {
    const img = document.createElement('img');
    img.src = event.message;
    img.alt = '이모티콘';

    // 채팅 UI에 추가
    document.getElementById('chat-messages').appendChild(img);
  }
};

귓속말 수신

특정 사용자가 자신에게만 보낸 개인 메시지를 수신합니다. 귓속말은 발신자와 수신자만 볼 수 있는 1:1 메시지입니다.

channel.onNotifyWhisper = (event) => {
  console.log(`[귓속말] ${event.nickName}님의 귓속말: ${event.message}`);
};

공지 수신

채팅방 관리자가 모든 참여자에게 전달하는 공지사항을 수신합니다. 중요한 알림이므로 일반 메시지와 구분되는 UI 처리를 적용하는 것이 좋습니다.

channel.onNotifyNotice = (event) => {
  console.log(`[공지] ${event.message}`);
};