如何使用 onFinalize 向前端返回“成功”消息？

Question

I am currently using a ReactJs frontend with the Firebase Javascript SDK. It is hooked up to a firebase-functions storage emulator using NodeJS in the backend.

Usually, I am able to call a functions.https.onCall(...) cloud function (that has been set up with nodejs) from my frontend and receive a promise, and then I can use the data in the front end normally.

However, using functions.storage.object().onFinalize(...) in the backend, I am trying to force some sort of way to return a success message to my front end after a file has successfully been processed.

Here is what I've tried:

My backend code (Nodejs):

exports.processMedia = functions.storage.object().onFinalize(async (object) =>{
// Here I successfully process any uploaded images

// Issue - After the media has been processed, I'd like to return a message that can be used to update the UI. I've tried to return a new promise like so:

return new Promise((resolve, reject) =>{
        return resolve("Success");
    });
})

And then in my React UI, I am trying to capture the return message from the backend using a httpsCallable('processMedia') function because I don't know how else to try to get the response.

async processMedia(){
    const processMediaCallable = this.functions.httpsCallable('processMedia');
    return processMediaCallable;
}

Then I try to log out the values from the promise:

async function getProcessedMessage(){
    await firebase.processMedia().then((val) => {
        console.log(val);
    }); 
}

I get this output in the browser console for val after I've uploaded a file in the UI and processMedia() in the backend has completed:

ƒ (data) {
      return _this.call(name, data, options || {});
    }

I am trying to output a success message here. Any thoughts would be greatly appreciated. Thank you.

Answer 1

You cannot return a response to client from a background function. When a user uploads any file to your Firebase storage they get a success response and the function triggered from that event has nothing to do with client. There's a workaround for using Firebase Realtime Database which you can use to emit the response to user.

To break it down in simple steps:

1. Upload file to Firebase Storage
2. Create a realtime database listener on client side
3. After all processing in your Cloud Function, write something in the database and that'll be delivered to your user.

Client:

async function uploadFile() { 
  // upload to firebase storage
  const alertRef = firebase.database().ref(`alerts/${userID}`);
  alertRef.on('child_added', (snapshot) => {
    const data = snapshot.val();
    // Alert received from cloud function
    // Delete this alert from database
    snapshot.ref.set(null)
  });
}

Cloud function:

exports.processMedia = functions.storage.object().onFinalize(async (object) => { 
  // Process the file
  // Add alert in realtime database
  const alertRef = firebase.database().ref(`alerts/${userID}`).push()
  return alertRef.set({...}) // add any data you would like to pass to client side
})

child_added event is triggered once for each existing child and then again every time a new child is added to the specified path. The listener is passed a snapshot containing the new child's data.

That being said just make sure you are not alerting users multiple times with same notification.