Top Banner
Simple Chat using Firebase 김태우 [email protected] @2ster_egg
21

[김태우] Simplechat using firebase

Jan 21, 2018

Download

Engineering

TaeWoo Kim
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: [김태우] Simplechat using firebase

Simple Chat using Firebase

김태우

[email protected]

@2ster_egg

Page 2: [김태우] Simplechat using firebase

Chatting on Schoolbell-e

- 웹

- 인증 (로그인)

- 1:1

- 실시간

- 이미지 전송

Page 3: [김태우] Simplechat using firebase

Firebase

Page 4: [김태우] Simplechat using firebase

FirebaseBackend as a Service

Page 5: [김태우] Simplechat using firebase
Page 6: [김태우] Simplechat using firebase
Page 7: [김태우] Simplechat using firebase
Page 8: [김태우] Simplechat using firebase
Page 9: [김태우] Simplechat using firebase
Page 10: [김태우] Simplechat using firebase

인증Authentication

Page 11: [김태우] Simplechat using firebase

인증Authentication

Node.js 서버 활용

Page 12: [김태우] Simplechat using firebase

인증Authentication

Node.js 서버 활용

CustomToken을 생성 및 전달

Page 13: [김태우] Simplechat using firebase

- JSON 형식의 파일을 이용해 Firebase 설정

- ‘users’ 테이블을 조회> select * from users where id = decoded.id;

- 정보가 없으면 생성> insert into users (…) values (…)

- 생성된 uid를 기반으로 생성된 토큰을 반환

Page 14: [김태우] Simplechat using firebase

1:1Create ‘Room’

Page 15: [김태우] Simplechat using firebase

- /rooms/ 경로에 키 추가 (방 생성)

- /rooms/rid/ 경로에 멤버를 등록

- 메시지 읽음 여부 및 소속 상태와 같은상태 파악을 위한 값 설정 (추후 활용)

Page 16: [김태우] Simplechat using firebase

실시간Realtime

Page 17: [김태우] Simplechat using firebase

실시간Realtime

Event & Listener

Page 18: [김태우] Simplechat using firebase

- ‘messages’ 경로에 데이터 입력 (room_id, user_id, text, time, type)

- 유저가 속한 채팅방에 mid(메시지 아이디)만 저장

Page 19: [김태우] Simplechat using firebase

- 가장 최근의 메시지 12개를 가져와서화면에 출력

- /rid/messages/ 경로에 있는 mid들에대한 메시지 내용들을 가져옴

- 방의 메시지 리스트에 자식(데이터)가추가되거나 변경되면setMessage(data) 메소드를 수행

Page 20: [김태우] Simplechat using firebase

School Chat !!

Page 21: [김태우] Simplechat using firebase