Funkcje chmury dla Firebase

1. Przegląd

W tym codelab, dowiesz się, jak korzystać z Firebase SDK dla funkcji Google Cloud, aby poprawić Czat aplikację internetową i jak korzystać z funkcji Chmura do wysyłania powiadomień do użytkowników Chat aplikacji.

3b1284f5144b54f6.png

Czego się dowiesz

  • Tworzenie funkcji Google Cloud za pomocą Firebase SDK.
  • Funkcje wyzwalania w oparciu o Auth Chmura, Cloud Storage i wydarzeń Chmura FireStore.
  • Dodaj wsparcie Firebase Cloud Messaging do aplikacji internetowej.

Co będziesz potrzebował

  • Karta kredytowa. Funkcje Chmura Firebase wymaga planu Firebase Blaze, co oznacza, będziesz musiał włączyć rozliczeniowe nad projektem Firebase za pomocą karty kredytowej.
  • Edytor IDE / tekstu do wyboru, takich jak WebStorm , Atom lub Sublime .
  • Terminal do wykonywania poleceń powłoki z V9 zainstalowany NodeJS.
  • Przeglądarka takich jak Chrome.
  • Przykładowy kod. Zobacz następny krok w tej sprawie.

2. Pobierz przykładowy kod

Sklonować repozytorium GitHub z wiersza poleceń:

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

Zaimportować aplikację rozrusznika

Korzystanie z IDE, otwarte lub importować android_studio_folder.png cloud-functions-start katalog z przykładowego katalogu kodu. Ten katalog zawiera kod początkowy dla codelab który składa się zw pełni funkcjonalnego Chat Web App.

3. Utwórz projekt Firebase i skonfigurować aplikację

Tworzenie projektu

W Firebase Console , kliknij Dodaj projekt i nazywają to FriendlyChat .

Kliknij Utwórz projekt .

Uaktualnienie do planu Blaze

W celu korzystania z funkcji Chmura Firebase, trzeba będzie uaktualnić Twojego projektu Firebase do abonamentu Blaze . Będzie to wymagać, aby dodać kartę kredytową lub innego instrumentu rozliczeniowych do konta Google Cloud.

Wszystkie projekty Firebase, w tym na planie Blaze, nadal mieć dostęp do bezpłatnych kwot użytkowania dla funkcji Cloud. Etapy opisane w niniejszym codelab będzie mieścić się w granicach użytkowania Poziom wolnych. Jednak widać niewielkie opłaty ( około $ +0,03 ) z Cloud Storage, który jest używany do obsługi obrazów w chmurze Funkcje kompilacji.

Jeśli nie masz dostępu do karty kredytowej lub są niewygodne kontynuowanie planu Blaze, należy rozważyć użycie Firebase Emulator Suite , który pozwoli Ci naśladować funkcji Chmura za darmo na komputerze lokalnym.

Włącz Google Auth

Aby umożliwić użytkownikom logowania w aplikacji, będziemy używać Google uwierzytelniania, który musi być włączony.

W Firebase konsoli otwórz sekcję budowlanej> Uwierzytelnianie > Zapisz w karcie metoda (lub kliknij tutaj , aby przejść tam). Następnie włączyć logowania Google Provider i kliknij Zapisz . Pozwoli to użytkownikom logować się na aplikację swoich kont Google.

Również, nie krępuj się, aby ustawić nazwę zwróconą ku publicznego swojej aplikacji na pogawędkę :

8290061806aacb46.png

Włącz Cloud Storage

Aplikacja korzysta Storage Cloud, aby przesłać zdjęcia. Aby włączyć Cloud Storage nad projektem Firebase, odwiedź sekcję przechowywania i kliknij przycisk Rozpocznij . Przejdź przez tamtejszych kroków, a na miejscu Cloud Storage, nie będzie domyślną wartość do użycia. Kliknij Gotowe później.

Dodaj aplikację internetową

