Cloud Functions für Firebase

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie mit dem Firebase SDK für Google Cloud Functions eine Chat-Web-App verbessern und mit Cloud Functions Benachrichtigungen an Nutzer der Chat-App senden.

3b1284f5144b54f6.png

Was du lernst

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

Was du brauchen wirst

  • Eine Kreditkarte. Cloud Functions for Firebase erfordert den Firebase Blaze-Tarif. Das bedeutet, dass Sie die Abrechnung für Ihr Firebase-Projekt mit einer Kreditkarte aktivieren müssen.
  • Der IDE / Text - Editor 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 dazu den nächsten Schritt.

2. Holen Sie sich den Beispielcode

Klonen Sie die 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 - Verzeichnis aus dem Beispielcode - Verzeichnis. Dieses Verzeichnis enthält den Startcode für das Codelab, das aus einer voll funktionsfähigen Chat Web App besteht.

3. Erstellen Sie ein Firebase-Projekt und richten Sie Ihre App ein

Projekt erstellen

In der Firebase - Konsole klicken Sie auf Projekt hinzufügen und nennen es FriendlyChat.

Klicken Sie auf Projekt erstellen.

Upgrade auf den Blaze-Plan

Um Cloud - Funktionen für die Firebase verwenden Sie müssen Ihr Projekt Firebase auf den upgade Blaze Fakturierungsplan . Dazu müssen Sie Ihrem Google Cloud-Konto eine Kreditkarte oder ein anderes Abrechnungsinstrument hinzufügen.

Alle Firebase-Projekte, einschließlich derjenigen im Blaze-Plan, haben weiterhin Zugriff auf die kostenlosen Nutzungskontingente für Cloud Functions. Die in diesem Codelab beschriebenen Schritte fallen unter die Nutzungsbeschränkungen des kostenlosen Kontingents. Allerdings werden Sie kleine Gebühren (siehe etwa $ 0,03 ) von Cloud Storage , die verwendet wird Ihre Cloud - Funktionen Build Bilder zu hosten.

Wenn Sie keinen Zugang zu einer Kreditkarte oder unbequem sind mit dem Blaze Plan fortfahren, sollten Sie die Verwendung von Firebase Emulator Suite , die es Ihnen erlaubt, Cloud - Funktionen kostenlos auf Ihrem lokalen Rechner zu emulieren.

Google-Authentifizierung aktivieren

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

In der Firebase Console öffnen den Abschnitt> Authentication> ANMELDEN Registerkarte Methode (oder Entwickeln Sie hier klicken , dorthin zu gehen) können Sie die Google-Anmeldung aktivieren müssen Provider und auf Speichern klicken. Dadurch können sich Benutzer mit ihren Google-Konten in der Web-App anmelden.

Auch fühlen sich frei , die öffentlich zugänglichen Namen der App im Friendly Chat zu setzen:

8290061806aacb46.png

Cloud-Speicher aktivieren

Die App verwendet Cloud Storage, um Bilder hochzuladen. Cloud Storage auf Ihrem Firebase Projekt Besuch den Speicherabschnitt und klicken Sie auf die Schaltfläche Get Started zu ermöglichen. Klicken Sie dann wird es , wenn Sie die rechtlichen Hinweise zu den Sicherheitsregeln erhalten.

842ad84821323ef5.png

4. Installieren Sie die Firebase-Befehlszeilenschnittstelle

Mit der Firebase Command Line Interface (CLI) können Sie die Web-App lokal bereitstellen und Ihre Web-App und Cloud Functions bereitstellen.

Führen Sie den folgenden npm-Befehl aus, um die CLI zu installieren oder zu aktualisieren:

npm -g install firebase-tools

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

firebase --version

Stellen Sie sicher , dass die Version des Firebase CLI ist oben 4.0.0 , so dass sie alle hat die neueste Cloud - Funktionen erforderlichen Funktionen. Wenn nicht, laufen npm install -g firebase-tools zu aktualisieren , wie oben gezeigt.

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

firebase login

Stellen Sie sicher , dass Sie in der sind cloud-functions-start - Verzeichnis dann die Firebase CLI einrichten, um Ihr Firebase - Projekt zu verwenden:

firebase use --add

Wählen Sie dann Ihre Projekt-ID aus und folgen Sie den Anweisungen. Wenn Sie gefragt werden , können Sie alle Alias, wie wählen codelab zum Beispiel.

