Wysyłaj powiadomienia z aplikacji internetowej za pomocą Cloud Messaging i Cloud Functions

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

1. Przegląd

Podczas tego ćwiczenia z programowania dowiesz się, jak używać Cloud Functions dla Firebase do dodawania funkcji do aplikacji internetowej czatu przez wysyłanie powiadomień do użytkowników aplikacji czatu.

3b1284f5144b54f6.png

Czego się nauczysz

  • Utwórz Google Cloud Functions za pomocą pakietu Firebase SDK.
  • Uruchamiaj funkcje w chmurze na podstawie zdarzeń Auth, Cloud Storage i Cloud Firestore.
  • Dodaj obsługę Firebase Cloud Messaging do swojej aplikacji internetowej.

Co będziesz potrzebował

  • Karta kredytowa. Cloud Functions dla Firebase wymaga abonamentu Firebase Blaze, co oznacza, że ​​musisz włączyć rozliczenia w projekcie Firebase przy użyciu karty kredytowej.
  • Edytor IDE/tekstu do wyboru, taki jak WebStorm , Atom lub Sublime .
  • Terminal do uruchamiania poleceń powłoki z zainstalowanym NodeJS v9.
  • Przeglądarka taka jak Chrome.
  • Przykładowy kod. Zobacz następny krok.

2. Pobierz przykładowy kod

Sklonuj repozytorium GitHub z wiersza poleceń:

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

Zaimportuj aplikację startową

Używając swojego IDE, otwórz lub zaimportuj android_studio_folder.png cloud-functions-start katalog z przykładowego katalogu kodu. Ten katalog zawiera kod startowy ćwiczenia z programowania, które składa się z w pełni funkcjonalnej aplikacji Chat Web App.

3. Utwórz projekt Firebase i skonfiguruj swoją aplikację

Utwórz projekt

W Konsoli Firebase kliknij Dodaj projekt i nazwij go FriendlyChat .

Kliknij opcję Utwórz projekt .

Przejdź na plan Blaze

Aby korzystać z Cloud Functions dla Firebase, musisz zaktualizować swój projekt Firebase do planu rozliczeniowego Blaze . Będzie to wymagało dodania karty kredytowej lub innego instrumentu rozliczeniowego do konta Google Cloud.

Wszystkie projekty Firebase, w tym te objęte abonamentem Blaze, nadal mają dostęp do bezpłatnych limitów użytkowania Cloud Functions. Kroki opisane w tym ćwiczeniu programowania będą mieścić się w limitach użycia warstwy bezpłatnej. Zobaczysz jednak niewielkie opłaty ( około 0,03 USD ) z Cloud Storage, które jest używane do hostowania obrazów kompilacji Cloud Functions.

Jeśli nie masz dostępu do karty kredytowej lub nie czujesz się komfortowo, kontynuując plan Blaze, rozważ skorzystanie z pakietu Firebase Emulator Suite , który pozwoli Ci bezpłatnie emulować Cloud Functions na komputerze lokalnym.

Włącz uwierzytelnianie Google

Aby umożliwić użytkownikom logowanie się do aplikacji, użyjemy uwierzytelniania Google, które musi być włączone.

W Konsoli Firebase otwórz sekcję Kompilacja > Uwierzytelnianie > karta Metoda logowania (lub kliknij tutaj, aby tam przejść). Następnie włącz dostawcę logowania Google i kliknij Zapisz . Umożliwi to użytkownikom logowanie się w aplikacji internetowej przy użyciu swoich kont Google.

Możesz także ustawić publiczną nazwę swojej aplikacji na Przyjazny czat :

8290061806aacb46.png

Włącz przechowywanie w chmurze

Aplikacja używa Cloud Storage do przesyłania zdjęć. Aby włączyć Cloud Storage w projekcie Firebase, przejdź do sekcji Storage i kliknij przycisk Rozpocznij . Wykonaj podane tam kroki, a dla lokalizacji Cloud Storage pojawi się wartość domyślna do użycia. Kliknij Gotowe później.

Dodaj aplikację internetową

W Konsoli Firebase dodaj aplikację internetową. Aby to zrobić, przejdź do Ustawień projektu i przewiń w dół do Dodaj aplikację . Jako platformę wybierz sieć i zaznacz pole konfiguracji Hostingu Firebase, a następnie zarejestruj aplikację i kliknij Dalej w pozostałych krokach, a na końcu kliknij Przejdź do konsoli .