Na Firebase konsoli, dodać aplikację. Aby to zrobić, przejdź do Ustawienia projektu i przejdź do Dodaj aplikację . Odbiór internetu jako platformy i zaznacz pole do ustawiania Firebase Hosting, następnie zarejestrować aplikację i kliknij przycisk Dalej na pozostałą część schodów, wreszcie kliknięciu Kontynuuj pocieszyć .

4. Instalacja Firebase interfejsu wiersza poleceń

Firebase Command Line Interface (CLI) pozwoli Ci służyć aplikację lokalnie i wdrożyć aplikację internetową i funkcje chmurze.

Aby zainstalować lub zaktualizować CLI uruchomić następującą komendę npm:

npm -g install firebase-tools

Aby sprawdzić, czy CLI została prawidłowo zainstalowana, otwórz konsolę i uruchom:

firebase --version

Upewnij się, że wersja Firebase CLI jest powyżej 4.0.0 tak, że posiada wszystkie najnowsze funkcje wymagane dla funkcji Cloud. Jeśli nie, uruchom npm install -g firebase-tools aby uaktualnić, jak pokazano powyżej.

Upoważnić Firebase CLI uruchamiając:

firebase login

Upewnij się, że jesteś w cloud-functions-start katalogu, a następnie skonfigurować Firebase CLI używać Firebase Projektu:

firebase use --add

Następnie wybierz swój projekt identyfikatora i postępuj zgodnie z instrukcjami. Gdy pojawi się monit, można wybrać dowolny alias, takich jak codelab .

5. Wdrażanie i uruchomić aplikację

Teraz, gdy importowane i skonfigurowany swój projekt, jesteś gotowy, aby uruchomić aplikację po raz pierwszy! Otwórz okno terminala, przejdź do cloud-functions-start folderu i wdrożyć aplikację do Firebase gospodarzem za pomocą:

firebase deploy --except functions

Jest to wyjście konsoli 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 wyświetlać URL Hosting. Aplikacja internetowa powinna być podawane z tego adresu URL, który powinien być w postaci https: // <project-id> .firebaseapp.com. Otwórz to. Powinieneś zobaczyć czat aplikacji funkcjonującego UI.

Zalogować się do aplikacji za pomocą przycisku logowania z Google i nie krępuj się dodać kilka wiadomości i umieszczać obrazki:

3b1284f5144b54f6.png

Jeśli zalogujesz się w aplikacji po raz pierwszy w nowej przeglądarki, upewnij się, że pozwalają powiadomienia, gdy pojawi się monit: 8b9d0c66dc36153d.png

Musimy mieć włączoną obsługę zgłoszeń w późniejszym momencie.

Jeśli przypadkowo kliknięciu Block , można zmienić to ustawienie, klikając na 🔒 Bezpieczny przycisk na lewo od adresu URL w Chrome Omnibar i przełączając pasek obok powiadomień :

e926868b0546ed71.png

Teraz będziemy dodawać niektóre funkcje używając Firebase SDK dla funkcji Cloud.

6. Funkcje katalogów

Funkcje Chmura pozwala łatwo mieć kod, który działa w chmurze, bez konieczności instalacji serwera. Będziemy chodząc jak zbudować funkcje, które reagują na Firebase Auth, Cloud Storage i Firebase FireStore wydarzenia bazy danych. Zacznijmy Auth.

Podczas korzystania z Firebase SDK dla funkcji Chmura, kod funkcje będą żyć pod functions katalogu (domyślnie). Twój kod funkcji jest również node.js app i dlatego potrzebuje package.json który daje pewne informacje na temat aplikacji i list zależności.

Aby ułatwić Państwu, już stworzył functions/index.js plik gdzie Twój kod pójdzie. Zapraszam do sprawdzenia tego pliku, zanim przejdą dalej.

cd functions
ls

Jeśli nie są zaznajomieni z node.js , dowiedzieć się więcej o nim przed kontynuowaniem codelab byłoby pomocne.

package.json plik już wymienia dwa wymagane zależności: z Firebase SDK dla funkcji chmurze oraz Firebase Admin SDK . Aby je zainstalować lokalnie, przejdź do functions folderu i uruchom:

npm install

Rzućmy teraz okiem na index.js pliku:

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.

