VChatCloud 개발자센터

한국어

한국어

Appearance

Overview ​

VChatCloud SDK(이하 SDK)는 채팅 클라이언트 구현을 쉽게 할 수 있도록 도와줍니다. 웹 클라이언트에서 SDK를 이용하여 실시간 채팅을 빠르고 효율적으로 사용해보세요. 퀵 가이드에서는 SDK의 구조 및 기능에 대한 간략한 내용을 안내하고, 각 항목에서는 자세한 설명을 바탕으로 실무 프로젝트에 적용하기 위한 가이드를 제공하고 있습니다.

데모화면 실행하기 ​

데모 화면은 VChatCloud에서 사용할 수 있는 대부분의 기능들이 포함되어 있으며, 데모 화면을 통하여 자체 프로젝트에 적용할 수 있는 힌트를 얻고, 여러가지 형태의 프로젝트에 적용해 보세요.

데모 화면의 동작 방식 ​

데모 화면은 클라이언트에서 임의 사용자가 진입 시 필요한 대화명 설정과 채팅방 선택을 진행할 수 있도록 도와줍니다. 진입한 채팅방에서는 같은 채널키로 입장한 다른 사용자로부터 메시지를 받고, 보내며 채팅서버가 이벤트를 발생하여 전달하게 됩니다. 데모 화면은 서버로부터 발생한 이벤트를 제공된 메소드로 콜백함수를 전달합니다. 전달되는 콜백함수를 이용하여 이벤트를 쉽게 구현 및 제어하도록 도와줍니다.

데모 화면 실행순서 ​

데모 화면을 동작해 보려면 아래의 항목을 순서대로 진행해주세요.

  1. 브라우저가 지원되는지 확인해주세요.
  2. 데모 화면을 다운로드 해주세요
  3. 채팅서비스 체험하기

지원되는 브라우저 확인 ​

브라우저지원되는 버전
Internet Explorer10 or higher
Edge13 or higher
Chrome16 or higher
Firefox11 or higher
Opera12.1 or higher
Naver Whale2.8 or higher

직접 구현하기 ​

VChatCloud SDK npm version ​

VChatCloud SDK는 웹 브라우저 환경에서 VChatCloud의 채팅 기능을 쉽게 연동할 수 있도록 돕는 공식 SDK입니다.

원하는 패키지 매니저를 통해 SDK를 설치할 수 있습니다.

bash
# npm 사용 시
npm install @vchatcloud/sdk

# yarn 사용 시
yarn add @vchatcloud/sdk

# yarn 사용 시
pnpm add @vchatcloud/sdk

또는 script로 포함하여 사용하실수도 있습니다.

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

데모 화면 사용하기 ​

  1. 데모 화면 중 사용하고자 하는 버전을 눌러 github 로 이동하여 ZIP 다운로드를 합니다.( Code ▼ > Download ZIP )
  2. 다운로드 받은 폴더로 이동하여 zip파일을 압축해제 해줍니다.
  3. 압축해제된 폴더경로로 진입하여 index.html을 실행합니다.

채팅서비스 체험하기 ​

채팅방 진입 ​

데모 화면 ​

데모 화면에서 채팅방으로 진입하기 위해서는 CMS에 생성된 채널키를 입력해줘야 합니다. 만약 채팅방 개설 전 상태라면 Quick Start를 통해 채팅방 생성 및 채널키를 확인하는 방법을 습득해 주세요. 이후 대화명은 채팅방안에서 사용할 대화명으로 입력후 확인 버튼을 눌러 채팅방으로 진입해주세요.

메인화면

채팅 하기 ​

데모 화면 ​

채팅은 텍스트 입력박스에 전송할 메시지를 입력 후 전송버튼을 누르거나 엔터키를 눌러 전송하세요. 메시지전송이 정상적으로 진행되고 있다면, 다른 브라우저나 다른 PC로 채팅방을 입장해보세요. 다른 사용자로 진입 시에 채널키를 동일하게 입력하여 동일한 채팅방으로 진입 후, 채팅 메시지를 주고 받아보세요.

채팅화면 PC버전

구현코드 확인 ​

vChatCloud, channel 객체 선언 ​

