Google is committed to advancing racial equity for Black communities. See how.
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

Cloud Functions สำหรับ Firebase

ใน codelab นี้คุณจะได้เรียนรู้วิธีใช้ Firebase SDK สำหรับ Google Cloud Functions เพื่อปรับปรุงแอป Chat Web และวิธีใช้ Cloud Functions เพื่อส่งการแจ้งเตือนไปยังผู้ใช้แอป Chat

3b1284f5144b54f6.png

สิ่งที่คุณจะได้เรียนรู้

  • สร้าง Google Cloud Functions โดยใช้ Firebase SDK
  • ทริกเกอร์ฟังก์ชันระบบคลาวด์ตามเหตุการณ์ Auth, Cloud Storage และ Cloud Firestore
  • เพิ่มการสนับสนุน Firebase Cloud Messaging ในเว็บแอปของคุณ

สิ่งที่คุณต้องการ

  • โปรแกรมแก้ไข IDE / ข้อความที่คุณเลือกเช่น WebStorm , Atom หรือ Sublime
  • เทอร์มินัลสำหรับรันคำสั่งเชลล์ที่ติดตั้ง NodeJS v8
  • เบราว์เซอร์เช่น Chrome
  • โค้ดตัวอย่าง ดูขั้นตอนต่อไปสำหรับสิ่งนี้

โคลนที่ เก็บ GitHub จากบรรทัดคำสั่ง:

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

นำเข้าแอปเริ่มต้น

ใช้ IDE ของคุณเปิดหรือนำเข้าไฟล์ android_studio_folder.png ไดเร็กทอรี cloud-functions-start จากไดเร็กทอรีโค้ดตัวอย่าง ไดเร็กทอรีนี้มีโค้ดเริ่มต้นสำหรับ codelab ซึ่งประกอบด้วย Chat Web App ที่ทำงานได้อย่างสมบูรณ์

สร้างโครงการ

ใน คอนโซล Firebase ให้ คลิกที่ เพิ่มโครงการ และเรียกมันว่า FriendlyChat

คลิก สร้างโครงการ

เปิดใช้งาน Google Auth

เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอปเราจะใช้การตรวจสอบสิทธิ์ของ Google ซึ่งจำเป็นต้องเปิดใช้งาน

ใน Firebase Console ให้เปิดแท็บ Develop > Authentication > SIGN IN METHOD (หรือ คลิกที่นี่ เพื่อไปที่นั่น) คุณต้องเปิดใช้งาน Google Sign-in Provider แล้วคลิก SAVE ซึ่งจะช่วยให้ผู้ใช้สามารถลงชื่อเข้าใช้เว็บแอปด้วยบัญชี Google ของตนได้

นอกจากนี้อย่าลังเลที่จะตั้งชื่อแอปของคุณแบบสาธารณะเป็น Friendly Chat :

8290061806aacb46.png

เปิดใช้งาน Cloud Storage

แอพนี้ใช้ Cloud Storage เพื่ออัปโหลดรูปภาพ หากต้องการเปิดใช้งาน Cloud Storage ในโปรเจ็กต์ Firebase ให้ไปที่ส่วน Storage แล้วคลิกปุ่ม เริ่มต้น จากนั้นคลิ๊กได้มันเมื่อคุณได้รับการปฏิเสธเกี่ยวกับกฎการรักษาความปลอดภัย

842ad84821323ef5.png

Firebase Command Line Interface (CLI) จะช่วยให้คุณสามารถให้บริการเว็บแอปในเครื่องและปรับใช้เว็บแอปและฟังก์ชันระบบคลาวด์ของคุณ

ในการติดตั้งหรืออัพเกรด CLI ให้รันคำสั่ง npm ต่อไปนี้:

npm -g install firebase-tools

ในการตรวจสอบว่า CLI ได้รับการติดตั้งอย่างถูกต้องให้เปิดคอนโซลและรัน:

firebase --version

ตรวจสอบว่าเวอร์ชันของ Firebase CLI สูงกว่า 4.0.0 เพื่อให้มีคุณลักษณะล่าสุดทั้งหมดที่จำเป็นสำหรับ Cloud Functions หากไม่เป็นเช่นนั้นให้รัน npm install -g firebase-tools เพื่ออัปเกรดตามที่แสดงด้านบน