Będziemy importować wymaganych modułów, a następnie napisać trzy funkcje w miejsce todos. Zacznijmy od importu wymaganych modułów węzła.

7. Importuj funkcje i moduły Firebase Chmura Admin

Będą wymagane dwa moduły w tym codelab: Firebase firebase-functions umożliwia pisanie Chmura Funkcje wyzwalaczy i dzienników podczas firebase-admin umożliwia korzystanie z platformy Firebase na serwerze z dostępem administracyjnym zrobić czynności, takich jak pisanie do Cloud FireStore lub wysyłania powiadomień FCM.

W index.js pliku zastąpi pierwszy TODO z następującymi zasadami:

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.

Firebase Admin SDK mogą być konfigurowane automatycznie po wdrożeniu do Funkcje środowiska cloud lub innych pojemnikach Google Cloud Platform, a to się dzieje, gdy wzywamy admin.initializeApp() bez argumentów.

Teraz dodajmy funkcja, która działa, gdy użytkownik loguje się po raz pierwszy w aplikacji czatu, a my dodamy wiadomość czatu powitać użytkownika.

8. Welcome Nowi użytkownicy

Czat struktura wiadomości

Wiadomości wysłane do FriendlyChat paszy czatu są przechowywane w chmurze FireStore. Rzućmy okiem na struktury danych używamy do wiadomości. Aby to zrobić, należy umieścić nową wiadomość na czacie, który brzmi „Hello World”:

11f5a676fbb1a69a.png

Powinien pojawić się jako:

fe6d1c020d0744cf.png

W Firebase konsoli kliknij FireStore Database sekcji Build . Powinieneś zobaczyć zbiór wiadomości i jeden dokument zawierający komunikat, który napisał:

442c9c10b5e2b245.png

Jak widać, wiadomości czatu są przechowywane w chmurze FireStore jako dokument z name , profilePicUrl , text i timestamp atrybutów dodawanych do messages kolekcji.

Dodawanie wiadomości powitalne

Pierwsza funkcja Chmura dodaje komunikat wita nowych użytkowników do rozmowy. W tym celu możemy użyć wyzwalacza functions.auth().onCreate , który uruchamia funkcję każdym razem, gdy użytkownik loguje się-w po raz pierwszy w aplikacji Firebase. Dodać addWelcomeMessages funkcjonować w swoim index.js pliku:

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 specjalnych exports obiektu jest sposób dokonywania węzła funkcję dostępną poza bieżącym pliku i jest wymagany dla funkcji Cloud.

W funkcji powyżej, dodajemy nową wiadomość powitalną zamieszczonych przez „Firebase bot” do listy wiadomości czatu. Robimy to za pomocą add metody na messages kolekcji w chmurze FireStore, czyli tam, gdzie przechowywane są wiadomości z czatu.

Ponieważ jest to operacja asynchroniczna, musimy zwrócić Obietnica wskazujący kiedy Chmura Firestore zakończył pisanie tak Funkcje Chmura nie wykonują zbyt wcześnie.

Funkcje Deploy Chmura

Funkcje chmura będzie aktywny dopiero po ich wdrożeniu. Aby to zrobić, należy uruchomić to w wierszu poleceń:

firebase deploy --only functions

Jest to wyjście konsoli 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

Przetestować funkcję

Gdy funkcja wdrożył z sukcesem, trzeba mieć użytkownika, znaki po raz pierwszy.

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

262535d1b1223c65.png

  1. Po zalogowaniu się, komunikat powitalny powinien być wyświetlany automatycznie:

1c70e0d64b23525b.png

9. Obrazy umiar

Użytkownicy mogą przesyłać wszystkie rodzaje obrazów na czacie, a to jest zawsze ważne, aby umiarkowanych ofensywnych obrazów, szczególnie w miejscach publicznych platform społecznościowych. W FriendlyChat, obrazy, które są publikowane na czacie są przechowywane w Google Cloud Storage .

Z funkcji Cloud, można wykryć nowe przesyłanie obrazu przy użyciu functions.storage().onFinalize wyzwalania. Będzie to działać za każdym razem nowy plik zostanie przesłany lub zmodyfikowany w Cloud Storage.

