주제를 사용하여 기본 Firebase 푸시 알림에 반응합니다.

주제 알림을 사용하는 이유.

FCM 주제 메시징을 사용하면 특정 주제를 선택한 여러 기기에 메시지를 보낼 수 있습니다. 주제를 작성하고 사용자가 해당 주제를 구독하면 Fire-Cloud-Messaging이 올바른 장치로 안정적으로 메시지 라우팅 및 전달을 처리합니다.

예를 들어 스포츠 앱 사용자는 좋아하는 팀의 라이브 게임 점수 자동 업데이트를 구독할 수 있습니다.

전제 조건

시작하기 전에 React Native로 프로젝트를 생성할 수 있고 활성 Firebase 프로젝트가 있다고 가정합니다. 이러한 전제 조건을 충족하지 않는 경우 아래 링크를 따르십시오.

React Native - Setting up the development environment

Create a new Firebase project

먼저 firebase 클라우드 메시징 패키지를 설치하고 통신합니다.

앱 모듈 설치 및 설정npm install @react-native-firebase/app메시징 모듈 설치npm install @react-native-firebase/messaging
고객 입장에서
먼저 rnFireBase.ts를 생성합니다.
수입품: import messaging from "@react-native-firebase/messaging";
다음 코드를 추가하여 알림을 수신하기 위해 클라이언트로부터 권한을 요청합니다.

export const requestUserPermission = async () => {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;
  if (enabled) {
    console.log("Authorization status:", authStatus);
  }
};

그런 다음 사용자가 특정 주제를 구독할 수 있도록 코드를 추가해야 합니다.

export const subscribeTopic = async (topic) => {
  messaging()
    .subscribeToTopic(topic)
    .then(() => console.log("Subscribed to topic:", topic))
    .catch((e) => {
      console.log(e);
    });
};

이제 어디에서나 subscribeTopic을 호출하여 특정 주제를 구독할 수 있습니다.
예를 들어 index.js에서 다음을 수행하십시오. subscribeTopic("new-listing");이제 우리는 클라이언트 측을 위해 한 가지 더 간단한 일을 해야 합니다. 바로 아래와 같이 React Native Component를 추가하는 것입니다.

import messaging from "@react-native-firebase/messaging";
import { useEffect } from "react";
import { Alert } from "react-native";

import { requestUserPermission } from "./rnfirbase";

const RemotePushController = () => {
  //if app is in background then also handle the notification
  messaging().setBackgroundMessageHandler(async function (remoteMessage) {
    console.log("Message handled in the background!", remoteMessage); 
  });
  useEffect(() => {
    requestUserPermission();
   //handles notifcations
    messaging().onMessage(async (remoteMessage) => {
      Alert.alert("A new FCM message arrived!", JSON.stringify(remoteMessage));
    });
  }, []);
  return null;
};

export default RemotePushController;

이제 원하는 곳에 RemotePushController를 추가하십시오. 루트 구성 요소에 RemotePushController를 추가했습니다.
건배:) 우리는 모두 클라이언트 측에서 완료되었습니다.

서버 측

서버 측의 경우 먼저 Firebase를 초기화해야 합니다.
이미 초기화한 경우 건너뛰고 아직 없는 경우 이 행을 추가하십시오export const messaging = admin.messaging();.

import admin from "firebase-admin";

import serviceAccount from "./service_account.json";

const app = admin.initializeApp({
  credential: admin.credential.cert({
    privateKey: serviceAccount.private_key,
    clientEmail: serviceAccount.client_email,
    projectId: serviceAccount.project_id,
  }),
});
export const messaging = admin.messaging();
export const firebaseApp = app;

이제 보낼 notify.ts를 작성하십시오.
알림

import { messaging } from "./initFirebase";

export const sendNotificationToClient = async (topic: string, data: any) => {
  // console.log(messaging);
  messaging
    .sendToTopic(topic, data)
    .then((response) => {
      console.log(`Notifications sent:${response}successful `);
    })
    .catch((error) => {
      console.log("Error sending message:", error);
    });
};

export default sendNotificationToClient;

sendNotifications.ts 만들기

import * as notify from "./notify";
export const notificationSender = async (topic: string, message: string) => {
  try {
    // If we want to save topic to DataBase then we do that here;
    const messagetoSend = {
      notification: {
        title: "New Test Message",
        body: message,
      },
    };
    notify.sendNotificationToClient(topic, messagetoSend);
  } catch (err) {
    console.log("🚀 ~ file: Message.ts ~ line 19 ~ addMessage ~ err", err);
  }
};

모두 끝났습니다. 지금해야 할 일은 전화하는 것뿐입니다

notificationSender(
            "new-listing",
            `This is a string message is being to sent with notification `
          );

서버 코드의 어느 곳에서나.