채팅17 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. Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - Reatime Database 특징 및 데이터 구조 1) Realtime Database 특징 Firebase Realtime Database 는 JSON형태의 NoSQL 데이터베이스입니다. 그리고 연결된 모든 클라이언트에 실시간 동기화되는 특징이 있습니다. 이로 인하여 일반적인 SQL 데이터베이스로 구현하는 웹개발과는 다른 특징을 가집니다. NoSQL의 특징을 가지고 있는 데이터베이스로서 데이터베이스 구조를 미리 정의 하지 않습니다. (미리 테이블이나 칼럼을 생성할 필요가 없습니다.) NoSQL 데이터베이스지만 실시간 동기화되는 특성으로 인하여, 저장할 데이터 구조는 최대한 중첩을 배제해야합니다.(JSON Object 값에 다시 JSON Object가 중첩이 되는 형태를 말합니다.) Firebase Realtime Database와 Node.js를 함께.. 2017. 12. 3. 이전 1 2 3 4 5 다음 728x90