Do umiarkowanych obrazów, pójdziemy przez następujący proces:

  1. Sprawdzić, czy obraz jest oznaczony jako dorosły lub Gwałtowny pomocą API Chmura Vision .
  2. Jeśli obraz został oflagowany, ściągnąć go na działającej instancji Functions.
  3. Rozmycie obrazu przy użyciu ImageMagick .
  4. Prześlij zamazany obraz do Cloud Storage.

Włącz API Chmura Vision

Ponieważ będziemy używać API Google Cloud Vision w tej funkcji, musisz włączyć interfejs API na swoim Firebase projektu. Śledź ten link , a następnie wybierz Firebase projekt i włączyć API:

5c77fee51ec5de49.png

zainstalować zależności

Do umiarkowanych obrazów, użyjemy Google Cloud Vision Library Client dla node.js, @ google-Chmura / wizję , aby uruchomić obrazów za pośrednictwem interfejsu API Chmura Vision do wykrywania nieodpowiednich obrazów.

Aby zainstalować ten pakiet na swojej chmurze Funkcje aplikacji, uruchom następujące npm install --save polecenie. Upewnij się, że masz to zrobić z functions katalogu.

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

Będzie to zainstalować pakiet lokalnie i dodaj je jako zadeklarowanego uzależnienia w swojej package.json pliku.

Importowanie i konfigurowanie Zależności

Aby zaimportować zależności, które zostały zainstalowane i niektóre moduły node.js rdzeń ( path , os i fs ), że musimy w tej sekcji, należy dodać następujące linie do góry swój index.js pliku:

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ż funkcja będzie działać wewnątrz środowiska Google Cloud, nie ma potrzeby, aby skonfigurować biblioteki Chmura Cloud Storage i wizja zostaną one automatycznie skonfigurowany do korzystania z projektu.

Wykrywanie nieodpowiednich obrazów

Będziesz pomocą functions.storage.onChange Chmura Funkcje spustu, który uruchamia swój kod tak szybko, jak plik lub folder zostanie utworzony lub zmodyfikowany w Cloud Storage. Dodaj blurOffensiveImages funkcji do swojego index.js pliku:

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

Zauważ, że dodaliśmy trochę konfigurację Cloud Funkcje przykład, że będzie uruchomić funkcję. Z .runWith({memory: '2GB'}) , jesteśmy z prośbą o wystąpienie dostaje 2GB pamięci zamiast domyślnego, ponieważ funkcja ta jest intensywnie wykorzystujących pamięć.

Gdy funkcja jest wyzwalany, obraz jest prowadzony za pośrednictwem interfejsu API Chmura Vision wykryć, jeśli jest oznaczony jako osoby dorosłej lub gwałtowny. Jeśli obraz jest wykrywany jako nieodpowiednie oparciu o te kryteria, jesteśmy rozmyciu obrazu, który odbywa się w blurImage funkcji jak zobaczymy dalej.

Rozmyciu zdjęcia

Dodaj następujący blurImage funkcję w swojej index.js pliku:

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, binarny obraz jest pobierany z Cloud Storage. Następnie obraz jest rozmazany przy użyciu ImageMagick za convert narzędzie, a wersja zamazany jest re-upload na Bucket Storage. Następnie usuwamy plik w chmurze Funkcje przykład zwolnić trochę miejsca na dysku, a możemy to zrobić, ponieważ te same funkcje Chmura instancja może dostać ponownie wykorzystywane, a jeśli pliki nie są czyszczone, może zabraknąć miejsca na dysku. Wreszcie, możemy dodać wartość logiczną do wiadomości czatu, wskazując obraz był moderowany, a to spowoduje odświeżenie wiadomości na kliencie.

Wdrażanie funkcji

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

firebase deploy --only functions

Jest to wyjście konsoli 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

Przetestować funkcję