4. Zainstaluj interfejs wiersza poleceń Firebase

Interfejs wiersza poleceń Firebase (CLI) umożliwia lokalną obsługę aplikacji internetowej oraz wdrażanie aplikacji internetowej i Cloud Functions.

Aby zainstalować lub zaktualizować CLI, uruchom następujące polecenie npm:

npm -g install firebase-tools

Aby sprawdzić, czy CLI zostało poprawnie zainstalowane, otwórz konsolę i uruchom:

firebase --version

Upewnij się, że wersja interfejsu Firebase CLI jest wyższa niż 4.0.0 , aby zawierała wszystkie najnowsze funkcje wymagane przez Cloud Functions. Jeśli nie, uruchom npm install -g firebase-tools aby zaktualizować, jak pokazano powyżej.

Autoryzuj interfejs wiersza polecenia Firebase, uruchamiając:

firebase login

Upewnij się, że jesteś w katalogu cloud-functions-start , a następnie skonfiguruj interfejs wiersza polecenia Firebase do korzystania z projektu Firebase:

firebase use --add

Następnie wybierz swój identyfikator projektu i postępuj zgodnie z instrukcjami. Po wyświetleniu monitu możesz wybrać dowolny alias, na przykład codelab .

5. Wdróż i uruchom aplikację internetową

Teraz, po zaimportowaniu i skonfigurowaniu projektu, jesteś gotowy do uruchomienia aplikacji internetowej po raz pierwszy! Otwórz okno terminala, przejdź do folderu cloud-functions-start i wdróż aplikację internetową na hostingu Firebase przy użyciu:

firebase deploy --except functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Otwórz aplikację internetową

Ostatni wiersz powinien zawierać adres URL hostingu. Aplikacja internetowa powinna być teraz obsługiwana z tego adresu URL, który powinien mieć format https://<identyfikator-projektu>.firebaseapp.com. Otwórz to. Powinieneś zobaczyć działający interfejs aplikacji czatu.

Zaloguj się do aplikacji za pomocą przycisku ZALOGUJ SIĘ PRZEZ GOOGLE i możesz swobodnie dodawać wiadomości i publikować obrazy:

3b1284f5144b54f6.png

Jeśli logujesz się do aplikacji po raz pierwszy w nowej przeglądarce, upewnij się, że zezwalasz na powiadomienia, gdy zostaniesz o to poproszony: 8b9d0c66dc36153d.png

Później będziemy musieli włączyć powiadomienia.

Jeśli przypadkowo kliknąłeś Zablokuj , możesz zmienić to ustawienie, klikając przycisk 🔒 Bezpieczne po lewej stronie adresu URL w omnibarze Chrome i przełączając pasek obok Powiadomień :

e926868b0546ed71.png

Teraz dodamy kilka funkcji za pomocą pakietu SDK Firebase dla Cloud Functions.

6. Katalog funkcji

Cloud Functions umożliwia łatwe tworzenie kodu działającego w chmurze bez konieczności konfigurowania serwera. Dowiesz się, jak tworzyć funkcje, które reagują na zdarzenia bazy danych Firebase Auth, Cloud Storage i Firebase Firestore. Zacznijmy od Auth.

Podczas korzystania z pakietu Firebase SDK dla Cloud Functions kod funkcji będzie znajdować się w katalogu functions (domyślnie). Twój kod funkcji jest również aplikacją Node.js i dlatego potrzebuje pliku package.json , który zawiera pewne informacje o Twojej aplikacji i wyświetla listę zależności.

Aby Ci to ułatwić, stworzyliśmy już plik functions/index.js , do którego trafi Twój kod. Zapraszam do sprawdzenia tego pliku przed przejściem dalej.

cd functions
ls

Jeśli nie znasz Node.js , dowiedz się o nim więcej przed kontynuowaniem ćwiczenia z kodowania.

Plik package.json zawiera już dwie wymagane zależności: pakiet Firebase SDK for Cloud Functions i pakiet Firebase Admin SDK . Aby zainstalować je lokalnie, przejdź do folderu functions i uruchom:

npm install

Przyjrzyjmy się teraz plikowi 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.

Zaimportujemy wymagane moduły, a następnie napiszemy trzy funkcje w miejsce TODO. Zacznijmy od zaimportowania wymaganych modułów Node.

7. Zaimportuj moduły Cloud Functions i Firebase Admin