js
const vChatCloud = new VChatCloud();
function joinRoom(roomId, clientKey, nickName, callback) {
  // VChatCloud 객체
  channel = vChatCloud.joinChannel(
    {
      roomId: roomId, // 채팅방ID (채널키)
      clientKey: clientKey, // 클라이언트 고유키 (유저 식별값)
      nickName: nickName, // 채팅방에 입장한 유저 별명
    },
    function (error, history) {
      console.log(channel.roomName) // 접속한 채팅방의 이름
      $(
        "div.entery, div.chatout, div.notice, div.whisper, div.content"
      ).remove();

      if (error) {
        if (callback) {
          return callback(error, null);
        }

        return error;
      }

      if (callback) {
        callback(null, history);
      }

      // 채팅영역에 글쓰기가 활성화될시 활성화
      if (typeof write == "function")
        write(
          "실시간 채팅에 오신 것을 환영합니다. 개인정보를 보호하고 커뮤니티 가이드를 준수하는 것을 잊지 마세요!",
          "notice"
        );
    }
  );
}

오류 코드는 여기를 참고하세요.

채널객체 이벤트 처리 ​

메시지 전송 ​

js
channel.sendMessage({
  message: "전송될 메시지",
});

채팅방의 특정 유저로 메시지를 전송 ​

js
channel.sendWhisper(
  {
    message: "전송될 메시지 (귓속말)",
    receivedClientKey: "user고유키",
  },
  function (err, msg) {
    // 귓속말 전송 실패 시 err = 객체, msg = null
    // 귓속말 전송 성공 시 err = null, msg = 객체
    // 채팅창에 msg 객체를 이용 메시지 표현
  }
);

채팅방에 메시지가 올라올 경우 발생되는 이벤트 ​

js
channel.onNotifyMessage = function (event) {
  // 채팅창에 event 객체를 이용 메시지 표현
};

접속한 유저로 귓속말 메시지가 올라올 경우 발생되는 이벤트 ​

js
channel.onPersonalWhisper = function (event) {
  // 채팅창에 event 객체를 이용 메시지 표현
};

채팅방에 공지 메시지가 올라올 경우 발생되는 이벤트 ​

js
channel.onNotifyNotice = function (event) {
  // 채팅창에 event 객체를 이용 메시지 표현
};

채팅방에 커스텀 메세지가 올라올 경우 발생되는 이벤트 ​

js
channel.onNotifyCustom = function (event) {
  // 커스텀 메시지를 통해 사용자 액션 실행
};

유저 접속 이벤트 ​

채팅방에 신규 유저가 접속 시 발생되는 이벤트 ​

js
channel.onNotifyJoinUser = function (event) {
  // 채팅창에 event 객체를 이용 유저 접속 알림
};

채팅방에 유저가 나간 경우 발생되는 이벤트 ​

js
channel.onNotifyLeaveUser = function (event) {
  // 채팅창에 event 객체를 이용 유저 접속 해제 알림
};

유저 상태 변경 이벤트 ​

채팅방에서 추방이 되는 경우 발생되는 이벤트 ​

js
channel.onNotifyKickUser = function (event) {
  // 채팅창에 event 객체를 이용 특정 유저 추방 알림
};

채팅방에서 추방이 해제되는 경우 발생되는 이벤트 ​

js
channel.onNotifyUnkickUser = function (event) {
  // 채팅창에 event 객체를 이용 특정 유저 추방 해제 알림
};

채팅방에서 유저가 글쓰기 제한이 되는 경우 발생되는 이벤트 ​

js
channel.onNotifyMuteUser = function (event) {
  // 채팅창에 event 객체를 이용 특정 유저 침묵 알림
};

채팅방에서 유저가 글쓰기 제한이 해제되는 경우 발생되는 이벤트 ​

js
channel.onNotifyUnmuteUser = function (event) {
  // 채팅창에 event 객체를 이용 특정 유저 침묵 해제 알림
};

유저 상태 변경 이벤트 (개인알림) ​

중복 로그인 시도 시 기존 접속 유저에게 알림 ​

js
channel.onPersonalDuplicateUser = function (event) {
  // event 객체를 이용 중복 로그인 시 처리 (로그아웃 or 클라이언트키 변경)
};

채팅방에서 글쓰기 제한이 되는 경우 발생하는 이벤트 ​

js
channel.onPersonalMuteUser = function (event) {
  // 채팅창에 event 객체를 이용 특정유저 침묵 알림
};

채팅방에서 글쓰기 제한이 해제되는 경우 발생되는 이벤트 ​

js
channel.onPersonalUnmuteUser = function (event) {
  // 채팅창에 event 객체를 이용 특정유저 침묵해제 알림
};