Firebase용 Cloud Functions

1. 개요

이 코드랩에서는 Google Cloud Functions용 ​​Firebase SDK를 사용하여 Chat 웹 앱을 개선하는 방법과 Cloud Functions를 사용하여 Chat 앱 사용자에게 알림을 보내는 방법을 알아봅니다.

3b1284f5144b54f6.png

배울 내용

  • Firebase SDK를 사용하여 Google Cloud Functions를 만듭니다.
  • 인증, Cloud Storage, Cloud Firestore 이벤트를 기반으로 Cloud Functions를 트리거합니다.
  • 웹 앱에 Firebase 클라우드 메시징 지원을 추가합니다.

필요한 것

  • 신용 카드. Firebase용 Cloud Functions에는 Firebase Blaze 요금제가 필요합니다. 즉, 신용 카드를 사용하여 Firebase 프로젝트에서 결제를 활성화해야 합니다.
  • 같은 당신의 선택의 IDE / 텍스트 편집기 WebStorm , 아톰 이나 숭고한 .
  • NodeJS v9가 설치된 상태에서 셸 명령을 실행하기 위한 터미널입니다.
  • 크롬과 같은 브라우저.
  • 샘플 코드입니다. 이에 대해서는 다음 단계를 참조하십시오.

2. 샘플 코드 받기

복제 GitHub의 저장소 명령 줄에서을 :

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

시작 앱 가져오기

IDE를 사용하여 열기 또는 가져오기 android_studio_folder.png cloud-functions-start 샘플 코드 디렉토리에서 디렉토리를. 이 디렉토리에는 완전한 기능을 갖춘 Chat Web App으로 구성된 Codelab의 시작 코드가 포함되어 있습니다.

3. Firebase 프로젝트 생성 및 앱 설정

프로젝트 생성

에서 중포 기지 콘솔 , 클릭 프로젝트를 추가하고 FriendlyChat 호출합니다.

프로젝트 만들기를 클릭합니다.

Blaze 요금제로 업그레이드

중포 기지에 대한 클라우드 기능을 사용하려면, 당신은 당신의 중포 기지 프로젝트 upgade해야합니다 블레이즈 청구 계획을 . 이렇게 하려면 Google Cloud 계정에 신용 카드나 다른 결제 수단을 추가해야 합니다.

Blaze 요금제를 포함한 모든 Firebase 프로젝트는 여전히 Cloud Functions의 무료 사용 할당량에 액세스할 수 있습니다. 이 코드랩에 설명된 단계는 프리 티어 사용 제한에 속합니다. 그러나, 당신은 (작은 요금 볼 $ 0.03에 대한 클라우드 기능 빌드 이미지를 호스팅하는 데 사용되는 클라우드 스토리지에서 참조).

당신은 신용 카드에 액세스하거나 사용을 고려, 블레이즈 계획을 계속 불편하지 않으면 중포 기지 에뮬레이터 스위트 는 로컬 컴퓨터에 무료로 클라우드 기능을 에뮬레이션 할 수 있습니다.

Google 인증 사용

사용자가 앱에 로그인할 수 있도록 활성화해야 하는 Google 인증을 사용합니다.

중포 기지 콘솔에서 빌드 섹션을 엽니 다> 인증> 방법 탭에 서명 (또는 여기를 클릭하여 이 가고). 그런 다음, 구글 로그인 공급자를 활성화하고 저장을 클릭합니다. 이렇게 하면 사용자가 Google 계정으로 웹 앱에 로그인할 수 있습니다.

또한, 친절한 채팅 앱 공개 직면 이름을 설정 주시기 바랍니다 :

8290061806aacb46.png

클라우드 스토리지 활성화

앱은 Cloud Storage를 사용하여 사진을 업로드합니다. 당신의 중포 기지 프로젝트를 클라우드 스토리지를 가능하게 스토리지 섹션을 방문하여 가져 오기 시작 버튼을 클릭합니다. 거기에 있는 단계로 이동하면 Cloud Storage 위치에 사용할 기본값이 있습니다. 그 후 완료를 클릭합니다.

웹 앱 추가

Firebase 콘솔에서 웹 앱을 추가합니다. 이렇게하려면, 이동 프로젝트 설정응용 프로그램을 추가 할 수 아래로 스크롤합니다. 다음 응용 프로그램을 등록하고 마지막으로 콘솔에 계속을 클릭, 단계의 나머지 다음을 클릭 플랫폼으로 웹을 선택하고 호스팅 중포 기지를 설정하는 확인란을 선택합니다.