Podczas tego ćwiczenia z programowania wymagane będą dwa moduły: firebase-functions umożliwia zapisywanie wyzwalaczy i dzienników Cloud Functions, a firebase-admin umożliwia korzystanie z platformy Firebase na serwerze z dostępem administracyjnym do wykonywania czynności, takich jak zapisywanie w Cloud Firestore lub wysyłanie powiadomień FCM.

W index.js zastąp pierwsze TODO następującym:

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.

Pakiet Firebase Admin SDK można skonfigurować automatycznie po wdrożeniu w środowisku Cloud Functions lub innych kontenerach Google Cloud Platform. Dzieje się tak, gdy admin.initializeApp() bez argumentów.

Teraz dodajmy funkcję, która uruchamia się, gdy użytkownik loguje się po raz pierwszy w aplikacji czatu, i dodamy wiadomość na czacie, aby powitać użytkownika.

8. Powitaj nowych użytkowników

Struktura wiadomości na czacie

Wiadomości publikowane w kanale czatu FriendlyChat są przechowywane w Cloud Firestore. Przyjrzyjmy się strukturze danych, której używamy do wiadomości. Aby to zrobić, opublikuj nową wiadomość na czacie o treści „Hello World”:

11f5a676fbb1a69a.png

Powinno to wyglądać tak:

fe6d1c020d0744cf.png

W Konsoli Firebase kliknij Baza danych Firestore w sekcji Kompilacja . Powinieneś zobaczyć kolekcję wiadomości i jeden dokument zawierający wiadomość, którą napisałeś:

442c9c10b5e2b245.png

Jak widać, wiadomości czatu są przechowywane w Cloud Firestore jako dokument z atrybutami name , profilePicUrl , text i timestamp dodanymi do kolekcji messages .

Dodawanie wiadomości powitalnych

Pierwsza funkcja Cloud dodaje wiadomość, która wita nowych użytkowników na czacie. W tym celu możemy użyć wyzwalacza functions.auth().onCreate , który uruchamia funkcję za każdym razem, gdy użytkownik loguje się po raz pierwszy w aplikacji Firebase. Dodaj funkcję addWelcomeMessages do index.js :

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  functions.logger.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(),
  });
  functions.logger.log('Welcome message written to database.');
});

Dodanie tej funkcji do specjalnego obiektu exports jest sposobem Node na udostępnienie funkcji poza bieżącym plikiem i jest wymagane w przypadku Cloud Functions.

W powyższej funkcji dodajemy nową wiadomość powitalną wysłaną przez "Bota Firebase" do listy wiadomości czatu. Robimy to za pomocą metody add w kolekcji messages w Cloud Firestore, gdzie przechowywane są wiadomości z czatu.

Ponieważ jest to operacja asynchroniczna, musimy zwrócić Promise wskazującą, kiedy Cloud Firestore zakończył pisanie, aby Cloud Functions nie wykonywały się zbyt wcześnie.

Wdróż funkcje chmury

Funkcje Cloud Functions będą aktywne dopiero po ich wdrożeniu. Aby to zrobić, uruchom to w wierszu poleceń:

firebase deploy --only functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Przetestuj funkcję!

Po pomyślnym wdrożeniu funkcji musisz mieć użytkownika, który zaloguje się po raz pierwszy.

  1. Otwórz aplikację w przeglądarce, używając adresu URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Z nowym użytkownikiem zaloguj się po raz pierwszy w swojej aplikacji za pomocą przycisku Zaloguj się.
  • Jeśli jesteś już zalogowany w aplikacji, możesz otworzyć Uwierzytelnianie konsoli Firebase i usunąć swoje konto z listy użytkowników. Następnie zaloguj się ponownie.

262535d1b1223c65.png

  1. Po zalogowaniu się automatycznie powinna wyświetlić się wiadomość powitalna:

1c70e0d64b23525b.png

9. Moderacja zdjęć

Użytkownicy mogą przesyłać wszystkie rodzaje obrazów na czacie i zawsze ważne jest, aby moderować obraźliwe obrazy, szczególnie na publicznych platformach społecznościowych. W FriendlyChat obrazy publikowane na czacie są przechowywane w Google Cloud Storage .

Dzięki Cloud Functions możesz wykrywać nowe przesyłane obrazy za pomocą wyzwalacza functions.storage().onFinalize . Uruchomi się to za każdym razem, gdy nowy plik zostanie przesłany lub zmodyfikowany w Cloud Storage.