5. Bereitstellen und Ausführen der Web-App

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

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

Die letzte Zeile sollte die Hosting - URL angezeigt werden soll . Die Web-App sollte nun von dieser URL bedient werden, die das Format https://<Projekt-ID>.firebaseapp.com haben sollte. Öffne es. Sie sollten die funktionierende Benutzeroberfläche einer Chat-App sehen.

Melden Sie sich in der App unter Verwendung des SIGN-IN MIT GOOGLE - Taste und fühlen sich frei , einige Nachrichten und Post Bilder hinzufügen:

3b1284f5144b54f6.png

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

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

Wenn Sie versehentlich Sperren geklickt haben , können Sie diese Einstellung , indem Sie auf der linken Seite der URL in der Chrome Omnibar auf der 🔒 Sichere Taste ändern und Benachrichtigungen Auswahl> Lassen Sie immer auf dieser Site:

e926868b0546ed71.png

Jetzt fügen wir mithilfe des Firebase SDK for Cloud Functions einige Funktionen hinzu.

6. Das Funktionsverzeichnis

Mit Cloud Functions können Sie problemlos Code verwenden, der in der Cloud ausgeführt wird, ohne dass ein Server eingerichtet werden muss. Wir zeigen Ihnen, wie Sie Funktionen erstellen, die auf Firebase Auth-, Cloud Storage- und Firebase Realtime Database-Ereignisse reagieren. Beginnen wir mit Auth.

Wenn die Firebase SDK für Cloud - Funktionen verwenden, Code - Funktionen werden unter dem Live - functions Verzeichnis (Standard). Ihre Funktionen Code ist auch ein Node.js App und benötigt daher eine package.json , die einige Informationen über Ihre Anwendung und Listen Abhängigkeiten gibt.

Um es einfacher für Sie , wir haben bereits die erstellte functions/index.js Datei , in der Sie den Code gehen. Fühlen Sie sich frei, diese Datei zu überprüfen, bevor Sie fortfahren.

cd functions
ls

Wenn Sie nicht vertraut mit sind Node.js wird es helfen , mehr darüber zu erfahren , bevor Sie den Code - Lab fort.

Die package.json Datei listet bereits zwei erforderlichen Abhängigkeiten: die Firebase SDK für Cloud - Funktionen und die Firebase Admin SDK . Um sie zu installieren lokal ausführen npm install von den functions Ordner:

npm install

Lassen Sie uns jetzt einen Blick auf die haben index.js Datei:

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 benötigten Module und schreiben dann drei Functions anstelle der TODOs. Lassen Sie uns zunächst die erforderlichen Node-Module importieren.

7. Importieren Sie die Cloud Functions- und Firebase Admin-Module

Zwei Module werden während dieses Codelab erforderlich sein, die firebase-functions Modul ermöglicht es uns , die Cloud - Funktionen auslösen Regeln zu schreiben, während das firebase-admin - Modul ermöglicht es uns , die Firebase - Plattform auf einem Server mit Admin - Zugriff zu verwenden, zum Beispiel zu schreiben , um die Cloud Firestore oder senden Sie FCM-Benachrichtigungen.

In der index.js Datei, ersetzen Sie den ersten TODO mit folgendem:

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 bei der Bereitstellung in einer Cloud Functions-Umgebung oder anderen Google Cloud Platform-Containern automatisch konfiguriert werden. Dies ist , was wir tun , oben beim Aufruf 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.

8. Willkommen neue Benutzer

Struktur der Chatnachrichten

Im Chat-Feed von FriendlyChat gepostete Nachrichten werden im Cloud Firestore gespeichert. Schauen wir uns die Datenstruktur an, die wir für eine Nachricht verwenden. Posten Sie dazu eine neue Nachricht in den Chat, die "Hello World" lautet:

11f5a676fbb1a69a.png

Dies sollte erscheinen als:

fe6d1c020d0744cf.png

In Ihrer Firebase App - Konsole klicken Sie auf Datenbank unter dem Abschnitt Develop. Sie sollten die Nachrichtensammlung und ein Dokument sehen, das die Nachricht enthält, die Sie geschrieben haben:

442c9c10b5e2b245.png

Wie Sie sehen können, Chat - Nachrichten in den Cloud Firestor als Dokument mit dem gespeicherten name , profilePicUrl , text und timestamp hinzugefügt Attribute in der messages - Sammlung.

Willkommensnachrichten hinzufügen

