[React] FCM 메세지 보내기 요청 to NodeJS ( firebase-admin )

리액트에서 node js로 요정을 하여 fcm 메세지를 보내는 코드를 작성 해보자.

 

import { messaging } from 'lib/firestore/config';
import { getToken } from "firebase/messaging";
import db from 'lib/firestore';
export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;

export const getMessage = async (profile) => {
  let title = "타이틀";
  let body="테스트";
  
  try {
    const permission = await Notification.requestPermission();
    if (permission === "granted") {
        const token = await getToken(messaging, {
            vapidKey: "자신의 vapid Key",
          });
        if (token) {
            // 토큰 저장
            const res = await db.user.updateToken(profile.id, {...profile, token: token})
                try {
                  
                  const message = {
                    token: token,
                    title: title,
                    body: body,
                  };

                  const response = await fetch(API_BASE_URL + '/send-fcm', {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(message),
                  });
              
                  if (response.ok) {
                    console.log('FCM 메시지 전송 성공');
                  } else {
                    console.error('FCM 메시지 전송 실패');
                  }
                } catch (error) {
                  console.error('FCM 전송 중 에러 발생:', error);
                }
            // sendTokenToServer(token);// (토큰을 서버로 전송하는 로직)
            } else {
                // 토큰 저장 오류
                alert(
                    "토큰 등록이 불가능 합니다. 생성하려면 권한을 허용해주세요"
                );
            }
        } else if(permission === "denied"){
            alert(
                "메세지 알람 권한이 차단되었습니다. 알림을 사용하시려면 권한을 허용해주세요"
            );
        }
    } catch (error) {
        console.error("푸시 토큰 가져오는 중에 에러 발생", error);
    }
}

 

vapidKey 에는 Firebase - 프로젝트설정 - 클라우드 메시징

 

웹 푸시 인증서에있는 키 쌍이다.

잘려서 안나오는 부분이 있기 때문에 3번 클릭을 연속으로하여 라인을 모두 선택 후 복사, 붙여넣기 하자.

 

URL 은 해당글에서 만든 API 를 가르키를 주소가 들어가야 한다.

[NodeJS] Node + express api server (노드 + 익스프레스 API 서버 만들기)