Aby moderować obrazy, przejdziemy przez następujący proces:

  1. Sprawdź, czy obraz jest oznaczony jako dla dorosłych czy z przemocą, korzystając z interfejsu Cloud Vision API .
  2. Jeśli obraz został oflagowany, pobierz go na uruchomioną instancję funkcji.
  3. Rozmyj obraz za pomocą ImageMagick .
  4. Prześlij zamazany obraz do Cloud Storage.

Włącz interfejs API Cloud Vision

Ponieważ w tej funkcji będziemy używać interfejsu Google Cloud Vision API, musisz włączyć interfejs API w swoim projekcie Firebase. Kliknij ten link , a następnie wybierz projekt Firebase i włącz interfejs API:

5c77opłata51ec5de49.png

Zainstaluj zależności

Aby moderować obrazy, użyjemy biblioteki klienta Google Cloud Vision dla Node.js, @google-cloud/vision , aby uruchomić obrazy przez interfejs Cloud Vision API w celu wykrycia nieodpowiednich obrazów.

Aby zainstalować ten pakiet w swojej aplikacji Cloud Functions, uruchom następujące polecenie npm install --save . Upewnij się, że robisz to z katalogu functions .

npm install --save @google-cloud/vision@2.4.0

Spowoduje to zainstalowanie pakietu lokalnie i dodanie go jako zadeklarowanej zależności w pliku package.json .

Importuj i konfiguruj zależności

Aby zaimportować zainstalowane zależności i niektóre podstawowe moduły Node.js ( path , os i fs ), których będziemy potrzebować w tej sekcji, dodaj następujące wiersze na początku index.js :

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();
const {promisify} = require('util');
const exec = promisify(require('child_process').exec);

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

Ponieważ Twoja funkcja będzie działać w środowisku Google Cloud, nie ma potrzeby konfigurowania bibliotek Cloud Storage i Cloud Vision: zostaną one automatycznie skonfigurowane do korzystania z Twojego projektu.

Wykrywanie nieodpowiednich obrazów

Będziesz używać wyzwalacza functions.storage.onChange Cloud Functions, który uruchamia Twój kod, gdy tylko plik lub folder zostanie utworzony lub zmodyfikowany w zasobniku Cloud Storage. Dodaj funkcję blurOffensiveImages do 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 imageUri = `gs://${object.bucket}/${object.name}`;
      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(imageUri);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.protos.google.cloud.vision.v1.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        functions.logger.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      functions.logger.log('The image', object.name, 'has been detected as OK.');
    });

Zwróć uwagę, że dodaliśmy pewną konfigurację instancji Cloud Functions, która będzie uruchamiać tę funkcję. W przypadku .runWith({memory: '2GB'}) , aby instancja pobierała 2 GB pamięci zamiast domyślnej, ponieważ ta funkcja intensywnie wykorzystuje pamięć.

Po uruchomieniu funkcji obraz jest uruchamiany przez interfejs Cloud Vision API w celu wykrycia, czy jest oznaczony jako dla dorosłych czy z przemocą. Jeśli obraz zostanie wykryty jako nieodpowiedni na podstawie tych kryteriów, rozmywamy obraz, co jest wykonywane w funkcji blurImage , jak zobaczymy dalej.

Zamazywanie obrazu

Dodaj następującą funkcję blurImage do index.js :

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});
  functions.logger.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await exec(`convert "${tempLocalFile}" -channel RGBA -blur 0x24 "${tempLocalFile}"`);
  functions.logger.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  functions.logger.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  functions.logger.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  functions.logger.log('Marked the image as moderated in the database.');
}

W powyższej funkcji plik binarny obrazu jest pobierany z Cloud Storage. Obraz jest następnie rozmazany za pomocą narzędzia do convert ImageMagick, a zamazana wersja jest ponownie przesyłana do zasobnika pamięci. Następnie usuwamy plik z instancji Cloud Functions, aby zwolnić trochę miejsca na dysku. Robimy to, ponieważ ta sama instancja Cloud Functions może zostać ponownie wykorzystana, a jeśli pliki nie zostaną wyczyszczone, może zabraknąć miejsca na dysku. Na koniec do wiadomości czatu dodajemy wartość logiczną wskazującą, że obraz został zmoderowany, co spowoduje odświeżenie wiadomości na kliencie.

Wdróż funkcję

Funkcja będzie aktywna dopiero po jej wdrożeniu. W wierszu poleceń uruchom firebase deploy --only functions :

