Firebase | 채팅 웹 애플리케이션 (6) 채팅 전송하기

0. Realtime Database Rule 작성

규칙을 설정한다. auth가 null이 아니면 읽기와 쓰기의 권한이 주어진다. 즉 로그인한 회원에게만 읽기와 쓰기의 권한을 줌.

더 세세하게 규칙을 설정할 수 있지만 일단 이렇게만 설정해두었다.

1. database.js 파일 생성

auth.js 작성과 비슷함

경로 참고

firebase파일에서 export해주었던 database를 import해줌

// src/helpers/database.js

import { database } from "../services/firebase";

2. sendChat 메서드 작성

메시지를 보내는 함수를 작성한다. 이 함수가 실행되면 Firebase의 Real-time Database에 값이 저장된다. (INSERT)

Real-time Database는 NoSQL이기 때문에 스키마를 미리 작성해둘 필요가 없다. 해당 메서드를 실행하면 chats라는 테이블이 만들어지면서 해당 값들이 모두 저장되게 됨.

export function sendChat(data) {
  return database.ref("chats").push({
    message: data.message,
    timestamp: data.timestamp,
    uid: data.uid,
  });
}

3. Chat.js 작성

// src/pages/Chat.js

import { auth } from "../services/firebase";
import { sendChat } from "../helpers/database";

3-1. 화면 꾸미기

대충 HTML로 꾸며주기..

 <div className="chat-container">
      <div className="chat-top">헤더</div>
      <div className="chat-middle">
        <li className="chat-bubble send">
          <p>
            하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~
            하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~
            하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~하이룽~
          </p>
          <span>13:30PM</span>
        </li>
        <li className="chat-bubble receive">
          <p>방가방가!!</p>
          <span>13:31PM</span>
        </li>
      </div>
      <div className="chat-bottom">
        <form onSubmit={handleSumbit}>
          <input
            placeholder="내용을 입력하세요."
            value={msg}
            onChange={handleOnChange}
          />
          <button type="submit">전송</button>
        </form>
      </div>
    </div>

멋 져

3-2. input 상태값 관리

const [msg, setMsg] = useState("");

const handleOnChange = (e) => {
	setMsg(e.target.value);
};



<form onSubmit={handleSumbit}>
   <input
   placeholder="내용을 입력하세요."
   value={msg}
   onChange={handleOnChange}
   />
   <button type="submit">전송</button>
 </form>

3-3. form submit 핸들러 작성 (채팅 전송)

전송버튼을 누르면 sendChat이 실행되면서 Firebase 데이터베이스에 값이 저장된다.

💥e.preventDefault() 잊지 말고 작성해주기

  const handleSumbit = async (e) => {
    e.preventDefault();
    console.log(msg);
    try {
      await sendChat({
        message: msg,
        timestamp: Date.now(),
        uid: auth().currentUser.uid,
      });
    } catch (error) {
      console.log(error);
    }
  };

잘 저장되었다