Firebase Web 채팅앱 만들기 - 1. 예제 소개

작성일 | In
Firebase를 활용하여 Web용 채팅앱을 구현해보는 예제를 소개합니다.

1. 들어가기에 앞서

  • Firebase 웹용 라이브러리들을 활용하여 아래와 같은 채팅앱을 만들어 봅니다.
  • 채팅앱의 모든 기능이 포함되어 있지는 않습니다.
  • 예제를 열심히 만들었지만.. 버그도 있을 수 있습니다.
  • Firebase 의 기능을 한 번씩 활용해본다고 생각해주셨으면 좋겠습니다.

1-1

1-2

2. 소개

  • Firebase의 여러 기능을 사용하면 카카오톡과 같은 메신저에 포함되어 있는 대부분의 기능이 구현 가능하겠지만, 지금부터 구현할 기능은 다음과 같습니다.

    • 유저 가입 및 로그인
    • 유저데이터 저장
    • 유저 리스팅 화면
    • 채팅메세지 리스팅 화면
    • 채팅 메세지 전송
    • 채팅방 리스팅 화면
    • 채팅방 초대기능
    • 파일 전송
    • 접속 중인 유저 표시기능
    • 파일 전송기능
    • 푸시 기능

  • 위 기능을 구현을 하면 아래와 같은 Realtime Database는 아래와 같은 데이터 구조를 가지게 될 것입니다.

1-3

  • 예제 코드는 아래와 같이 ES5 prototype 방식의 클래스로 구현이 되어 있습니다.
  • React 또는 Angular와 같은 자바스크립트 프레임워크와 Firebase를 함께 다루는 것은 추후 블로그 포스팅으로 다루도록 하겠습니다.
/**
*  FirebaseChat ES5 클래스
*/
function FirebaseChat(){
  this.init();
  this.initEvent();
}

/**
* 초기 필드 변수 할당
*/
FirebaseChat.prototype.init = function(){
  this.auth = firebase.auth();
  this.liGoogleBtn = document.getElementById('liGoogleBtn');
}

/**
* 초기 이벤트 바인딩
*/
FirebaseChat.prototype.initEvent = function(){
  this.liGoogleBtn.addEventListener('click', this.onGoogleBtnClick.bind(this));
  this.auth.onAuthStateChanged(this.onAuthChange.bind(this));
}

/**
* Google 로그인 버튼 클릭
*/
FirebaseChat.prototype.onGoogleBtnClick = function(){
  var googleProvider = new firebase.auth.GoogleAuthProvider();
  this.auth.signInWithPopup(googleProvider).then(function(result) {
      console.log('로그인 성공')
  }).catch(function(error) {
      alert('로그인에 실패하였습니다');
      console.error('구글 로그인 과정 에러',error);
  });
}

/**
* 인증 정보가 변화 되었을 시에 변화
*/
FirebaseChat.prototype.onAuthChange = function(user){
  if (user) {
      console.log('user로그인 : ',JSON.stringify(user));
  } else {
      console.log('로그아웃')
  }
}
  • 화면 구성의 경우 CSS framework의 도움을 받을 것입니다.
  • 그 중에 선택한 것은 구글의 머티리얼 디자인을 채용한 Materialize CSS 입니다.
  • 구글 Android에서 밀고 있는 디자인이며, 모바일 친화적인 CSS framework 입니다.
  • 아래 URL에 가시면 자세한 내용을 확인할 수 있습니다.
  • 가이드 문서들이 한글화가 되어 있어 접근하시기가 용이하시리라 생각됩니다.

1-4