4. Firebase 명령줄 인터페이스 설치

Firebase 명령줄 인터페이스(CLI)를 사용하면 웹 앱을 로컬에서 제공하고 웹 앱과 Cloud Functions를 배포할 수 있습니다.

CLI를 설치하거나 업그레이드하려면 다음 npm 명령을 실행하십시오.

npm -g install firebase-tools

CLI가 올바르게 설치되었는지 확인하려면 콘솔을 열고 다음을 실행하십시오.

firebase --version

이 모든 최신 클라우드 기능에 필요한 기능을 가질 수 있도록 있는지 확인 중포 기지 CLI의 버전은 4.0.0 이상입니다. 그렇지 않다면, 실행 npm install -g firebase-tools 위의 그림과 같이 업그레이드 할 수 있습니다.

다음을 실행하여 Firebase CLI를 승인합니다.

firebase login

반드시 당신이에 확인 cloud-functions-start 디렉토리, 다음 중포 기지 프로젝트를 사용하여 중포 기지 CLI를 설정 :

firebase use --add

그런 다음 프로젝트 ID를 선택하고 지침을 따릅니다. 메시지가 표시되면, 당신은 같은 별칭을 선택할 수 있습니다 codelab .

5. 웹 앱 배포 및 실행

이제 프로젝트를 가져오고 구성했으므로 웹 앱을 처음 실행할 준비가 되었습니다! 받는 터미널 창, 탐색 열고 cloud-functions-start 폴더를 중포 기지 사용 호스팅에 웹 응용 프로그램을 배포 :

firebase deploy --except functions

다음은 표시되어야 하는 콘솔 출력입니다.

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

웹 앱 열기

마지막 줄은 호스팅 URL을 표시해야합니다. 웹 앱은 이제 https://<project-id>.firebaseapp.com 형식이어야 하는 이 URL에서 제공되어야 합니다. 열어 봐. 채팅 앱의 작동하는 UI가 표시되어야 합니다.

로그인-IN하여 Google 버튼을 사용하여 응용 프로그램에 서명하고 일부 메시지 및 사후 이미지를 추가 부담 :

3b1284f5144b54f6.png

새 브라우저에서 앱에 처음 로그인하는 경우 메시지가 표시되면 알림을 허용해야 합니다. 8b9d0c66dc36153d.png

나중에 알림을 활성화해야 합니다.

당신이 실수로 차단을 클릭 한 경우에는 크롬 Omnibar에서 URL의 왼쪽에있는 🔒 안전 버튼을 클릭하고 알림 옆에있는 줄을 전환하여이 설정을 변경할 수 있습니다 :

e926868b0546ed71.png

이제 Cloud Functions용 ​​Firebase SDK를 사용하여 몇 가지 기능을 추가하겠습니다.

6. 기능 디렉토리

Cloud Functions를 사용하면 서버를 설정할 필요 없이 클라우드에서 실행되는 코드를 쉽게 가질 수 있습니다. Firebase Auth, Cloud Storage, Firebase Firestore 데이터베이스 이벤트에 반응하는 함수를 빌드하는 방법을 살펴보겠습니다. 인증부터 시작하겠습니다.

클라우드 기능에 대한 중포 기지 SDK를 사용하는 경우, 귀하의 기능 코드는 아래에서 살 것이다 functions (기본적으로) 디렉토리. 귀하의 기능 코드도이다 Node.js를의 응용 프로그램 및 따라서 필요 package.json 의 앱과 목록 종속성에 대한 몇 가지 정보를 제공합니다.

당신을 위해 더 쉽게하기 위해, 우리는 이미 생성 한 functions/index.js 코드가 이동합니다 파일을. 계속 진행하기 전에 이 파일을 자유롭게 검사하십시오.

cd functions
ls

당신이 익숙하지 않은 경우 Node.js를 하기 전에 더 그것에 대해 학습의 코드 랩을 계속하는 것은 도움이 될 것입니다.

package.json : 파일이 이미 두 개의 필수 종속성을 나열 클라우드 기능에 대한 중포 기지 SDK중포 기지 관리 SDK를 . 로컬로 설치하려면 이동 functions 폴더 및 실행 :

npm install

