CodeLab41 Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 채팅방 리스팅화면 채팅방 리스팅 화면입니다. 아래와 같이 두번째탭에 자신이 속해있는 채팅방 목록이 나오는 화면 입니다. 메세지를 저장할 때 UserRooms위치에도 데이터를 저장했는데 이 위치에 저장된 데이터를 채팅방 리스팅 화면에 활용하게 됩니다. 채팅방 리스트 화면을 만들기 위해 다음 코드를 추가해주십시오. 채팅방 목록을 불러오는 코드입니다. 로그인 인증이 완료된 후 수행되는 setLogin 메소드 안에서 loadRoomList메소드를 호출합니다. loadRoomList메소드를 확인을 해보면 유저리스트와 는 다르게 메세지를 받을 때마다 목록을 갱신시켜 주기위해 once메소드가 아닌 on메소드를 사용하였습니다. getRoomList메소드는 loadRoomList에서 채팅방 목록을 데이터를 받을 때마다 화면을 만드는 메소.. 2017. 12. 3. Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 채팅메세지 전송기능 이번에는 채팅메세지 전송기능을 구현해보겠습니다. 채팅방화면에서 아래쪽 메세지 입력란에서 입력한 후 엔터키를 누르거나 삼각형 모양의 전송버튼을 누르면 메세지가 전송이 되는 기능을 구현해보겠습니다. 위 코드는 입력란에서 엔터키를 누르거나 전송버튼을 클릭했을 시 saveMessages 메소드가 실행이 되는 코드 입니다. saveMessages 여러 위치에 저장을 하게 되는데 하나씩 살펴보겠습니다.var multiUpdates = {};this.database.ref().update(multiUpdates); // 권한 때문에 먼저 저장해야함 multiUpdates 객체를 선언하고 저장할 위치와 값을 객체에 입력한 뒤 update 메소드로 저장하게됩니다. update 메소드는 이렇게 여러 위치에 한번에 저장할 .. 2017. 12. 3. Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 채팅화면 및 채팅메세지 리스팅 카카오톡을 보면 유저리스트 화면을 터치하면 프로필 화면이 나오고 1:1 채팅 버튼을 눌러야 채팅방 화면이 나옵니다만, 예제에서는 곧바로 1:1 채팅 화면으로 진입하는 코드를 작성하겠습니다. 일단 먼저 유저리스트 화면에서 유저를 클릭하면 채팅방을 오픈하는 코드를 작성하겠습니다. 아래의 코드를 추가 또는 수정해주세요. 유저리스트 데이터를 받아 화면을 그리는 getUserList 메소드에서 화면을 그리고 난 뒤 유저별로 클릭 이벤트를 바인딩 하는 코드를 입력하였습니다. 그리고 클릭시 수행되는 코드는 onUserListClick 메소드 입니다. onUserListClick 메소드는 아직까지는 단순하게 숨겨져있던 백버튼과 친구 초대버튼을 보이게 하고 openChatRoom메소드를 통해서 채팅방 화면을 보이게 하는.. 2017. 12. 3. Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 유저리스팅 화면 이제 저장된 유저 데이터를 읽어와 아래와 같은 사용자 목록화면을 완성해 보겠습니다. 이제 아래의 코드를 추가합니다. 위 코드는 로그인 인증이 완료되고 수행되는 setLogin메소드 안에서 Realtime Databse 에서 Users Reference를 불러오는 loadUserList 메소드가 수행됩니다. loadUserList 메소드를 살펴보면 Users 위치를 once메소드를 통해 한번 만 불러오도록 되어 있고, userName 순으로 정렬하여 데이터를 가지고 옵니다. off 메소드는 여러 메소드가 수행하는 과정에서 미리 할당된 이벤트가 있으면 이벤트를 제거한 후 다시 이벤트를 붙여서 중복으로 이벤트가 할당되는 것을 막기 위함입니다. getUserList 메소드는 데이터를 받고 최종적으로 화면을 그리.. 2017. 12. 3. 이전 1 2 3 4 5 6 ··· 11 다음 728x90
