Vue PWA myLog - Cloud에서 FCM 전송

그랜파 개발자·2024년 10월 6일
FCMfirebase functionsvue

Vue PWA - myLog 개발

목록 보기
51/61

Vue로 PWA 개발 - 그랜파 개발자

51. Cloud에서 FCM 전송

구독자가 알림을 요청하였다면 firestore에 토큰이 저장되어 있습니다. 한사람의 구독자가 PC와 모바일 등을 사용할 수 있으므로 각 구독자는 여러 토큰이 있습니다. 구독자 또한 여러 사람입니다. 나의 여러 구독자에 대해 각 구독자의 저장된 토큰의 목록을 구하여 이들 토큰에 대해 알림을 전송할 수 있습니다.
푸시 알림은 여러 상황에서 보낼 수 있습니다. 마이로그 앱의 경우 마이로그를 작성하여 firestore에 저장할 때 모든 구독자에게 알림을 보내려고 합니다. 또, 푸시 알림은 마이로그를 저장할 때 구독자에게 보내는 것 뿐 아니라 여러 필요에 따라 전송할 수도 있습니다. 그러므로 우선 한사람의 회원에 대해 알림을 전송하는 기능을 먼저 구현해 봅시다.

Create a function to send fcm to firebase-functions v2.

firebase-functions v2로 fcm을 전송하는 기능 만들어 줘.

ChatGPT

To send Firebase Cloud Messaging (FCM) notifications using Firebase Cloud Functions v2, you'll create a function that can be triggered based on specific events, such as Firestore writes, or HTTP requests. This function will use the Firebase Admin SDK to send FCM notifications.

Firebase Cloud Functions v2를 사용하여 FCM(Firebase Cloud Messaging) 알림을 보내려면 Firestore 쓰기 또는 HTTP 요청과 같은 특정 이벤트를 기반으로 트리거될 수 있는 함수를 만듭니다. 이 함수는 Firebase Admin SDK를 사용하여 FCM 알림을 보냅니다.

Here's how you can create a Firebase Cloud Function (v2) to send FCM notifications:
FCM 알림을 보내기 위해 Firebase Cloud Function(v2)을 만드는 방법은 다음과 같습니다.

Step-by-Step Implementation: 단계별 구현:

  1. Set up Firebase Admin SDK: Ensure you have the Firebase Admin SDK set up in your Firebase Cloud Functions environment to send notifications.
    Firebase Admin SDK 설정: 알림을 보내려면 Firebase Cloud Functions 환경에 Firebase Admin SDK가 설정되어 있는지 확인하세요.

  2. Create a Cloud Function: The function can be triggered by Firestore events (e.g., when a new document is created) or via an HTTP request.
    Cloud 함수 만들기: 이 함수는 Firestore 이벤트(예: 새 문서가 생성될 때) 또는 HTTP 요청을 통해 트리거될 수 있습니다

  3. Send FCM notifications using the Firebase Admin SDK.
    Firebase Admin SDK를 사용하여 FCM 알림을 보냅니다.

1. Set Up Firebase Admin SDK

1. Firebase Admin SDK 설정

To use Firebase Admin SDK in your Cloud Functions, you need to install the Admin SDK in your functions folder:
Cloud Functions에서 Firebase Admin SDK를 사용하려면 함수 폴더에 Admin SDK를 설치해야 합니다.

npm install firebase-admin

2. Create Cloud Function to Send FCM Notifications

2. FCM 알림을 보내는 클라우드 기능 만들기

Here is an example of creating a Firebase Cloud Function in v2 that sends FCM notifications when triggered by a Firestore event or an HTTP request.
다음은 Firestore 이벤트 또는 HTTP 요청에 의해 트리거될 때 FCM 알림을 보내는 v2에서 Firebase Cloud 함수를 생성하는 예입니다.

Example: Firestore Trigger (v2) to Send FCM

예: FCM 전송을 위한 Firestore 트리거(v2)

// Import the Firebase Admin SDK
const functions = require('firebase-functions/v2');
const admin = require('firebase-admin');

// Initialize the Firebase Admin SDK
admin.initializeApp();

// Create a function that triggers when a new document is added to the 'posts' collection
exports.sendPostNotification = functions.firestore
  .document('posts/{postId}')
  .onCreate(async (snapshot, context) => {
    const newPost = snapshot.data();
    const postId = context.params.postId;

    // Create the notification payload
    const payload = {
      notification: {
        title: `New Post: ${newPost.title}`,
        body: newPost.content,
        click_action: `https://your-app.com/posts/${postId}`, // Link to open when notification is clicked
      },
    };

    try {
      // Get the list of FCM tokens from Firestore (or another source)
      const tokensSnapshot = await admin.firestore().collection('fcmTokens').get();
      const tokens = tokensSnapshot.docs.map(doc => doc.data().token);

      if (tokens.length > 0) {
        // Send notifications to all FCM tokens
        const response = await admin.messaging().sendToDevice(tokens, payload);
        console.log('Successfully sent message:', response);
      } else {
        console.log('No tokens available for notification');
      }
    } catch (error) {
      console.error('Error sending notification:', error);
    }
  });