의 이제 살펴 보자 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.

필요한 모듈을 가져온 다음 TODO 대신 세 개의 함수를 작성합니다. 필요한 노드 모듈을 가져오는 것부터 시작하겠습니다.

7. Cloud Functions 및 Firebase 관리 모듈 가져오기

두 모듈은이 코드 랩 동안 필요합니다 : firebase-functions 하면서 클라우드 기능 트리거와 로그를 작성 가능 firebase-admin 클라우드 경우 FireStore에 서면 또는 FCM 알림을 보내는 등의 작업을 수행하는 관리자 액세스 할 수있는 서버의 중포 기지 플랫폼을 사용 할 수 있습니다.

에서 index.js 파일, 첫 번째 교체 TODO 다음과를 :

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.

클라우드 기능 환경이나 다른 Google 클라우드 플랫폼 컨테이너에 배포 할 때 중포 기지 관리 SDK는 자동으로 구성 할 수 있으며, 우리가 호출 할 때이 문제가 발생합니다 admin.initializeApp() 인수없이.

이제 사용자가 채팅 앱에서 처음 로그인할 때 실행되는 함수를 추가하고 사용자를 환영하는 채팅 메시지를 추가해 보겠습니다.

8. 신규 사용자 환영

채팅 메시지 구조

FriendlyChat 채팅 피드에 게시된 메시지는 Cloud Firestore에 저장됩니다. 메시지에 사용하는 데이터 구조를 살펴보겠습니다. 이렇게 하려면 "Hello World"라는 새 메시지를 채팅에 게시하십시오.

11f5a676fbb1a69a.png

다음과 같이 표시되어야 합니다.

fe6d1c020d0744cf.png

중포 기지 콘솔에서 빌드 섹션에서 경우 FireStore 데이터베이스를 클릭합니다. 메시지 컬렉션과 작성한 메시지가 포함된 문서 하나가 표시되어야 합니다.

442c9c10b5e2b245.png

당신이 볼 수 있듯이, 채팅 메시지와 문서로 클라우드 경우 FireStore에 저장되어있는 name , profilePicUrl , texttimestamp 받는 추가 속성 messages 모음입니다.

환영 메시지 추가

첫 번째 클라우드 기능은 채팅에 새로운 사용자를 환영하는 메시지를 추가합니다. 이를 위해, 우리는 트리거 사용할 수 있습니다 functions.auth().onCreate 기능을 사용자 중포 기지의 응용 프로그램에서 처음으로 표지판-의 모든 시간을 실행합니다. 추가 addWelcomeMessages 당신에 작동 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.');
});

특별한에이 기능을 추가 exports 객체하면 현재 파일의 기능을 외부에서 액세스를 만드는 노드의 방법 및 클라우드 기능이 필요합니다.

위의 기능에서 "Firebase Bot"이 게시한 새로운 환영 메시지를 채팅 메시지 목록에 추가하고 있습니다. 우리는 사용하여이 작업을하고있는 add 온 방법 messages 채팅의 메시지가 저장되는 곳이다 클라우드 경우 FireStore에서 수집.

이 비동기 작업이기 때문에, 우리는 반환해야 약속 클라우드 기능이 너무 일찍 실행하지 않아도 클라우드 경우 FireStore이 완료 쓰기가있을 때 표시합니다.

Cloud Functions 배포

Cloud Functions는 배포한 후에만 활성화됩니다. 이렇게 하려면 명령줄에서 다음을 실행합니다.

firebase deploy --only functions

다음은 표시되어야 하는 콘솔 출력입니다.

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

기능 테스트