ให้สิทธิ์ Firebase CLI โดยเรียกใช้:

firebase login

ตรวจสอบว่าคุณอยู่ในไดเร็กทอรี cloud-functions-start จากนั้นตั้งค่า Firebase CLI เพื่อใช้ Firebase Project ของคุณ:

firebase use --add

จากนั้นเลือกรหัสโครงการของคุณและทำตามคำแนะนำ เมื่อได้รับแจ้งคุณสามารถเลือกนามแฝงใด ๆ เช่น codelab เป็นต้น

เมื่อคุณได้นำเข้าและกำหนดค่าโครงการของคุณแล้วคุณก็พร้อมที่จะเรียกใช้เว็บแอปเป็นครั้งแรก เปิดคอนโซลที่โฟลเดอร์ cloud-functions-start และเรียก firebase deploy --except functions นี้จะปรับใช้เว็บแอปกับโฮสติ้ง Firebase เท่านั้น:

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 ของโฮสติ้ง ตอนนี้เว็บแอปควรจะให้บริการจาก URL นี้ซึ่งควรอยู่ในรูปแบบ https: // <project-id> .firebaseapp.com เปิด. คุณควรเห็น UI ที่ใช้งานได้ของแอปแชท

ลงชื่อเข้าใช้แอปโดยใช้ปุ่ม ลงชื่อเข้าใช้ด้วย GOOGLE และเพิ่มข้อความและโพสต์รูปภาพได้ตามสบาย:

3b1284f5144b54f6.png

หากคุณลงชื่อเข้าใช้แอปเป็นครั้งแรกบนเบราว์เซอร์ใหม่โปรดตรวจสอบว่าคุณอนุญาตการแจ้งเตือนเมื่อได้รับแจ้ง: 8b9d0c66dc36153d.png

เราจำเป็นต้องให้คุณเปิดใช้งานการแจ้งเตือนในภายหลัง

หากคุณคลิก บล็อก โดยไม่ได้ตั้งใจคุณสามารถเปลี่ยนการตั้งค่านี้ได้โดยคลิกที่ปุ่ม 🔒 Secure ทางด้านซ้ายของ URL ใน Chrome Omnibar และเลือก Notifications> Always Allow บนไซต์นี้ :

e926868b0546ed71.png

ตอนนี้เราจะเพิ่มฟังก์ชันบางอย่างโดยใช้ Firebase SDK สำหรับ Cloud Functions

Cloud Functions ช่วยให้คุณมีโค้ดที่ทำงานใน Cloud ได้อย่างง่ายดายโดยไม่ต้องตั้งค่าเซิร์ฟเวอร์ เราจะแสดงวิธีสร้างฟังก์ชันที่ตอบสนองต่อเหตุการณ์ Firebase Auth, Cloud Storage และ Firebase Realtime Database เริ่มต้นด้วย Auth

เมื่อใช้ Firebase SDK สำหรับ Cloud Functions รหัสฟังก์ชันของคุณจะอยู่ภายใต้ไดเร็กทอรี functions (โดยค่าเริ่มต้น) รหัสฟังก์ชันของคุณยังเป็นแอป Node.js ดังนั้นจึงต้องการ package.json ที่ให้ข้อมูลบางอย่างเกี่ยวกับแอปและรายการการอ้างอิง

เพื่อให้ง่ายขึ้นสำหรับคุณเราได้สร้างไฟล์ functions/index.js ที่โค้ดของคุณจะไปแล้ว อย่าลังเลที่จะตรวจสอบไฟล์นี้ก่อนดำเนินการต่อ

cd functions
ls

หากคุณไม่คุ้นเคยกับ Node.js จะช่วยให้เรียนรู้เพิ่มเติมได้ก่อนที่จะดำเนินการต่อใน codelab

ไฟล์ package.json แสดงการอ้างอิงที่จำเป็นอยู่แล้ว 2 รายการ ได้แก่ Firebase SDK สำหรับ Cloud Functions และ Firebase Admin SDK ในการติดตั้งในเครื่องให้รันการ npm install จากโฟลเดอร์ 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.

