SSE works once and then stops

[avram-at-hazel]

I'm trying to create a simple pointing poker app. When a player joins the room I want the other players pages to update and show the new player. I've got a resource route set up like so:

// app/routes/sse.room.ts
import { LoaderFunctionArgs } from "@remix-run/node"
import { eventStream } from "remix-utils/sse/server"

import { myEventEmitter } from "~/data"

export function loader({ request }: LoaderFunctionArgs) {
    return eventStream(request.signal, function setup(send) {
        function playerAddedToRoomHandler (updatedRoomId: string) {
            send({ event: "playerAddedToRoom", data: updatedRoomId })
        }

        myEventEmitter.on('playerAddedToRoom', playerAddedToRoomHandler)

        return () => {
          myEventEmitter.off('playerAddedToRoom', playerAddedToRoomHandler)
        }
    })
}

This works once, and then I think the cleanup function runs early and turns off the event listener. If I remove the myEventEmitter.off() call, then it doesn't work at all and I get a server error that says:

TypeError: Invalid state: Controller is already closed
    at new NodeError (node:internal/errors:399:5)
    at ReadableStreamDefaultController.enqueue (node:internal/webstreams/readablestream:1036:13)
    at send (/Users/avram/Dev/pointing-poker/node_modules/remix-utils/build/server/event-stream.js:12:28)
    at EventEmitter.playerAddedToRoomHandler (/Users/avram/Dev/pointing-poker/app/routes/sse.room.ts:10:7)
    at EventEmitter.emit (node:events:525:35)
    at addPlayerToRoom (/Users/avram/Dev/pointing-poker/app/data.ts:80:18)
    at action (/Users/avram/Dev/pointing-poker/app/routes/rooms.$roomId.join.tsx:34:3)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Object.callRouteAction (/Users/avram/Dev/pointing-poker/node_modules/@remix-run/server-runtime/dist/data.js:36:16)
    at /Users/avram/Dev/pointing-poker/node_modules/@remix-run/router/router.ts:4902:19 {
  code: 'ERR_INVALID_STATE'
}

[sergiodxa]

It seems the request is being closed, or at least marked as closed, since that comes from outside the eventStream there's no way I could control it, you would need to check why the request is closed.

Check if client-side the connection is still open.

[avram-at-hazel]

Thanks @sergiodxa How should I check client-side if the connection is still open?

[avram-at-hazel]

Nevermind, I solved it - the SSE was sending the event but I wasn't properly responding to it in the useEffect hook. Thanks for your help!