데모 소스코드 살펴보기

이 문서는 VChatCloud 웹 채팅 데모의 소스코드 구조와 핵심 동작 원리를 분석합니다. 데모가 어떻게 SDK를 활용하는지 이해하고, 직접 코드를 수정하여 원하는 기능을 구현하는 데 도움을 드리는 것을 목표로 합니다.

이 문서를 읽기 전에 시작하기 가이드를 통해 데모를 먼저 실행해보는 것을 권장합니다.

프로젝트 구조

데모 프로젝트는 기능에 따라 css, img, js 폴더로 구성되어 있습니다. 커스터마이징 시 주로 js 폴더의 파일들을 수정하게 됩니다.

프로젝트
├─index.html  // 메인 HTML 파일
├─css/        // 스타일시트 폴더
├─img/        // 이미지 폴더
└─js/         // JavaScript 폴더
   ├─login.js   // (핵심) 로그인, 프로필 설정, 채팅방 입장
   ├─draw.js    // (핵심) 실시간 이벤트 처리 및 UI 렌더링
   ├─popup.js   // 귓속말 등 사용자 메뉴 팝업
   ├─emoji.js   // 이모티콘 UI
   ├─count.js   // 글자 수 카운터
   └─errMsg.js  // 에러 메시지 처리

핵심 스크립트 분석

1. login.js: 로그인 및 접속 프로필 설정

login.js는 사용자가 앱을 처음 실행했을 때 마주하는 로그인 과정을 총괄합니다. 사용자의 닉네임, 프로필 정보 등을 설정하고, 이 정보를 바탕으로 채팅방에 최초로 접속하는 역할을 담당합니다.

주요 프로세스:

1. 로그인 UI 표시: 사용자가 닉네임 등을 입력할 수 있는 팝업창을 화면에 보여줍니다.
2. 접속 정보 취합: 팝업창에서 사용자가 입력한 닉네임과 같이 접속에 필요한 정보를 가져옵니다.
3. joinChannel 호출: 취합된 정보를 바탕으로 VChatCloud.joinChannel() 메소드를 호출하여 서버 접속을 시도합니다.
4. UI 전환: 접속에 성공하면 로그인 팝업창을 숨기고 메인 채팅 화면을 표시합니다.

login.js의 역할은 성공적으로 채팅방에 접속하고 UI를 전환하는 것까지이며, 실제 실시간 채팅 이벤트 처리는 draw.js에서 이어받아 수행합니다.

2. draw.js: 실시간 이벤트 처리 및 UI 렌더링

draw.js는 데모의 실질적인 채팅 기능을 모두 담당하는 핵심 파일입니다. login.js로부터 제어권을 넘겨받은 후, 모든 실시간 채팅 이벤트를 처리하고 그 결과를 화면에 그려주는 역할을 합니다.

이벤트 핸들러 바인딩

chatInit() (또는 유사한 이름의) 함수 내에서, channel 객체에 필요한 모든 이벤트 핸들러(onNotifyMessage, onNotifyJoinUser 등)를 할당합니다.

데이터-UI 변환

channel.onNotifyMessage와 같은 이벤트가 발생하면, SDK는 이벤트 객체를 전달합니다. draw.js에 있는 핸들러는 이 객체를 받아 write() 함수로 전달하고, write() 함수는 객체 타입에 맞는 HTML(말풍선, 입장/퇴장 알림 등)을 생성하여 채팅창에 추가합니다.

데이터 흐름:SDK 이벤트 발생 → 이벤트 핸들러 수신 (draw.js) → write() 함수 호출 (draw.js) → HTML 요소 생성 및 추가 → 사용자 화면에 표시

채팅 중 발생하는 대부분의 기능(메시지 수신, 사용자 입/퇴장 알림 등)과 UI 표현을 수정하고 싶다면 draw.js 파일을 살펴보는 것이 가장 효과적입니다.

3. 기타 UI 유틸리티 스크립트

• popup.js: 사용자 닉네임 클릭 시 귓속말, 강퇴 등을 할 수 있는 작은 메뉴 팝업을 띄웁니다.
• emoji.js: 이모티콘 선택창을 보여주고 숨기는 UI를 제어합니다.
• count.js: 메시지 입력창의 글자 수를 세고 제한하는 기능을 수행합니다.

정리

데모 소스코드는 다음과 같은 역할 분담 구조를 가집니다.

• login.js: 앱의 진입점(Entry Point). 로그인, 프로필 설정, 최초 접속을 처리합니다.
• draw.js: 실시간 채팅 이벤트 수신 및 화면 렌더링을 모두 담당하는 메인 컨트롤러(Main Controller).
• 기타 *.js 파일: 사용자 경험을 향상시키는 UI Helper.

채팅 데모를 커스터마이징할 때, 로그인 및 접속 과정은 login.js를, 실시간 채팅 기능 및 UI는 draw.js를 중심으로 살펴보시면 효율적으로 작업할 수 있습니다.