Explanation: 설명:

1. Firestore Trigger: Firestore 트리거:

  • This function triggers when a new document is created in the posts collection in Firestore (onCreate).
  • 이 함수는 Firestore(onCreate)의 posts 컬렉션에 새 문서가 생성될 때 트리거됩니다.
  • It retrieves the newly created post (newPost) and the document ID (postId).
  • 새로 생성된 게시물(newPost)과 문서 ID(postId)를 검색합니다.

2. Notification Payload: 알림 페이로드:

  • The payload object contains the title and body of the notification as well as a click_action URL, which users will be redirected to when they click on the notification.
  • '페이로드' 개체에는 알림의 제목과 본문은 물론 사용자가 알림을 클릭하면 리디렉션되는 'click_action' URL도 포함되어 있습니다.

3. Fetching FCM Tokens: FCM 토큰 가져오기:

  • FCM tokens are fetched from the fcmTokens collection in Firestore. In this example, it's assumed that tokens are stored there under a token field.
  • FCM 토큰은 Firestore의 'fcmTokens' 컬렉션에서 가져옵니다. 이 예에서는 토큰이 token 필드 아래에 저장되어 있다고 가정합니다.

4. Sending Notifications: 알림 보내기:

  • admin.messaging().sendToDevice(tokens, payload) sends the notification to all devices registered with the FCM tokens.
  • admin.messaging().sendToDevice(tokens, payload)는 FCM 토큰에 등록된 모든 장치에 알림을 보냅니다.
  • The result of the FCM message is logged for debugging purposes.
  • FCM 메시지의 결과는 디버깅 목적으로 기록됩니다.

Example: HTTP Trigger (v2) to Send FCM

예: FCM 전송을 위한 HTTP 트리거(v2)

Alternatively, if you want to trigger the FCM notifications via an HTTP request (e.g., from your frontend or another system), you can create a function with an HTTP trigger:
또는 HTTP 요청(예: 프런트엔드 또는 다른 시스템)을 통해 FCM 알림을 트리거하려는 경우 HTTP 트리거를 사용하여 함수를 생성할 수 있습니다.

exports.sendCustomNotification = functions.https.onRequest(async (req, res) => {
  const { title, body, token } = req.body;

  const payload = {
    notification: {
      title: title,
      body: body,
    },
  };

  try {
    // Send notification to the given FCM token
    const response = await admin.messaging().sendToDevice(token, payload);
    res.status(200).send(`Notification sent successfully: ${response}`);
  } catch (error) {
    console.error('Error sending notification:', error);
    res.status(500).send(`Error sending notification: ${error}`);
  }
});

Explanation: 설명

1. HTTP Trigger: HTTP 트리거:

  • This function listens for HTTP requests and expects a JSON payload with title, body, and token (FCM token) fields.
  • 이 함수는 HTTP 요청을 수신하고 '제목', '본문' 및 '토큰'(FCM 토큰) 필드가 있는 JSON 페이로드를 기대합니다.

2. Notification Payload: 알림 페이로드:

  • Similar to the Firestore trigger, the notification payload is constructed with the title and body.
  • Firestore 트리거와 유사하게 알림 페이로드는 제목과 본문으로 구성됩니다.

3. Sending the Notification: 알림 보내기:

  • The notification is sent using admin.messaging().sendToDevice(token, payload), and the result is returned to the client.
  • admin.messaging().sendToDevice(token, payload)를 사용하여 알림을 보내고 그 결과를 클라이언트에 반환합니다.

3. Deploy the Function 함수 배포

Deploy the function using the Firebase CLI:
Firebase CLI를 사용하여 함수를 배포합니다.

firebase deploy --only functions

Summary: 요약:

  • You can trigger the FCM function via Firestore (when a document is created) or via an HTTP request.
  • Firestore(문서 생성 시) 또는 HTTP 요청을 통해 FCM 기능을 트리거할 수 있습니다.
  • The Firebase Admin SDK is used to send notifications to devices with FCM tokens.
  • Firebase Admin SDK는 FCM 토큰이 있는 기기에 알림을 보내는 데 사용됩니다.
  • Customize the notification payload to include links or other data to handle notification clicks.
  • 알림 클릭을 처리하기 위한 링크나 기타 데이터를 포함하도록 알림 페이로드를 맞춤설정하세요.
  • Ensure that the tokens are correctly stored and fetched from Firestore or another source, so the function can send notifications to the right devices.
  • 함수가 올바른 기기에 알림을 보낼 수 있도록 토큰이 Firestore 또는 다른 소스에서 올바르게 저장되고 가져와졌는지 확인하세요.

This is a simple way to implement FCM using Firebase Cloud Functions v2..
이는 Firebase Cloud Functions v2를 사용하여 FCM을 구현하는 간단한 방법입니다.

profile
그랜파 개발자
ChatGPT와 함께 Vue PWA을 공부합니다.
이전 포스트

Vue PWA myLog - Firebase Functions

다음 포스트

Vue PWA myLog - FCM 전송 구현

0개의 댓글