Timeout for Server-Sent Events

[Marcdj-02]

I am experimenting with SSE and encountered a problem where Cloudflare returns a 524 (A timeout occurred) error after 100 seconds and for the server directly after 4 minutes (Azure load balancer default timeout).

Is there any way to mitigate this? I read about SSE comments, but am not quite sure how to tackle this.
Any help would be appreciated.

References

• https://community.cloudflare.com/t/server-side-events-sse-is-interrupted-in-approx-100s/424548

[sergiodxa]

That's how Cloudflare works, they will shutdown your workers after some time because they use Serverless.

[sergiodxa]

Supposedly using CF DurableObjects, but I never tried.

[Marcdj-02]

Thanks, I'll take a look at it

[kirankumal]

I'm facing the same issue while hosting Shopify Hydrogen on the Oxygen runtime. It resolves the event with a 200 status code. Is there a solution for this?

[Marcdj-02]

@kirankumal I've resolved it with adding a init and ping like this:

 return eventStream(request.signal, (send) => {
    function handle(data: string) {
      send({ event: TARGET_EVENT, data });
    }

    send({ event: 'init', data: '' });

    const pingInterval = setInterval(() => {
      send({ event: 'ping', data: '' });
    }, PING_INTERVAL);

    ServerSentEvent.on(TARGET_EVENT, handle);

    return function clear() {
      ServerSentEvent.off(TARGET_EVENT, handle);

      clearInterval(pingInterval);
    };
  });

[kirankumal]

@Marcdj-02 Thank you for your response, I did similar but it's logging the interval not the events although I emitted the events.

import {EventEmitter} from 'node:events';

export const emitter = new EventEmitter();

emitted through one of the action like this:

emitter.emit(EVENTS.LOGOUT.KEY, {
      customerId: customerId,
      message: UserStatusChangedMessage,
    });

here is my sse handler:

import type {LoaderFunctionArgs} from '@remix-run/server-runtime';
import {eventStream} from 'remix-utils/sse/server';
import {EVENTS} from '~/lib/constants/events.contstent';
import {emitter} from '~/lib/utils/emitter.server';

export async function loader({request}: LoaderFunctionArgs) {
  return eventStream(request.signal, function setup(send) {
    function handle(data: {customerId: string; message: string}) {
      const eventData = JSON.stringify({
        customerId: data.customerId,
        message: data.message,
      });

      send({event: EVENTS.LOGOUT.NAME, data: eventData});
    }

    send({event: 'init', data: ''});

    const pingInterval = setInterval(() => {
      send({event: 'ping', data: ''});
    }, 1000);

    emitter.on(EVENTS.LOGOUT.KEY, handle);

    return function clear() {
      emitter.off(EVENTS.LOGOUT.KEY, handle);

      clearInterval(pingInterval);
    };
  });
}