javascript - Implement server-sent events functionality in firebase functions - Stack Overflow

admin管理员组

文章数量:1405299

I am tring to implement server-sent events functionality in a firebase function where it will continuously send back data to the client side while the function is executing rather than sending back data when the function pletes. Everything Iv'e tried just makes the function return any data at the end of the execution. Is it even possible to stream data back to client side from a firebase function or does it cache and buffer everything until it finishes executing? Is there another way to execute this functionality with a firebase function that would be done differently?

here is my code so far:

functions/index.js:

const functions = require("firebase-functions");
const express = require("express");

const app = express();

app.get("/sse", (request, response) => {
  // Set headers to indicate that the response is an SSE stream
  response.setHeader("Content-Type", "text/event-stream");
  response.setHeader("Cache-Control", "no-cache");
  response.setHeader("Connection", "keep-alive");

  // Send initial message to client
  response.write("data: Connected\n\n");

  // Send data to the client every second
  const intervalId = setInterval(() => {
    const data = { message: "Hello world!" };
    response.write(`data: ${JSON.stringify(data)}\n\n`);
    response.flush(); // Send buffered data to client immediately
  }, 1000);

  // End the response when the client closes the connection
  request.on("close", () => {
    clearInterval(intervalId);
    response.end();
  });
});

exports.sseFunction = functions.https.onRequest(app);

and then my function in the client side:

export const sseFunctionStream = async () => {
  const eventSource = new EventSource(
    "https://us-central1-<project-id>.cloudfunctions/sseFunction/sse"
  );

  eventSource.addEventListener("message", (event) => {
    const data = JSON.parse(event.data);
    console.log(data);
  });

  return () => {
    eventSource.close();
  };
};

ive tried severl implementations, but they all result with the same oute that the event listener does not get any data while the function is executing until it finishes. Once it finishes it gets all of the data. I want it to console log "Hello World" every second on the client side as it listens for events, just as it does in the function.

I am tring to implement server-sent events functionality in a firebase function where it will continuously send back data to the client side while the function is executing rather than sending back data when the function pletes. Everything Iv'e tried just makes the function return any data at the end of the execution. Is it even possible to stream data back to client side from a firebase function or does it cache and buffer everything until it finishes executing? Is there another way to execute this functionality with a firebase function that would be done differently?

here is my code so far:

functions/index.js:

const functions = require("firebase-functions");
const express = require("express");

const app = express();

app.get("/sse", (request, response) => {
  // Set headers to indicate that the response is an SSE stream
  response.setHeader("Content-Type", "text/event-stream");
  response.setHeader("Cache-Control", "no-cache");
  response.setHeader("Connection", "keep-alive");

  // Send initial message to client
  response.write("data: Connected\n\n");

  // Send data to the client every second
  const intervalId = setInterval(() => {
    const data = { message: "Hello world!" };
    response.write(`data: ${JSON.stringify(data)}\n\n`);
    response.flush(); // Send buffered data to client immediately
  }, 1000);

  // End the response when the client closes the connection
  request.on("close", () => {
    clearInterval(intervalId);
    response.end();
  });
});

exports.sseFunction = functions.https.onRequest(app);

and then my function in the client side:

export const sseFunctionStream = async () => {
  const eventSource = new EventSource(
    "https://us-central1-<project-id>.cloudfunctions/sseFunction/sse"
  );

  eventSource.addEventListener("message", (event) => {
    const data = JSON.parse(event.data);
    console.log(data);
  });

  return () => {
    eventSource.close();
  };
};

ive tried severl implementations, but they all result with the same oute that the event listener does not get any data while the function is executing until it finishes. Once it finishes it gets all of the data. I want it to console log "Hello World" every second on the client side as it listens for events, just as it does in the function.

• javascript
• reactjs
• firebase
• google-cloud-functions

Share Follow edited Apr 1, 2024 at 18:30 starball 54k3434 gold badges236236 silver badges929929 bronze badges asked Mar 2, 2023 at 22:59 ZackZack 6111 silver badge44 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Seems that it's not possible to make Firebase Functions support SSE/event-stream due to buffering mechanism. Ref: https://stackoverflow./a/48431968/802848

You could consider using Cloud Run, GAE or writing to Firebase DB as an alternative.

Possible alternatives: Supabase supports server-sent events Docs

Also, Vercel edge functions support streaming data.

I have not tried it, but GCloud suggests setting header X-Accel-Buffering to 'no' will facilitate implementing SSE.

Another SO answer adds that besides the header, GAE Flexible must be enabled.

本文标签： javascriptImplement serversent events functionality in firebase functionsStack Overflow