ก่อนอื่นเราจะนำเข้าโมดูลที่จำเป็นจากนั้นจึงเขียนฟังก์ชันสามอย่างแทนสิ่งที่ต้องทำ ก่อนอื่นให้นำเข้าโมดูลโหนดที่จำเป็น

จะต้องใช้โมดูลสองโมดูลในระหว่างโค้ดแล็บนี้โมดูล firebase-functions firebase ช่วยให้เราสามารถเขียนกฎทริกเกอร์ฟังก์ชันระบบคลาวด์ได้ในขณะ firebase-admin โมดูล firebase-admin ช่วยให้เราสามารถใช้แพลตฟอร์ม Firebase บนเซิร์ฟเวอร์ที่มีการเข้าถึงระดับผู้ดูแลระบบได้เช่นเขียนไปยัง Cloud Firestore หรือส่งการแจ้งเตือน FCM

ในไฟล์ index.js ให้แทนที่ TODO แรกด้วย 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.

คุณกำหนดค่า Firebase Admin SDK ได้โดยอัตโนมัติเมื่อใช้งานในสภาพแวดล้อม Cloud Functions หรือคอนเทนเนอร์ Google Cloud Platform อื่น ๆ นี่คือสิ่งที่เราทำข้างต้นเมื่อเรียก admin.initializeApp();

ตอนนี้เรามาเพิ่มฟังก์ชันที่ทำงานเมื่อผู้ใช้ลงชื่อเข้าใช้ครั้งแรกในแอปแชทของคุณและเราจะเพิ่มข้อความแชทเพื่อต้อนรับผู้ใช้

โครงสร้างข้อความแชท

ข้อความที่โพสต์ไปยังฟีดแชท FriendlyChat จะถูกเก็บไว้ใน Cloud Firestore มาดูโครงสร้างข้อมูลที่เราใช้สำหรับข้อความกัน ในการดำเนินการนี้ให้โพสต์ข้อความใหม่ในแชทที่เขียนว่า "Hello World":

11f5a676fbb1a69a.png

สิ่งนี้ควรปรากฏเป็น:

fe6d1c020d0744cf.png

ในคอนโซลแอป Firebase ของคุณให้คลิกที่ ฐานข้อมูล ในส่วน พัฒนา คุณควรเห็นคอลเล็กชันข้อความและเอกสารหนึ่งชุดที่มีข้อความที่คุณเขียน:

442c9c10b5e2b245.png

ดังที่คุณเห็นข้อความแชทจะถูกเก็บไว้ใน Cloud Firestore เป็นเอกสารที่มีแอตทริบิวต์ name profilePicUrl text และ timestamp เพิ่มลงในคอลเล็กชัน messages

การเพิ่มข้อความต้อนรับ

Cloud Function แรกจะเพิ่มข้อความต้อนรับ ผู้ใช้ใหม่ เข้าสู่การแชท สำหรับสิ่งนี้เราสามารถใช้ trigger functions.auth().onCreate ซึ่งเรียกใช้ฟังก์ชันทุกครั้งที่ผู้ใช้ลงชื่อเข้าใช้ครั้งแรกในแอป Firebase ของคุณ เพิ่มฟังก์ชัน addWelcomeMessages ลงในไฟล์ index.js ของคุณ:

index.js

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

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

การเพิ่มฟังก์ชันนี้ให้กับอ็อบเจ็กต์การ exports พิเศษเป็นวิธีของ Node ในการทำให้ฟังก์ชันสามารถเข้าถึงได้ภายนอกไฟล์ปัจจุบันและจำเป็นสำหรับ Cloud Functions

ในฟังก์ชันด้านบนเรากำลังเพิ่มข้อความต้อนรับใหม่ที่โพสต์โดย "Firebase Bot" ลงในรายการข้อความแชท เรากำลังดำเนินการโดยใช้วิธีการ add ในคอลเล็กชัน messages ใน Cloud Firestore ซึ่งเป็นที่เก็บข้อความของแชท

