본문 바로가기

채팅17

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.
Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 채팅방 리스팅화면 채팅방 리스팅 화면입니다. 아래와 같이 두번째탭에 자신이 속해있는 채팅방 목록이 나오는 화면 입니다. 메세지를 저장할 때 UserRooms위치에도 데이터를 저장했는데 이 위치에 저장된 데이터를 채팅방 리스팅 화면에 활용하게 됩니다. 채팅방 리스트 화면을 만들기 위해 다음 코드를 추가해주십시오. 채팅방 목록을 불러오는 코드입니다. 로그인 인증이 완료된 후 수행되는 setLogin 메소드 안에서 loadRoomList메소드를 호출합니다. loadRoomList메소드를 확인을 해보면 유저리스트와 는 다르게 메세지를 받을 때마다 목록을 갱신시켜 주기위해 once메소드가 아닌 on메소드를 사용하였습니다. getRoomList메소드는 loadRoomList에서 채팅방 목록을 데이터를 받을 때마다 화면을 만드는 메소.. 2017. 12. 3.
728x90