함수가 성공적으로 배포되면 처음으로 로그인하는 사용자가 있어야 합니다.

  1. 호스팅 URL 사용하여 브라우저에서 앱을 엽니 다 (의 형태 https://<project-id>.firebaseapp.com ).
  2. 새 사용자로 로그인 버튼을 사용하여 응용 프로그램에서 처음으로 로그인합니다.
  • 당신이 이미에 로그인 한 경우 열 수 있습니다되는 앱 중포 기지 콘솔 인증 및 사용자 목록에서 계정을 삭제합니다. 그런 다음 다시 로그인합니다.

262535d1b1223c65.png

  1. 로그인하면 환영 메시지가 자동으로 표시됩니다.

1c70e0d64b23525b.png

9. 이미지 조정

사용자는 채팅에서 모든 유형의 이미지를 업로드할 수 있으며 특히 공개 소셜 플랫폼에서 불쾌감을 주는 이미지를 조정하는 것이 항상 중요합니다. FriendlyChat에서 채팅에 게시되고있는 이미지로 저장되어 구글 클라우드 스토리지 .

클라우드 기능을 사용하면 사용하여 새 이미지 업로드 검색 할 수 있습니다 functions.storage().onFinalize 트리거를. Cloud Storage에서 새 파일이 업로드되거나 수정될 때마다 실행됩니다.

이미지를 조정하기 위해 다음 프로세스를 거칩니다.

  1. 이미지가 사용하는 성인이나 폭력 것으로 표시되어 있는지 확인 클라우드 비전 API를 .
  2. 이미지에 플래그가 지정된 경우 실행 중인 Functions 인스턴스에서 다운로드합니다.
  3. 사용하여 이미지 블러 ImageMagick이를 .
  4. 흐릿한 이미지를 Cloud Storage에 업로드합니다.

Cloud Vision API 사용

이 함수에서 Google Cloud Vision API를 사용할 것이므로 Firebase 프로젝트에서 API를 활성화해야 합니다. 따라 이 링크를 다음 중포 기지 프로젝트를 선택하고 API를 활성화 :

5c77fee51ec5de49.png

종속성 설치

적당한 이미지에, 우리는 Node.js를위한 Google 클라우드 비전 클라이언트 라이브러리를 사용합니다 @ 구글 클라우드 / 비전 , 클라우드 비전 API를 통해 이미지를 실행하는 데 부적절한 이미지를 검색 할 수 있습니다.

클라우드 기능의 응용 프로그램에이 패키지를 설치하려면 다음 실행할 npm install --save 명령을 사용합니다. 반드시 당신이에서 이렇게 확인 functions 디렉토리.

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

이 로컬 패키지를 설치하고있는 선언 종속성으로 추가됩니다 package.json 파일.

종속성 가져오기 및 구성

설치 한 종속성과 일부 Node.js를 코어 모듈 (가져 오려면 path , osfs 우리는 당신의 맨 위에 다음 줄을 추가,이 섹션에서해야한다는) 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');

함수는 Google Cloud 환경 내에서 실행되므로 Cloud Storage 및 Cloud Vision 라이브러리를 구성할 필요가 없습니다. 프로젝트를 사용하도록 자동으로 구성됩니다.

부적절한 이미지 감지

당신은 사용할 것 functions.storage.onChange 곧 파일이나 폴더 등의 작성 또는 클라우드 스토리지 버킷에 수정으로 코드를 실행하는 클라우드 기능 트리거를. 추가 blurOffensiveImages 당신에 기능을 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.');
    });

함수를 실행할 Cloud Functions 인스턴스의 일부 구성을 추가했습니다. 함께 .runWith({memory: '2GB'}) , 우리는이 기능이 메모리를 많이 있기 때문에 인스턴스가 메모리보다는 기본 2GB의를 얻을 것을 요구하고 있습니다.

기능이 트리거되면 이미지가 Cloud Vision API를 통해 실행되어 성인용인지 폭력적인 것인지 감지합니다. 이미지가 이러한 기준에 따라 적절 감지되면, 우리는에서 수행되는 이미지, 모호하고 blurImage 우리가 다음에 살펴 보 겠지만 기능을.

이미지를 흐리게

다음과 같은 추가 blurImage 당신의 기능을 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.');
}

위 함수에서 이미지 바이너리는 Cloud Storage에서 다운로드됩니다. 이미지는 다음 ImageMagick과의 사용 흐려 convert 도구를, 그리고 흐리게 버전은 재 업로드 스토리지 버킷에 있습니다. 다음으로 Cloud Functions 인스턴스에서 파일을 삭제하여 디스크 공간을 확보합니다. 동일한 Cloud Functions 인스턴스가 재사용될 수 있고 파일을 정리하지 않으면 디스크 공간이 부족할 수 있기 때문에 이 작업을 수행합니다. 마지막으로 이미지가 조정되었음을 나타내는 부울을 채팅 메시지에 추가하면 클라이언트에서 메시지 새로 고침이 트리거됩니다.

함수 배포

함수는 배포한 후에만 활성화됩니다. 명령 줄에서 실행 firebase deploy --only functions :