เนื่องจากนี่เป็นการดำเนินการแบบอะซิงโครนัสเราจึงต้องส่งคืน Promise ที่ ระบุเมื่อการเขียน Cloud Firestore เสร็จสิ้นเพื่อไม่ให้ฟังก์ชันออกจากการดำเนินการเร็วเกินไป

ปรับใช้ฟังก์ชัน

ฟังก์ชันนี้จะใช้งานได้หลังจากที่คุณใช้งานได้แล้วเท่านั้น ในบรรทัดคำสั่งให้เรียกใช้ firebase deploy --only 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

ผู้ใช้สามารถอัปโหลดรูปภาพทุกประเภทในแชทและสิ่งสำคัญคือต้องกลั่นกรองรูปภาพที่ไม่เหมาะสมโดยเฉพาะในแพลตฟอร์มโซเชียลสาธารณะ ใน FriendlyChat รูปภาพที่เผยแพร่ไปยังแชทจะถูกเก็บไว้ใน Google Cloud Storage

ด้วย Cloud Functions คุณสามารถตรวจจับภาพที่อัปโหลดใหม่โดยใช้ทริกเกอร์ functions.storage().onFinalize สิ่งนี้จะทำงานทุกครั้งที่มีการอัปโหลดหรือแก้ไขไฟล์ใหม่ใน Cloud Storage

ในการกลั่นกรองภาพเราจะดำเนินการตามขั้นตอนต่อไปนี้:

  1. ตรวจสอบว่ารูปภาพถูกตั้งค่าสถานะเป็นผู้ใหญ่หรือรุนแรงโดยใช้ Cloud Vision API
  2. หากภาพถูกตั้งค่าสถานะให้ดาวน์โหลดในอินสแตนซ์ฟังก์ชันที่กำลังทำงานอยู่
  3. เบลอภาพโดยใช้ ImageMagick
  4. อัปโหลดภาพเบลอไปยัง Cloud Storage

เปิดใช้งาน Cloud Vision API

เนื่องจากเราจะใช้ Google Cloud Vision API ในฟังก์ชันนี้คุณจึงต้องเปิดใช้ API ในโครงการ firebase ของคุณ ไปที่ ลิงก์นี้ เลือกโครงการ Firebase ของคุณและเปิดใช้ API:

5c77fee51ec5de49.png

ติดตั้งการอ้างอิง

ในการกลั่นกรองรูปภาพเราจะต้องมีแพ็คเกจ Node.js สองสามแพ็คเกจ:

  • ไลบรารีไคลเอ็นต์ Google Cloud Vision สำหรับ Node.js: @ google-cloud / vision เพื่อเรียกใช้รูปภาพผ่าน Cloud Vision API เพื่อตรวจจับภาพที่ไม่เหมาะสม
  • ไลบรารี Node.js ช่วยให้เราสามารถเรียกใช้กระบวนการ: child-process - สัญญาว่า จะรัน ImageMagick เนื่องจากเครื่องมือบรรทัดคำสั่ง ImageMagick ติดตั้งไว้ล่วงหน้าในอินสแตนซ์ Functions ทั้งหมด

ในการติดตั้งแพ็กเกจทั้งสองนี้ลงในแอป Cloud Functions ให้รันคำสั่ง npm install --save ต่อไปนี้ ตรวจสอบให้แน่ใจว่าคุณทำสิ่งนี้จากไดเร็กทอรี functions

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

สิ่งนี้จะติดตั้งสองแพ็คเกจในเครื่องและเพิ่มเป็นการอ้างอิงที่ประกาศไว้ในไฟล์ package.json ของคุณ

นำเข้าและกำหนดค่าการอ้างอิง

ในการนำเข้าการอ้างอิงสองรายการที่ติดตั้งไว้และโมดูลหลักของ Node.js ( path , os และ fs ) ที่เราต้องการในส่วนนี้ให้เพิ่มบรรทัดต่อไปนี้ที่ด้านบนของไฟล์ index.js ของคุณ:

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

