Google is committed to advancing racial equity for Black communities. See how.
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Cloud-Funktionen für Firebase

In diesem Codelab erfahren Sie, wie Sie mit dem Firebase SDK für Google Cloud-Funktionen eine Chat-Webanwendung verbessern und mithilfe von Cloud-Funktionen Benachrichtigungen an Benutzer der Chat-App senden.

3b1284f5144b54f6.png

Was du lernen wirst

  • Erstellen Sie Google Cloud-Funktionen mit dem Firebase SDK.
  • Auslösen von Cloud-Funktionen basierend auf Auth-, Cloud Storage- und Cloud Firestore-Ereignissen.
  • Fügen Sie Ihrer Web-App Firebase Cloud Messaging-Unterstützung hinzu.

Was du brauchen wirst

  • Der IDE / Texteditor Ihrer Wahl wie WebStorm , Atom oder Sublime .
  • Ein Terminal zum Ausführen von Shell-Befehlen mit installiertem NodeJS v8.
  • Ein Browser wie Chrome.
  • Der Beispielcode. Siehe hierzu den nächsten Schritt.

Klonen Sie das GitHub-Repository über die Befehlszeile:

git clone https://github.com/firebase/friendlychat

Importieren Sie die Starter-App

Öffnen oder importieren Sie mit Ihrer IDE die android_studio_folder.png cloud-functions-start aus dem Beispielcode-Verzeichnis. Dieses Verzeichnis enthält den Startcode für das Codelab, das aus einer voll funktionsfähigen Chat-Webanwendung besteht.

Projekt erstellen

Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen und nennen Sie es FriendlyChat .

Klicken Sie auf Projekt erstellen .

Aktivieren Sie Google Auth

Damit sich Benutzer in der App anmelden können, verwenden wir die Google-Authentifizierung, die aktiviert werden muss.

Öffnen Sie in der Firebase-Konsole den Abschnitt " Entwickeln "> " Authentifizierung" > " Anmelden" (oder klicken Sie hier , um dorthin zu gelangen). Sie müssen den Google -Anmeldeanbieter aktivieren und auf SPEICHERN klicken. Auf diese Weise können sich Benutzer mit ihren Google-Konten bei der Web-App anmelden.

Sie können auch den öffentlich zugänglichen Namen Ihrer App auf " Freundlicher Chat" setzen :

8290061806aacb46.png

Cloud-Speicher aktivieren

Die App verwendet Cloud Storage, um Bilder hochzuladen. Um Cloud-Speicher in Ihrem Firebase-Projekt zu aktivieren, besuchen Sie den Abschnitt Speicher und klicken Sie auf die Schaltfläche Erste Schritte . Klicken Sie dann auf " Erhalten", wenn Sie den Haftungsausschluss zu den Sicherheitsregeln erhalten.

842ad84821323ef5.png

Über die Firebase-Befehlszeilenschnittstelle (CLI) können Sie die Webanwendung lokal bereitstellen und Ihre Webanwendung und Cloud-Funktionen bereitstellen.

Führen Sie zum Installieren oder Aktualisieren der CLI den folgenden Befehl npm aus:

npm -g install firebase-tools

Öffnen Sie eine Konsole und führen Sie Folgendes aus, um zu überprüfen, ob die CLI korrekt installiert wurde:

firebase --version

Stellen Sie sicher, dass die Version der Firebase-CLI über 4.0.0 liegt, damit sie über die neuesten Funktionen verfügt, die für Cloud-Funktionen erforderlich sind. Wenn nicht, führen Sie npm install -g firebase-tools um ein Upgrade wie oben gezeigt durchzuführen.

Autorisieren Sie die Firebase-CLI, indem Sie Folgendes ausführen:

firebase login

Stellen Sie sicher, dass Sie sich im cloud-functions-start und richten Sie die Firebase-CLI für die Verwendung Ihres Firebase-Projekts ein:

firebase use --add

Wählen Sie dann Ihre Projekt-ID aus und folgen Sie den Anweisungen. Wenn Sie dazu aufgefordert werden, können Sie einen beliebigen Alias ​​auswählen, z. B. codelab .

