This is a demo of a real-time chat that uses server-sent events (SSE) with Remix.
In app/routes/index.tsx
, we have a useEffect
that creates a new EventSource
to create a connection to a server-sent event endpoint. We then listen for the message
event and update the state with the message.
The SEE endpoint is defined in app/routes/sse.tsx
. The module is a resource route for incoming GET requests. We utilize Remix's loader function to return a Response object with the text/event-stream
content type. We then use ReadableStream
to create a stream of data that we can send to the client. We iteratively check for new messages and send them to the client (only if there are new messages).
Shout-out to epeterson320 and tylermmorton who showcased working examples how to use a loader
function for SSE.
npm install
npm run dev