firebase deploy --only functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Przetestuj funkcję!

Po pomyślnym wdrożeniu funkcji:

  1. Otwórz aplikację w przeglądarce, używając adresu URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Po zalogowaniu się do aplikacji prześlij obraz: 4db9fdab56703e4a.png
  3. Wybierz swój najlepszy obraźliwy obraz do przesłania (lub możesz użyć tego zombie jedzącego mięso !), a po kilku chwilach Twój post powinien zostać odświeżony z zamazaną wersją obrazu: 83dd904fbaf97d2b.png

10. Powiadomienia o nowych wiadomościach

W tej sekcji dodasz funkcję chmury, która wysyła powiadomienia do uczestników czatu, gdy zostanie opublikowana nowa wiadomość.

Korzystając z Firebase Cloud Messaging (FCM), możesz niezawodnie wysyłać powiadomienia do użytkowników na różnych platformach. Aby wysłać powiadomienie do użytkownika, potrzebujesz jego tokena urządzenia FCM. Używana przez nas aplikacja internetowa do czatu zbiera już tokeny urządzeń od użytkowników, gdy po raz pierwszy otwierają aplikację w nowej przeglądarce lub na nowym urządzeniu. Te tokeny są przechowywane w Cloud Firestore w kolekcji fcmTokens .

Jeśli chcesz dowiedzieć się, jak uzyskać tokeny urządzenia FCM w aplikacji internetowej, możesz przejść do ćwiczenia Firebase Web Codelab .

Wysyłaj powiadomienia

Aby wykryć, kiedy publikowane są nowe wiadomości, będziesz używać wyzwalacza functions.firestore.document().onCreate Cloud Functions, który uruchamia Twój kod po utworzeniu nowego obiektu w określonej ścieżce Cloud Firestore. Dodaj funkcję sendNotifications do swojego 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);
      functions.logger.log('Notifications have been sent and tokens cleaned up.');
    }
  });

W powyższej funkcji zbieramy tokeny urządzeń wszystkich użytkowników z bazy danych Cloud Firestore i wysyłamy powiadomienie do każdego z nich za pomocą funkcji admin.messaging().sendToDevice .

Oczyść tokeny

Na koniec chcemy usunąć tokeny, które nie są już ważne. Dzieje się tak, gdy token, który raz otrzymaliśmy od użytkownika, nie jest już używany przez przeglądarkę lub urządzenie. Na przykład dzieje się tak, gdy użytkownik wycofał uprawnienie do powiadamiania dla sesji przeglądarki. Aby to zrobić, dodaj następującą funkcję cleanupTokens do index.js :

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) {
     functions.logger.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);
}

Wdróż funkcję

Funkcja będzie aktywna dopiero po jej wdrożeniu, a aby ją wdrożyć, uruchom to w wierszu poleceń:

firebase deploy --only functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Przetestuj funkcję!

  1. Po pomyślnym wdrożeniu funkcji otwórz aplikację w przeglądarce przy użyciu adresu URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Jeśli logujesz się do aplikacji po raz pierwszy, zezwól na powiadomienia po wyświetleniu monitu: 8b9d0c66dc36153d.png
  3. Zamknij kartę aplikacji czatu lub wyświetl inną kartę: Powiadomienia pojawiają się tylko wtedy, gdy aplikacja działa w tle. Jeśli chcesz dowiedzieć się, jak odbierać wiadomości, gdy Twoja aplikacja jest na pierwszym planie, zapoznaj się z naszą dokumentacją .
  4. Używając innej przeglądarki (lub okna incognito), zaloguj się do aplikacji i opublikuj wiadomość. Powinieneś zobaczyć powiadomienie wyświetlane przez pierwszą przeglądarkę: 45282ab12b28b926.png

11. Gratulacje!

Korzystasz z pakietu SDK Firebase dla funkcji Cloud Functions i dodajesz do aplikacji do czatu komponenty po stronie serwera.

Co omówiliśmy

  • Tworzenie Cloud Functions przy użyciu pakietu SDK Firebase dla Cloud Functions.
  • Uruchamiaj funkcje w chmurze na podstawie zdarzeń Auth, Cloud Storage i Cloud Firestore.
  • Dodaj obsługę Firebase Cloud Messaging do swojej aplikacji internetowej.
  • Wdróż Cloud Functions za pomocą interfejsu wiersza polecenia Firebase.

Następne kroki

Ucz się więcej