Nachdem Sie Ihr Projekt importiert und konfiguriert haben, können Sie die Web-App zum ersten Mal ausführen. Öffnen Sie eine Konsole im Ordner " cloud-functions-start " und führen Sie " firebase deploy --except functions wird die Web-App nur für das Firebase-Hosting firebase deploy --except functions :

firebase deploy --except functions

Dies ist die Konsolenausgabe, die Sie sehen sollten:

i deploying database, storage, hosting
✔  database: rules ready to deploy.
i  storage: checking rules for compilation errors...
✔  storage: rules file compiled successfully
i  hosting: preparing ./ directory for upload...
✔  hosting: ./ folder uploaded successfully
✔ storage: rules file compiled successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

Öffnen Sie die Web-App

In der letzten Zeile sollte die Hosting-URL angezeigt werden . Die Web-App sollte jetzt über diese URL bereitgestellt werden, die die Form https: // <Projekt-ID> .firebaseapp.com haben sollte. Öffne es. Sie sollten die funktionierende Benutzeroberfläche einer Chat-App sehen.

Melden Sie sich mit der Schaltfläche ANMELDEN MIT GOOGLE bei der App an und fügen Sie einige Nachrichten hinzu und veröffentlichen Sie Bilder:

3b1284f5144b54f6.png

Wenn Sie die App zum ersten Mal in einem neuen Browser anmelden, stellen Sie sicher, dass Sie Benachrichtigungen zulassen, wenn Sie dazu aufgefordert werden: 8b9d0c66dc36153d.png

Sie müssen Benachrichtigungen zu einem späteren Zeitpunkt aktivieren.

Wenn Sie versehentlich auf Blockieren geklickt haben, können Sie diese Einstellung ändern, indem Sie in der Chrome Omnibar auf die Schaltfläche 🔒 Sichern links neben der URL klicken und Benachrichtigungen> Auf dieser Site immer zulassen auswählen:

e926868b0546ed71.png

Jetzt werden wir einige Funktionen mit dem Firebase SDK für Cloud-Funktionen hinzufügen.

Mit Cloud-Funktionen können Sie problemlos Code verwenden, der in der Cloud ausgeführt wird, ohne einen Server einrichten zu müssen. Wir zeigen Ihnen, wie Sie Funktionen erstellen, die auf Ereignisse in Firebase Auth, Cloud Storage und Firebase Realtime Database reagieren. Beginnen wir mit Auth.

Wenn Sie das Firebase SDK für Cloud-Funktionen verwenden, befindet sich Ihr Funktionscode (standardmäßig) im functions . Ihr Funktionscode ist ebenfalls eine Node.js- App und benötigt daher eine package.json , die einige Informationen zu Ihrer App enthält und Abhängigkeiten auflistet.

Um es Ihnen einfacher zu machen, haben wir bereits die Datei functions/index.js erstellt, in die Ihr Code functions/index.js wird. Sie können diese Datei jederzeit überprüfen, bevor Sie fortfahren.

cd functions
ls

Wenn Sie mit Node.js nicht vertraut sind, sollten Sie mehr darüber erfahren, bevor Sie mit dem Codelab fortfahren.

In der Datei package.json sind bereits zwei erforderliche Abhängigkeiten aufgeführt: das Firebase SDK für Cloud-Funktionen und das Firebase Admin SDK . Um sie lokal zu installieren, führen Sie npm install im functions :

npm install

Schauen wir uns jetzt die Datei index.js :

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Wir importieren zuerst die erforderlichen Module und schreiben dann drei Funktionen anstelle der TODOs. Importieren wir zunächst die erforderlichen Knotenmodule.

Während dieses Codelabs werden zwei Module benötigt. Mit dem firebase-functions können wir die Triggerregeln für Cloud-Funktionen schreiben, während mit dem firebase-admin Modul die Firebase-Plattform auf einem Server mit Administratorzugriff verwendet werden kann, um beispielsweise auf das zu schreiben Cloud Firestore oder FCM-Benachrichtigungen senden.

