1. 1:1 채팅방 번호 생성

추후에 자신이 속한 채팅방 목록을 쉽게 조회하기 위해서, 그리고 1:1뿐만 아니라 단체톡방 기능 갖도록 확장할 것을 고려하여

채팅방마다 고유의 번호를 가지고 있는 것이 편리할 것이라는 판단을 했다.

따라서 친구 등록 시간과 자신의 아이디를 조합하여 채팅방 번호를 만들었다.

(ex. 2021년 9월 5일 오전 1시 33분 4초에 친구 등록 -> 20210905013304아이디 번호를 가지는 채팅방 생성)

 

자바스크립트에서 날짜를 다루는 함수를 찾아보았는데 사용자 임의로 포맷을 만들어서

그 형식에 맞게 날짜를 리턴하는 함수는 따로 없는 것으로 보인다.

자바는 format 함수가 있어서 편리한데 자바스크립트에는 없어서 의외다.

 

그래서 처음에는 이렇게 코드를 작성했다가

 

    //현재 날짜와 시간을 이용해서 채팅방 번호 생성
    function makeChatRoomNum() {
        const today = new Date();   //현재 날짜
        const year = today.getFullYear();
        const month = ('0' + (today.getMonth() + 1)).slice(-2);
        const day = ('0' + today.getDate()).slice(-2);
        const hours = ('0' + today.getHours()).slice(-2);
        const minutes = ('0' + today.getMinutes()).slice(-2);
        const seconds = ('0' + today.getSeconds()).slice(-2);
        
        return year + month + day + hours + minutes + seconds + loginUserId;
    }

 

좀 더 찾아보니 moment라는 라이브러리가 자바의 format과 같은 기능을 제공한다고 하여 적용해보았다.

 

import moment from 'moment';

	//현재 날짜와 시간을 이용해서 채팅방 번호 생성
    function makeChatRoomNum() {
		return moment().format('YYYYMMDDHHmmss') + loginUserId;
    }

 

8줄의 코드를 단 한줄로 줄일 수 있었다...!

이 외에도 날짜 더하기, 빼기 등 유용한 함수를 많이 제공하는 것으로 보인다.

라이브러리를 잘 활용하는 것이 개발 생산성 향상에 매우 도움된다는 것을 다시 한번 체감한다.

 

 

2. 채팅방 멤버 DB 저장

친구 추가 시 자동으로 만들어지는 1:1 채팅방에

현재 로그인한 사용자와 친구로 등록된 사용자를 멤버로 등록한다.

 

    //친구 추가
    const addFriend = () => {
        let popup = window.confirm('친구로 추가하시겠습니까?');
        if (popup) {    //'예'를 선택했을 때
            console.log('친구 추가하기');
            const chatRoomNum = makeChatRoomNum();

            //친구 등록 완료
            firestore.collection('users').doc(loginUserEmail).collection('friends').doc(friendEmail).set({id: friendId, name: friendName, chatRoomNum: chatRoomNum})
                .then(() => {
                    alert('친구로 등록되었습니다.')}
                );

            //채팅방 멤버로 등록
            firestore.collection('chatRooms').doc(chatRoomNum).collection('members').doc(loginUserEmail).set({isMember: true});
            firestore.collection('chatRooms').doc(chatRoomNum).collection('members').doc(friendEmail).set({isMember: true});
        }
    }

 

chatRooms (컬렉션)

ㄴ채팅방 번호 (문서)

  ㄴmembers (컬렉션)

    ㄴ로그인한 사용자 이메일 (문서)

       ㄴisMember: true (필드)

    ㄴ친구로 등록된 사용자 이메일 (문서)

       ㄴisMember: true (필드)

 

친구 등록이 완료되면 DB에 위처럼 등록이 된다.

 

 

3. 전송한 채팅 메세지 DB 저장

드디어 채팅 기능 구현을 시작했다! 가장 쉬운 채팅 전송 기능부터 만들어보았다.

채팅방에서 메세지를 입력하고 전송 버튼을 클릭하면 DB에 저장된다.

 

const content = React.useRef(); //채팅 input 박스

    function sendMessage() {
        const value = content.current.value;

        if (value.length == 0) {
            alert('채팅 내용을 입력해주세요');
        } else {
            const date = getDate(); //채팅 내역 document에 사용
            const time = getTime(); //채팅 내역 메세지 field에 사용
            const messageCode = time + loginId;

            firestore.collection('chatRooms').doc(chatRoomNum).collection('chatMessages')
            .doc(date).collection('userMessage').doc(messageCode).set({content: value, time: time.slice(0, -3)}).then(
                //전송 완료 (DB 등록)
            );

            content.current.value = ''; //채팅 input 박스 비우기
        }
    }

 

input 박스 ref에 React.useRef로 만든 ref를 등록해서

전송 버튼 클릭 시 해당 input 안에 입력된 값을 가져오고

내용이 입력되었으면 DB에 저장, 만약 입력되지 않았으면 alert 메세지를 띄운다.

 

chatRooms (컬렉션)

ㄴ채팅방 번호 (문서)

  ㄴchatMessages (컬렉션)

    ㄴ날짜 (문서)

      ㄴuserMessage (컬렉션)

        ㄴ메세지 번호 (문서)

          ㄴcontent: 메세지 내용 (필드)

          ㄴtime: 전송 시간 (필드)

 

현재 DB 구조는 이러한데 추후에 수정될 수도 있다.

 

채팅 메세지 번호를 생성할 때도 역시 moment 라이브러리를 이용해서 간단히 날짜와 시간을 얻을 수 있었다.

 

    function getDate() {
        return moment().format('YYYYMMDD');
    }

    function getTime() {
        return moment().format('HH:mm:ss');
    }

 

 

4. 채팅 메세지 레이아웃 만들기

본격적으로 채팅 내역 조회 기능을 구현하기 전에, 먼저 메세지들의 레이아웃을 만들어보았다.

 

 

일반 메신저와 큰 차이점 없이 이름과 메세지 내용, 전송 시간을 나타내도록 했다.

재사용을 위해 보낸 메세지, 받은 메세지를 각각 컴포넌트로 만들었다.

 

채팅 내역 조회까지 구현하면 주요 기능은 거의 완성되는 건데

구현하면서 얼마나 많은 시행착오를 겪게 될지ㅎㅎ 기대된다.

+ Recent posts