Die erste Cloud - Funktion fügt eine Nachricht , die neue Benutzer in den Chat begrüßt. Hierfür können wir den Trigger verwenden functions.auth().onCreate , die die Funktion eines Benutzer-in zum ersten Mal in Ihrer Firebase App jedes Mal ausgeführt wird . Fügen Sie die addWelcomeMessages Funktion in Ihre index.js Datei:

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.');
});

Addiert man diese Funktion auf die speziellen exports Objekt ist der Weg der Knoten machen die Funktion zugänglich außerhalb der aktuellen Datei und ist für Cloud - Funktionen erforderlich.

In der obigen Funktion fügen wir eine neue Willkommensnachricht von "Firebase Bot" zur Liste der Chatnachrichten hinzu. Wir tun dies , indem die Verwendung von add - Methode auf der messages - Sammlung in den Cloud Firestor , die sind , wo die Meldungen des Chat gespeichert sind.

Da dies ein asynchroner Betrieb ist, müssen wir die Rückkehr Versprechen anzeigt , wenn das Wolke Firestor Schreib beendet hat, so dass Funktionen nicht , die Ausführung zu früh nicht verlassen.

Bereitstellen der Funktion

Die Funktion ist erst aktiv, nachdem Sie sie bereitgestellt haben. Auf der Kommandozeile Lauf 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

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

  1. Öffnen Sie Ihre App in Ihrem Browser die 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 Willkommensnachricht angezeigt werden:

1c70e0d64b23525b.png

9. Bildermoderation

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

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

Um Bilder zu moderieren, durchlaufen wir den folgenden Prozess:

  1. Überprüfen Sie, ob das Bild als Erwachsener gekennzeichnet ist oder Violent die Verwendung von Cloud - Vision - API
  2. Wenn das Bild markiert wurde, laden Sie es auf die laufende Functions-Instanz herunter
  3. Blur das Bild mit ImageMagick
  4. Laden Sie das unscharfe Bild in Cloud Storage 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 Ihren Firebase - Projekt 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 - Client - Bibliothek für Node.js: @ google-Wolke / Vision das Bild durch die Cloud - Vision - API ausführen , um unangebrachte Bilder zu erkennen.
  • Eine Node.js Bibliothek ermöglicht es uns , Prozesse auszuführen: Kind-Prozess-Versprechen zu laufen ImageMagick seit dem ImageMagick Befehlszeilentool kommt auf alle Funktionen Instanzen vorinstalliert.

Um diese beiden Pakete in IhrDeterm Cloud - Funktionen App zu installieren, führt nach der npm install --save Befehl. Stellen Sie sicher , dass Sie dies tun aus dem functions - Verzeichnis.

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

Dadurch werden die beiden Pakete lokal und fügen Sie sie als deklariert Abhängigkeiten in Ihrer installieren package.json Datei.

Abhängigkeiten importieren und konfigurieren

So importieren Sie die zwei Abhängigkeiten , die installiert wurden und einige Node.js Kernmodule ( path , os und fs ) , dass wir in diesem Abschnitt die folgenden Zeilen an der Spitze Ihres benötigen index.js Datei:

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 finden unter Verwendung functions.storage.onChange Cloud - Funktionen auslösen , die so bald Ihren Code ausgeführt wird als eine Datei oder einen Ordner erstellt oder in einer Cloud Storage Eimer modifiziert. Fügen Sie die blurOffensiveImages Funktion in Ihre index.js Datei:

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 - Funktionen Instanz hinzugefügt, die die Funktion ausgeführt wird, mit .runWith({memory: '2GB'}) wir fordern , dass die Instanz 2 GB Speicher wird statt der Standard, dies wird dazu beitragen , da dies Funktion ist speicherintensiv.

Wenn die Funktion ausgelöst wird, wird das Bild über die Cloud Vision API ausgeführt, um zu erkennen, ob es als nicht jugendfrei oder gewalttätig gekennzeichnet ist. Wenn das Bild als unangemessen auf der Grundlage dieser Kriterien festgestellt wird wir unscharfe Bilder , die in der fertig ist blurImage Funktion , die wir gleich sehen werden.

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 Image-Binärdatei aus Cloud Storage heruntergeladen. Dann wird das Bild mit ImageMagicks verschwommen convert Werkzeug und die unscharfe Version ist neu hochgeladen auf dem Storage Eimer. Dann löschen wir die Datei auf der Cloud Functions-Instanz, um Speicherplatz freizugeben. Dies tun wir, weil dieselbe Cloud Functions-Instanz wiederverwendet werden kann und wenn Dateien nicht bereinigt werden, der Speicherplatz aufgebraucht sein könnte. Schließlich fügen wir der Chat-Nachricht einen Booleschen Wert hinzu, der angibt, dass das Bild moderiert wurde. Dies löst eine Aktualisierung der Nachricht auf dem Client aus.