index.js Datei index.js das erste TODO durch Folgendes:

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Firebase SDK for Google Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Das Firebase Admin SDK kann automatisch konfiguriert werden, wenn es in einer Cloud Functions-Umgebung oder anderen Google Cloud Platform-Containern bereitgestellt wird. Dies tun wir oben, wenn wir admin.initializeApp(); aufrufen admin.initializeApp();

Fügen wir nun eine Funktion hinzu, die ausgeführt wird, wenn sich ein Benutzer zum ersten Mal in Ihrer Chat-App anmeldet, und wir fügen eine Chat-Nachricht hinzu, um den Benutzer willkommen zu heißen.

Struktur der Chat-Nachrichten

Im FriendlyChat-Chat-Feed veröffentlichte Nachrichten werden im Cloud Firestore gespeichert. Werfen wir einen Blick auf die Datenstruktur, die wir für eine Nachricht verwenden. Senden Sie dazu eine neue Nachricht in den Chat mit der Aufschrift "Hello World":

11f5a676fbb1a69a.png

Dies sollte folgendermaßen aussehen:

fe6d1c020d0744cf.png

Klicken Sie in Ihrer Firebase-App-Konsole im Abschnitt Entwickeln auf Datenbank . Sie sollten die Nachrichtensammlung und ein Dokument sehen, das die von Ihnen geschriebene Nachricht enthält:

442c9c10b5e2b245.png

Wie Sie sehen können, werden Chat-Nachrichten im Cloud Firestore als Dokument mit den Attributen name , profilePicUrl , text und timestamp profilePicUrl , die der messages hinzugefügt wurden.

Begrüßungsnachrichten hinzufügen

Die erste Cloud-Funktion fügt eine Nachricht hinzu, die neue Benutzer im Chat begrüßt. Hierfür können wir den Trigger functions.auth().onCreate , der die Funktion jedes Mal functions.auth().onCreate , wenn sich ein Benutzer zum ersten Mal in Ihrer Firebase-App anmeldet. Fügen Sie die Funktion addWelcomeMessages zu Ihrer Datei index.js :

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  console.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  console.log('Welcome message written to database.');
});

Durch Hinzufügen dieser Funktion zum speziellen exports kann Node die Funktion außerhalb der aktuellen Datei zugänglich machen und ist für Cloud-Funktionen erforderlich.

In der obigen Funktion fügen wir der Liste der Chat-Nachrichten eine neue Willkommensnachricht hinzu, die von "Firebase Bot" gepostet wurde. Dazu verwenden wir die Methode add für die messages im Cloud Firestore, in der die Nachrichten des Chats gespeichert werden.

Da es sich um eine asynchrone Operation handelt, müssen wir das Versprechen zurückgeben, das angibt, wann der Cloud Firestore-Schreibvorgang abgeschlossen ist, damit Functions die Ausführung nicht zu früh beendet.

Stellen Sie die Funktion bereit

Die Funktion ist erst aktiv, nachdem Sie sie bereitgestellt haben. Führen Sie in der Befehlszeile firebase deploy --only functions :

firebase deploy --only functions

Dies ist die Konsolenausgabe, die Sie sehen sollten:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
⚠  functions: missing necessary APIs. Enabling now...
i  env: ensuring necessary APIs are enabled...
⚠  env: missing necessary APIs. Enabling now...
i  functions: waiting for APIs to activate...
i  env: waiting for APIs to activate...
✔  env: all necessary APIs are enabled
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function addWelcomeMessages...
✔  functions[addWelcomeMessages]: Successful create operation. 
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlypchat-1234/overview

Testen Sie die Funktion