เนื่องจากฟังก์ชันของคุณจะทำงานภายในสภาพแวดล้อม Google Cloud จึงไม่จำเป็นต้องกำหนดค่าไลบรารี Cloud Storage และ Cloud Vision เนื่องจากฟังก์ชันเหล่านี้จะได้รับการกำหนดค่าโดยอัตโนมัติเพื่อใช้โครงการของคุณ

การตรวจจับภาพที่ไม่เหมาะสม

คุณจะใช้ทริกเกอร์ functions.storage.onChange Cloud Functions ซึ่งเรียกใช้โค้ดของคุณทันทีที่ไฟล์หรือโฟลเดอร์ถูกสร้างหรือแก้ไขในที่เก็บข้อมูล Cloud Storage เพิ่มฟังก์ชัน 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 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.');
    });

โปรดทราบว่าเราได้เพิ่มการกำหนดค่าบางอย่างของอินสแตนซ์ 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});
  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.');
}

ในฟังก์ชันด้านบนไบนารีรูปภาพจะถูกดาวน์โหลดจาก Cloud Storage จากนั้นภาพจะเบลอโดยใช้เครื่องมือ convert ของ ImageMagick และเวอร์ชันเบลอจะถูกอัปโหลดอีกครั้งในที่เก็บข้อมูล จากนั้นเราจะลบไฟล์ในอินสแตนซ์ 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

ในส่วนนี้คุณจะเพิ่มฟังก์ชันคลาวด์ที่ส่งการแจ้งเตือนไปยังผู้เข้าร่วมการแชทเมื่อมีการโพสต์ข้อความใหม่

การใช้ Firebase Cloud Messaging (FCM) ช่วยให้คุณส่งการแจ้งเตือนไปยังผู้ใช้ของคุณได้แบบข้ามแพลตฟอร์มและเชื่อถือได้ ในการส่งการแจ้งเตือนไปยังผู้ใช้คุณต้องมีโทเค็นอุปกรณ์ FCM ของพวกเขา เว็บแอปแชทที่เราใช้อยู่จะรวบรวมโทเค็นอุปกรณ์จากผู้ใช้เมื่อพวกเขาเปิดแอปเป็นครั้งแรกบนเบราว์เซอร์หรืออุปกรณ์ใหม่ โทเค็นเหล่านี้จะถูกเก็บไว้ใน Cloud Firestore ในคอลเลกชัน fcmTokens

หากคุณต้องการเรียนรู้วิธีรับโทเค็นอุปกรณ์ FCM บนเว็บแอปคุณสามารถไปที่ Firebase Web Codelab

ส่งการแจ้งเตือน

ในการตรวจจับเมื่อมีการโพสต์ข้อความใหม่คุณจะใช้ทริกเกอร์ functions.firestore.document().onCreate Cloud Functions ซึ่งเรียกใช้รหัสของคุณเมื่อวัตถุใหม่ถูกสร้างขึ้นในเส้นทางที่กำหนดของ Cloud 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);
      console.log('Notifications have been sent and tokens cleaned up.');
    }
  });

ในฟังก์ชันข้างต้นเรากำลังรวบรวมโทเค็นอุปกรณ์ของผู้ใช้ทั้งหมดจากฐานข้อมูล Cloud 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) {
     console.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens who are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

ปรับใช้ฟังก์ชัน

ฟังก์ชันนี้จะใช้งานได้หลังจากที่คุณใช้งานได้แล้วเท่านั้น ในบรรทัดคำสั่งให้เรียกใช้ 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: 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

คุณได้ใช้ Firebase SDK สำหรับ Cloud Functions และเพิ่มคอมโพเนนต์ฝั่งเซิร์ฟเวอร์ไปยังแอปแชท

สิ่งที่เราได้กล่าวถึง

  • การเขียน Cloud Functions โดยใช้ Firebase SDK สำหรับ Cloud Functions
  • ทริกเกอร์ฟังก์ชันระบบคลาวด์ตามเหตุการณ์ Auth, Cloud Storage และ Cloud Firestore
  • เพิ่มการสนับสนุน Firebase Cloud Messaging ในเว็บแอปของคุณ
  • ปรับใช้ Cloud Functions โดยใช้ Firebase CLI

ขั้นตอนถัดไป

เรียนรู้เพิ่มเติม