Bereitstellen der Funktion

Die Funktion ist erst aktiv, nachdem Sie sie bereitgestellt haben. Auf der Kommandozeile Lauf 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

Nachdem die Funktion erfolgreich bereitgestellt wurde:

  1. Öffnen Sie Ihre App in Ihrem Browser die Hosting - URL (in Form von https://<project-id>.firebaseapp.com ).
  2. Sobald Sie sich in der App angemeldet haben, laden Sie ein Bild hoch: 4db9fdab56703e4a.png
  3. Wählen Sie Ihre beste Offensive Bild hochladen (oder Sie können diese verwenden , Fleisch zu essen Zombie !) Und nach wenigen Augenblicken sollten Sie Ihren Beitrag Refresh mit einem unscharfen Version des Bildes sehen: 83dd904fbaf97d2b.png

10. Benachrichtigungen über neue Nachrichten

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

Mit Firebase Cloud Messaging (FCM) Sie Benachrichtigungen an den Benutzer in einer Cross - Plattform und zuverlässige Art und Weise 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äte-Token von Benutzern, wenn diese die App zum ersten Mal in einem neuen Browser oder Gerät öffnen. Dieser Marker wird in Cloud - Firestor in der gespeicherten fcmTokens Sammlung.

Wenn Sie möchten lernen , wie man FCM Geräte - Tokens auf einer Web - App bekommen Sie durch das gehen kann Firebase Web Codelab .

Benachrichtigungen senden

Erkennen , wenn neue Nachrichten geschrieben werden werden Sie die verwenden functions.firestore.document().onCreate Cloud - Funktionen auslösen , die Ihren Code ausgeführt wird, wenn ein neues Objekt zu einem bestimmten Pfad der Wolke Firestor erstellt wird. Fügen Sie die sendNotifications Funktion in Ihre index.js Datei:

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 Funktion oben wir alle Benutzer Geräte - Tokens aus der Cloud Firestore - Datenbank und sendet eine Benachrichtigung an jede dieser mit dem sammeln admin.messaging().sendToDevice Funktion.

Bereinigen Sie die Token

Zuletzt möchten wir die Token entfernen, die nicht mehr gültig sind. Dies geschieht, wenn das Token, das wir einmal vom Benutzer erhalten haben, vom Browser oder Gerät nicht mehr verwendet wird. Dies ist beispielsweise der Fall, wenn der Nutzer die Benachrichtigungsberechtigung für seine Browsersitzung widerrufen hat. Um dies zu tun fügen Sie den folgenden cleanupTokens in Ihrer Funktion index.js Datei:

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 that 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);
}

Bereitstellen der Funktion

Die Funktion ist erst aktiv, nachdem Sie sie bereitgestellt haben. Auf der Kommandozeile Lauf 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. Sobald die Funktion erfolgreich eingesetzt hat, öffnen Sie Ihre App in Ihrem Browser die 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. Tab der Chat-App schließen oder einen anderen Tab anzeigen: Benachrichtigungen werden nur angezeigt, wenn sich die App im Hintergrund befindet. Wenn Sie möchten lernen , wie man Nachrichten empfangen , während die App im Vordergrund haben einen Blick auf unsere Dokumentation .
  4. Melden Sie sich mit einem anderen Browser (oder einem Inkognito-Fenster) bei der App an und posten Sie eine Nachricht. Sie sollten eine Benachrichtigung sehen, die vom ersten Browser angezeigt wird: 45282ab12b28b926.png

11. Herzlichen Glückwunsch!

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

Was wir abgedeckt haben

  • Cloud Functions mit dem Firebase SDK for Cloud Functions erstellen.
  • Cloud Functions basierend auf Auth-, Cloud Storage- und Cloud Firestore-Ereignissen auslösen.
  • Fügen Sie Ihrer Web-App Firebase Cloud Messaging-Unterstützung hinzu.
  • Cloud Functions mithilfe der Firebase-Befehlszeile bereitgestellt.

Nächste Schritte

Erfahren Sie mehr