Sobald die Funktion erfolgreich bereitgestellt wurde, benötigen Sie einen Benutzer, der sich zum ersten Mal anmeldet.

  1. Öffnen Sie Ihre App in Ihrem Browser unter Verwendung der Hosting-URL (in Form von https://<project-id>.firebaseapp.com ).
  2. Mit einem neuen Benutzer, melden Sie sich zum ersten Mal in der App auf die Schaltfläche Anmelden verwenden.

262535d1b1223c65.png

  1. Nach der Anmeldung sollte automatisch eine Begrüßungsnachricht angezeigt werden:

1c70e0d64b23525b.png

Benutzer können alle Arten von Bildern in den Chat hochladen, und es ist immer wichtig, anstößige Bilder zu moderieren, insbesondere auf öffentlichen sozialen Plattformen. In FriendlyChat werden die Bilder, die im Chat veröffentlicht werden, in Google Cloud Storage gespeichert.

Mit Cloud-Funktionen können Sie neue Bild-Uploads mit dem Trigger functions.storage().onFinalize . Dies wird jedes Mal ausgeführt, wenn eine neue Datei in Cloud Storage hochgeladen oder geändert wird.

Um Bilder zu moderieren, gehen wir wie folgt vor:

  1. Überprüfen Sie mithilfe der Cloud Vision-API, ob das Bild als "Erwachsener" oder "Gewalttätig" gekennzeichnet ist
  2. Wenn das Bild markiert wurde, laden Sie es auf die laufende Funktionsinstanz herunter
  3. Verwischen Sie das Bild mit ImageMagick
  4. Laden Sie das unscharfe Bild in den Cloud-Speicher hoch

Aktivieren Sie die Cloud Vision-API

Da wir in dieser Funktion die Google Cloud Vision-API verwenden, müssen Sie die API in Ihrem Firebase-Projekt aktivieren. Folgen Sie diesem Link , wählen Sie Ihr Firebase-Projekt aus und aktivieren Sie die API:

5c77fee51ec5de49.png

Abhängigkeiten installieren

Um die Bilder zu moderieren, benötigen wir einige Node.js-Pakete:

  • Die Google Cloud Vision-Clientbibliothek für Node.js: @ google-cloud / vision , um das Bild über die Cloud Vision-API auszuführen und unangemessene Bilder zu erkennen.
  • Eine Node.js-Bibliothek, mit der wir Prozesse ausführen können: child-process-versprechen , ImageMagick auszuführen, da das ImageMagick-Befehlszeilentool auf allen Funktionsinstanzen vorinstalliert ist.

Führen Sie den folgenden Befehl npm install --save um diese beiden Pakete in Ihrer Cloud Functions-App zu npm install --save . Stellen Sie sicher, dass Sie dies im functions tun.

npm install --save @google-cloud/vision@0.12.0 child-process-promise@2.2.1

Dadurch werden die beiden Pakete lokal installiert und als deklarierte Abhängigkeiten in Ihre package.json Datei package.json .

Abhängigkeiten importieren und konfigurieren

Fügen Sie zum Importieren der beiden installierten Abhängigkeiten und einiger Node.js-Kernmodule ( path , os und fs ), die wir in diesem Abschnitt benötigen, die folgenden Zeilen oben in Ihre index.js Datei ein:

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision();
const spawn = require('child-process-promise').spawn;

const path = require('path');
const os = require('os');
const fs = require('fs');

Da Ihre Funktion in einer Google Cloud-Umgebung ausgeführt wird, müssen die Cloud Storage- und Cloud Vision-Bibliotheken nicht konfiguriert werden. Sie werden automatisch für die Verwendung Ihres Projekts konfiguriert.

Unangemessene Bilder erkennen

Sie verwenden den Trigger " functions.storage.onChange Cloud Functions", der Ihren Code ausführt, sobald eine Datei oder ein Ordner in einem Cloud Storage-Bucket erstellt oder geändert wird. Fügen Sie die Funktion blurOffensiveImages zu Ihrer Datei index.js :

index.js

// Checks if uploaded images are flagged as Adult or Violence and if so blurs them.
exports.blurOffensiveImages = functions.runWith({memory: '2GB'}).storage.object().onFinalize(
    async (object) => {
      const image = {
        source: {imageUri: `gs://${object.bucket}/${object.name}`},
      };

      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(image);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.types.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        console.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      console.log('The image', object.name, 'has been detected as OK.');
    });

Beachten Sie, dass wir eine Konfiguration der Cloud Functions-Instanz hinzugefügt haben, mit der die Funktion ausgeführt wird. Mit .runWith({memory: '2GB'}) fordern wir an, dass die Instanz 2 GB Speicher anstelle der Standardeinstellung erhält. Dies ist hilfreich Funktion ist speicherintensiv.

Wenn die Funktion ausgelöst wird, wird das Bild über die Cloud Vision-API ausgeführt, um festzustellen, ob es als erwachsen oder gewalttätig gekennzeichnet ist. Wenn das Bild anhand dieser Kriterien als unangemessen erkannt wird, verwischen wir das Bild, was in der Funktion blurImage erfolgt, die als blurImage .

Das Bild verwischen

Fügen Sie die folgende blurImage Funktion in Ihrer index.js - Datei:

index.js

// Blurs the given image located in the given bucket using ImageMagick.
async function blurImage(filePath) {
  const tempLocalFile = path.join(os.tmpdir(), path.basename(filePath));
  const messageId = filePath.split(path.sep)[1];
  const bucket = admin.storage().bucket();

  // Download file from bucket.
  await bucket.file(filePath).download({destination: tempLocalFile});
  console.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await spawn('convert', [tempLocalFile, '-channel', 'RGBA', '-blur', '0x24', tempLocalFile]);
  console.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  console.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  console.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  console.log('Marked the image as moderated in the database.');
}

In der obigen Funktion wird die Bildbinärdatei aus dem Cloud-Speicher heruntergeladen. Anschließend wird das Bild mit dem convert von ImageMagick unscharf und die unscharfe Version wird erneut in den Speicherbereich hochgeladen. Anschließend löschen wir die Datei auf der Cloud Functions-Instanz, um Speicherplatz freizugeben. Dies geschieht, da dieselbe Cloud Functions-Instanz wiederverwendet werden kann und wenn die Dateien nicht bereinigt werden, möglicherweise nicht mehr genügend Festplatte vorhanden ist. Schließlich fügen wir der Chat-Nachricht einen Booleschen Wert hinzu, der angibt, dass das Bild moderiert wurde. Dadurch wird eine Aktualisierung der Nachricht auf dem Client ausgelöst.

Stellen Sie die Funktion bereit

Die Funktion ist erst aktiv, nachdem Sie sie bereitgestellt haben. Führen Sie in der Befehlszeile firebase deploy --only functions :

firebase deploy --only functions

Dies ist die Konsolenausgabe, die Sie sehen sollten:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: creating function blurOffensiveImages...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Testen Sie die Funktion

Sobald die Funktion erfolgreich bereitgestellt wurde:

  1. Öffnen Sie Ihre App in Ihrem Browser unter Verwendung der Hosting-URL (in Form von https://<project-id>.firebaseapp.com ).
  2. Sobald Sie in der App angemeldet sind, laden Sie ein Bild hoch: 4db9fdab56703e4a.png
  3. Wählen Sie Ihr bestes anstößiges Bild zum Hochladen aus (oder Sie können diesen fleischfressenden Zombie verwenden !) Und nach einigen Augenblicken sollte Ihr Beitrag mit einer unscharfen Version des Bildes aktualisiert werden: 83dd904fbaf97d2b.png

In diesem Abschnitt fügen Sie eine Cloud-Funktion hinzu, die Benachrichtigungen an Teilnehmer des Chats sendet, wenn eine neue Nachricht veröffentlicht wird.

Mit Firebase Cloud Messaging (FCM) können Sie Benachrichtigungen plattformübergreifend und zuverlässig an Ihre Benutzer senden. Um eine Benachrichtigung an einen Benutzer zu senden, benötigen Sie dessen FCM-Gerätetoken. Die von uns verwendete Chat-Web-App sammelt bereits Gerätetoken von Benutzern, wenn diese die App zum ersten Mal in einem neuen Browser oder Gerät öffnen. Diese Token werden im Cloud Firestore in der fcmTokens Sammlung gespeichert.

Wenn Sie erfahren möchten, wie Sie FCM-Gerätetoken in einer Web-App erhalten, können Sie das Firebase Web Codelab durchgehen .

Benachrichtigungen senden

Um zu erkennen, wann neue Nachrichten veröffentlicht werden, verwenden Sie den Trigger functions.firestore.document().onCreate Cloud Functions, der Ihren Code functions.firestore.document().onCreate wenn ein neues Objekt in einem bestimmten Pfad des Cloud Firestore erstellt wird. Fügen Sie die Funktion sendNotifications zu Ihrer Datei index.js :

index.js

// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
  async (snapshot) => {
    // Notification details.
    const text = snapshot.data().text;
    const payload = {
      notification: {
        title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
        body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
        icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
        click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
      }
    };

    // Get the list of device tokens.
    const allTokens = await admin.firestore().collection('fcmTokens').get();
    const tokens = [];
    allTokens.forEach((tokenDoc) => {
      tokens.push(tokenDoc.id);
    });

    if (tokens.length > 0) {
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);
      await cleanupTokens(response, tokens);
      console.log('Notifications have been sent and tokens cleaned up.');
    }
  });