Gdy funkcja wdrożył z sukcesem:

  1. Otwórz swoją aplikację w przeglądarce przy użyciu adresu URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Po zalogowaniu się do aplikacji, przesłać obraz: 4db9fdab56703e4a.png
  3. Wybierz najlepszy ofensywny zdjęcie przesłać (lub można użyć tego mięsa jeść zombie !), A po kilku chwilach powinieneś zobaczyć Twój wpis odświeżanie z niewyraźne wersji obrazka: 83dd904fbaf97d2b.png

10. Nowa wiadomość Powiadomienia

W tej sekcji będzie dodać funkcję chmurze, która wysyła powiadomienia do uczestników czatu, gdy nowa wiadomość została wysłana.

Korzystanie Firebase Cloud Messaging (FCM), można w wiarygodny sposób wysyłania powiadomień do użytkowników na różnych platformach. Aby wysłać powiadomienie do użytkownika, trzeba ich urządzenie FCM token. Aplikacja czat internetowy, który mamy już za pomocą zbiera żetony urządzeń od użytkowników, gdy otworzysz aplikację po raz pierwszy w nowej przeglądarki lub urządzenia. Te żetony są przechowywane w chmurze FireStore w fcmTokens kolekcji.

Jeśli chcesz dowiedzieć się, jak dostać żetony urządzeń FCM na aplikacji internetowej, można przejść przez Firebase internetowej Codelab .

Wysyłaj powiadomienia

Aby wykryć, kiedy nowe wiadomości są publikowane, będziesz za pomocą functions.firestore.document().onCreate Chmura Funkcje wyzwalania, który uruchamia swój kod, gdy nowy obiekt jest tworzony w danej ścieżki Cloud FireStore. Dodać sendNotifications funkcjonować w swoim index.js pliku:

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 funkcji powyżej, zbieramy żetony wszystkich użytkowników urządzeń z bazy danych Chmura FireStore i wysyłanie powiadomień do każdego z nich za pomocą admin.messaging().sendToDevice funkcyjny.

Cleanup tokeny

Wreszcie, chcemy, aby usunąć znaki, które nie są już ważne. Dzieje się tak, gdy token że kiedyś dostał od użytkownika nie jest używany przez przeglądarkę lub urządzenia już. Na przykład, to się dzieje, jeśli użytkownik cofnięte pozwolenie powiadomienia dla sesji przeglądarki. Aby to zrobić, należy dodać następujące cleanupTokens funkcjonować w index.js pliku:

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

Wdrażanie funkcji

Funkcja będzie aktywna dopiero po wdrożeniu go, aby go wdrożyć i uruchomić to w wierszu poleceń:

firebase deploy --only functions

Jest to wyjście konsoli 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

Przetestować funkcję

  1. Gdy funkcja wdrożył z sukcesem otworzyć aplikację w przeglądarce za pomocą URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Jeśli zalogujesz się w aplikacji po raz pierwszy, upewnij się, że pozwalają powiadomienia, gdy pojawi się monit: 8b9d0c66dc36153d.png
  3. Zamknąć kartę aplikacji czat lub wyświetlić inną kartę: Powiadomienia pojawiają się tylko wtedy, gdy aplikacja jest w tle. Jeśli chcesz nauczyć się odbierać wiadomości w czasie, gdy aplikacja jest na pierwszym planie, rzucić okiem na naszej dokumentacji .
  4. Korzystanie z innej przeglądarki (lub okno incognito), zalogować się do aplikacji i wysyłać wiadomości. Powinieneś zobaczyć powiadomienie wyświetlany przez pierwszy przeglądarki: 45282ab12b28b926.png

11. Gratulacje!

Użyłeś Firebase SDK dla funkcji Cloud i dodaje komponentów po stronie serwera do aplikacji czatu.

Co omówiliśmy

  • Funkcje tworzenia Chmura wykorzystujące Firebase SDK dla funkcji Cloud.
  • Funkcje wyzwalania w oparciu o Auth Chmura, Cloud Storage i wydarzeń Chmura FireStore.
  • Dodaj wsparcie Firebase Cloud Messaging do aplikacji internetowej.
  • Funkcje Deploy Chmura wykorzystujące Firebase CLI.

Następne kroki

Ucz się więcej