Overview

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

데모화면 실행하기

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

데모 화면의 동작 방식

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

데모 화면 실행순서

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

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

지원되는 브라우저 확인

브라우저	지원되는 버전
Internet Explorer	10 or higher
Edge	13 or higher
Chrome	16 or higher
Firefox	11 or higher
Opera	12.1 or higher
Naver Whale	2.8 or higher

데모 화면 사용하기

• 유튜브 PC 버전 💾
• 유튜브 Mobile 버전 💾
• 라이브 커머스 버전 💾
• 카카오 버전 💾

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

채팅서비스 체험하기

채팅방 진입

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

채팅 하기

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

구현코드 확인

vChatCloud, channel 객체 선언

function joinRoom(roomId, clientKey, nickName, callback) {
  // vchatcloud 객체
  channel = vChatCloud.joinChannel(
    {
      roomId: roomId, // 채팅방ID(채널키)
      clientKey: clientKey, // 클라이언트 고유키 (유저 식별값)
      nickName: nickName, // 채팅방에 입장한 유저 별명
    },
    function(error, history) {
      $('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');
    }
  );
}

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

채널객체 이벤트 처리

메시지 전송

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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