In der obigen Funktion sammeln wir alle admin.messaging().sendToDevice aller Benutzer aus der Cloud Firestore-Datenbank und senden mit der Funktion admin.messaging().sendToDevice eine Benachrichtigung an diese.

Bereinigen Sie die Token

Zuletzt möchten wir die nicht mehr gültigen Token entfernen. Dies geschieht, wenn das Token, das wir einmal vom Benutzer erhalten haben, nicht mehr vom Browser oder Gerät verwendet wird. Dies ist beispielsweise der Fall, wenn der Benutzer die Benachrichtigungsberechtigung für seine Browsersitzung widerrufen hat. cleanupTokens Sie dazu die folgende cleanupTokens Funktion in Ihre index.js Datei ein:

index.js

// Cleans up the tokens that are no longer valid.
function cleanupTokens(response, tokens) {
 // For each notification we check if there was an error.
 const tokensDelete = [];
 response.results.forEach((result, index) => {
   const error = result.error;
   if (error) {
     console.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens who are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

Stellen Sie die Funktion bereit

Die Funktion ist erst aktiv, nachdem Sie sie bereitgestellt haben. Führen Sie in der Befehlszeile firebase deploy --only functions :

firebase deploy --only functions

Dies ist die Konsolenausgabe, die Sie sehen sollten:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: updating function blurOffensiveImages...
i  functions: creating function sendNotifications...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful updating operation.
✔  functions[sendNotifications]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Testen Sie die Funktion

  1. Öffnen Sie nach erfolgreicher Bereitstellung der Funktion Ihre App in Ihrem Browser unter Verwendung der Hosting-URL (in Form von https://<project-id>.firebaseapp.com ).
  2. Wenn Sie sich zum ersten Mal in der App anmelden, stellen Sie sicher, dass Sie Benachrichtigungen zulassen, wenn Sie dazu aufgefordert werden: 8b9d0c66dc36153d.png
  3. Schließen Sie die Registerkarte "Chat-App" oder zeigen Sie eine andere Registerkarte an: Benachrichtigungen werden nur angezeigt, wenn sich die App im Hintergrund befindet. Wenn Sie erfahren möchten, wie Sie Nachrichten empfangen, während Ihre App im Vordergrund steht, lesen Sie unsere Dokumentation .
  4. Melden Sie sich mit einem anderen Browser (oder einem Inkognito-Fenster) bei der App an und senden Sie eine Nachricht. Der erste Browser sollte eine Benachrichtigung anzeigen: 45282ab12b28b926.png

Sie haben das Firebase SDK für Cloud-Funktionen verwendet und einer Chat-App serverseitige Komponenten hinzugefügt.

Was wir behandelt haben

  • Erstellen von Cloud-Funktionen mit dem Firebase SDK für Cloud-Funktionen.
  • Auslösen von Cloud-Funktionen basierend auf Auth-, Cloud Storage- und Cloud Firestore-Ereignissen.
  • Fügen Sie Ihrer Web-App Firebase Cloud Messaging-Unterstützung hinzu.
  • Bereitgestellte Cloud-Funktionen mithilfe der Firebase-CLI.

Nächste Schritte

  • Erfahren Sie mehr über die anderen Auslösetypen für Cloud-Funktionen .
  • Verwenden Sie Firebase- und Cloud-Funktionen mit Ihrer eigenen App.

Erfahren Sie mehr