사용자 로그인

사용자가 로그인하는 과정을 구현하는 방법을 안내합니다. 이 과정을 통해 사용자는 접속 시 닉네임과 프로필 사진을 설정할 수 있으며, 해당 정보를 채팅 화면에 적용할 수 있습니다.

INFO

본 가이드는 Youtube - PC(web) 데모 유형을 기반으로 작성하였습니다.

유저 정보 설정 방법

로그인 화면에서 사용자가 닉네임과 프로필 사진을 선택·설정하는 과정은 다음과 같이 구현합니다.

1. 프로필 사진(아바타) 선택

   • 프로필 이미지는 img/profile 경로에 위치합니다. 이미지를 교체하거나 HTML 구조를 변경하여 원하는 이미지를 사용할 수 있습니다.
   • 사용자가 선택한 이미지 파일의 인덱스를 저장합니다.

2. 닉네임 입력

   • 사용자가 로그인 입력란(예: <input id="name">)에 닉네임을 입력하고 엔터를 누르거나 로그인 버튼을 클릭합니다.
   • 입력한 닉네임 값을 저장합니다.

3. 프로필 사진 및 닉네임 전달

   • 아래 예시 코드처럼 VChatCloud.joinChannel 함수의 파라미터로 닉네임과 userInfo속성값에 프로필 정보를 전달합니다.
   • 프로필 정보나, 추가로 필요한 정보를 전달할때는 반드시 userInfo 속성을 사용해야 합니다.

   const vChatCloud = new VChatCloud();
   vChatCloud.joinChannel(
     {
       roomId: roomId,
       clientKey: clientKey,
       nickName: nickName,
       userInfo: {
         profile: res.profile, // 프로필 정보 입력
       },
     },
     function (error, history) {
       // joinChannel 후 콜백 처리
       console.log(channel.roomName) // 접속한 채팅방의 이름
     }
   );

이렇게 하면 채팅방에 유저의 설정 정보가 전달되어, 화면에 그릴 때 해당 데이터를 사용할 수 있습니다.

TIP

• 프로필 이미지 목록을 변경할 수 있으며, 변경한 경우 HTML 구조 변경 또는 JS수정이 필요할 수 있습니다.
• Youtube - PC(web) 데모 샘플에서는 js/login.js의 profileTagInit 함수를 수정해야 합니다.

유저 정보 적용 방법

채팅 화면에서 유저의 닉네임과 프로필 사진 정보를 불러와 출력하는 방법은 다음과 같습니다.

• 메시지 이벤트에서 유저 정보 활용

  • 새 메시지 이벤트 발생 시, 유저 정보가 함께 전달됩니다.
  • 해당 정보를 활용하여 채팅 메시지와 함께 닉네임 및 프로필 이미지를 출력할 수 있습니다.
  • VChatCloud.joinChannel에서 전달한 userInfo정보는 메시지 이벤트 등에서 동일하게 전송되기 때문에 해당 속성값에 입력했던 데이터를 사용할 수 있습니다.

  channel.onNotifyMessage = function (event) {
  // event.nickName: 닉네임
  // event.userInfo: 유저 정보 (프로필 등)
    const list = $('div.chat div#content1');
    const messageWrap = `
      <div class="content">
        <p class="profile"><img src="/img/profile/${event?.userInfo?.profile ?? 1}.png" /></p>
        <p class="message">${message}</p>
      </div>`;
    list.append(messageWrap);
  };

마지막으로 닉네임, 프로필 사진, 메시지 등이 정상적으로 노출되는지 확인하고, 필요에 따라 HTML 구조를 원하는 형태로 수정합니다.