본문 바로가기

CodeLab41

Firebase Web 채팅앱 만들기 - Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - FCM Token 정보 저장 요즘 웹브라우저에서는 안드로이드 또는 IOS에서 볼 수 있는 푸시 기능을 지원하는 브라우저가 있습니다. 요즘 Youtube나 Facebook을 이용하시고, Chrome 또는 Firefox 브라우저를 사용하신다면 아래와 같은 푸시를 받아보셨을 것입니다. 이는 서비스 워커라는 브라우저에서 백그라운드로 실행되는 자바스크립트 기반의 워커를 통해서 메세지를 수신하고 노티피케이션을 구동하게 됩니다. 일반적인 웹 워커는 웹앱 내에서 자바스크립트로 멀티쓰레드 처리를 위해 사용됩니다. 서비스워커도 비슷하지만 차이점이 있습니다. 웹워커는 웹앱이 실행되는 동안만 유지되고 실행되지만 서비스워커의 경우 웹앱을 벗어나더라도 브라우저가 실행이 되어 있으면 지속적으로 이벤트를 받고 처리를 수행합니다. 이러한 서비스워커를 지원하는 브.. 2017. 12. 4.
Firebase Web 채팅앱 만들기 - Storage를 이용한 파일 전송기능 단순 채팅메세지를 넘어 파일을 서로 주고 받을 수 있는 기능을 구현해보겠습니다. Firebase Storage를 활용하게 됩니다 클립버튼을 누르면 파일을 선택을 할 수 있고, 파일을 선택하면, 팝업 모달 창이 뜨면서 파일 전송 현황을 볼 수 있는 프로그레스바가 움직이며, 최종적으로 파일을 다운로드 받을 수 있는 링크정보가 메세지로 전달 됩니다. 코드를 시작하기 전 Firebase console 로 들어가서 Storage 메뉴로 들어갑니다. 처음 들어가면 아래와 같은 화면이 나옵니다. 시작하기 버튼을 눌러 주세요. 시작하기 버튼을 눌러야 기본적인 권한이 생성이 되고 Bucket이 생성이 되며 Storage를 사용할 수 있는 상태가 됩니다. 이제 코드를 작성해보겠습니다. 아래의 코드를 추가해주십시오. 위 코.. 2017. 12. 4.
Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 접속 중인 유저 표시하기 Realtime Database 에는 사용자의 접속상태가 바뀔 때마다 데이터가 변경이 되는 특수한 위치가 있습니다. '/.info/connected' 위치입니다. 해당 위치를 활용하여 접속이 되면 유저리스트 화면에서 접속하였음을 표시해주는 기능을 구현해 보겠습니다. 접속을 하거나 접속을 끊게 되면 UsersConnection 위치에 데이터를 입력하는 코드를 작성하겠습니다. 아래의 코드를 작성해 주세요. 로그인 후 checkOnline 메소드가 실행됩니다. 접속을 하게 되면 앞서 언급한 '/.info/connected' 위치에 true 값이 입력됩니다. 아래의 코드는 '/.info/connected' 위치의 데이터 변화를 감지하여, true 값이 들어왔는지 확인한 후 UsersConnection 아래 자신.. 2017. 12. 4.
Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 채팅방 초대 기능 이제 1대 1대화 뿐만 아니라 여러명이 한꺼번에 채팅을 나눌 수있는 채팅방 초대 기능을 만들어 보겠습니다. 우선 채팅방 우측 상단에 '+' 모양의 버튼이 있습니다. 해당 버튼을 누르면 초대할 수 있는 인원들이 보여지는 팝업 모달 창을 띄우도록 하겠습니다. 현재 상태에서도 초대버튼을 누르면 팝업 모달창이 뜨게 됩니다. Git을 통해 소스를 다운 받으시면 맨처음에 초대 버튼을 누르면 모달창이 뜨는 코드가 포함되어 있는 상태입니다. 이제는 모달 창을 채울 유저리스트를 모달창으로 가지고 오겠습니다. 유저리스트는 앱 첫화면 유저리스트의 Dom을 그대로 가지고 와서 채팅방 안에 속한 인원을 제외 시키고, 숨겨두었던 체크버튼을 보이도록 하겠습니다. openChatRoom메소드에 setAddUserList 메소드를 실.. 2017. 12. 4.
728x90

티스토리툴바