firebase deploy --only functions

다음은 표시되어야 하는 콘솔 출력입니다.

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

기능 테스트

함수가 성공적으로 배포되면:

  1. 호스팅 URL 사용하여 브라우저에서 앱을 엽니 다 (의 형태 https://<project-id>.firebaseapp.com ).
  2. 앱에 로그인한 후 이미지를 업로드합니다. 4db9fdab56703e4a.png
  3. 업로드에 가장 공격적인 이미지를 선택 (또는 당신이 사용할 수있는 좀비를 먹고 살을 !) 그리고 잠시 후, 당신은 이미지의 흐린 버전으로 게시물 새로 고침을 볼 수 : 83dd904fbaf97d2b.png

10. 새 메시지 알림

이 섹션에서는 새 메시지가 게시될 때 채팅 참가자에게 알림을 보내는 Cloud 함수를 추가합니다.

사용 중포 기지 클라우드 메시징 (FCM)을, 당신은 안정적 플랫폼에서 사용자에게 알림을 보낼 수 있습니다. 사용자에게 알림을 보내려면 FCM 장치 토큰이 필요합니다. 우리가 사용하는 채팅 웹 앱은 사용자가 새 브라우저나 장치에서 앱을 처음 열 때 이미 장치 토큰을 수집합니다. 이 토큰은 클라우드 경우 FireStore에 저장됩니다 fcmTokens 모음입니다.

당신은 웹 응용 프로그램에 FCM 장치 토큰을 얻는 방법을 배우고 싶은 경우에, 당신은을 통해 갈 수 중포 기지 웹 코드 랩 .

알림 보내기

새 메시지가 게시 될 때 감지하려면 사용 수 있습니다 functions.firestore.document().onCreate 새로운 객체가 클라우드 경우 FireStore의 지정된 경로에 생성 될 때 코드를 실행하는 클라우드 기능 트리거를. 추가 sendNotifications 당신에 작동 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.');
    }
  });

전술 한 기능에있어서, 우리는 클라우드 경우 FireStore 데이터베이스에서 모든 사용자 기기 토큰을 수집하고 사용하여 이들 각각에 통지를 보내는 admin.messaging().sendToDevice 기능.

토큰 정리

마지막으로 더 이상 유효하지 않은 토큰을 제거하려고 합니다. 이것은 사용자로부터 한 번 받은 토큰이 브라우저나 장치에서 더 이상 사용되지 않을 때 발생합니다. 예를 들어 사용자가 브라우저 세션에 대한 알림 권한을 취소한 경우에 발생합니다. 이렇게하려면 다음 추가 cleanupTokens 당신의에서 작동 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);
}

함수 배포

함수는 배포한 후에만 활성화되며 배포하려면 명령줄에서 다음을 실행합니다.

firebase deploy --only functions

다음은 표시되어야 하는 콘솔 출력입니다.

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

기능 테스트

  1. 함수가 성공적으로 배포되면, 호스팅 URL 사용하여 브라우저에서 응용 프로그램을 열 (의 형태 https://<project-id>.firebaseapp.com ).
  2. 앱에 처음 로그인하는 경우 메시지가 표시되면 알림을 허용해야 합니다. 8b9d0c66dc36153d.png
  3. 채팅 앱 탭을 닫거나 다른 탭 표시: 앱이 백그라운드에 있는 경우에만 알림이 나타납니다. 앱이 포 그라운드에있는 동안 메시지를 수신하는 방법을 배우고 싶은 경우, 한 번 봐 가지고 우리의 문서를 .
  4. 다른 브라우저(또는 시크릿 창)를 사용하여 앱에 로그인하고 메시지를 게시하세요. 첫 번째 브라우저에서 알림이 표시되어야 합니다. 45282ab12b28b926.png

11. 축하합니다!

Cloud Functions용 ​​Firebase SDK를 사용하고 채팅 앱에 서버 측 구성요소를 추가했습니다.

우리가 다룬 내용

  • Cloud Functions용 ​​Firebase SDK를 사용하여 Cloud Functions 작성
  • 인증, Cloud Storage, Cloud Firestore 이벤트를 기반으로 Cloud Functions를 트리거합니다.
  • 웹 앱에 Firebase 클라우드 메시징 지원을 추가합니다.
  • Firebase CLI를 사용하여 Cloud Functions를 배포합니다.

다음 단계

더 알아보기