remix-sse
Server Side Events (SSE) and WebSockets made easy with Remix.
Introduction
This monorepo contains several packages for working with SSE and Websockets.
- @remix-sse/core - The base set of functionality, contains the most atomic building blocks for SSE/WebSockets
Emitters
Emitters are pre-built EventEmitter classes that allow you to easily connect to various event sources.
- @remix-sse/emitter-remix-socket - A barebones WebSocket implementation for use with remix-sse.
Examples
Check out the example projects for in-depth examples.
Quick Start
Install the core lib
npm i @remix-sse/core
- Setup your emitter route, here it is called
/routes/emitter.tsxfor simplicity
Note: This MUST be a resource route, you cannot return a component from this route.
import { EventStream } from '@remix-sse/core'
export const loader: LoaderFunction = ({ request }) => {
// Return the EventStream from your route loader
return new EventStream(request, (send) => {
// In the init function, setup your SSE Event source
// Connect to your server or "local" event emitter here
// Check the example projects for more guidance
// This is the EventStream cleanup function - make sure you close all active connections
// and remove any event listeners.
return () => {
socket.disconnect();
};
});
};
- Call the
useEventSourcehook in the browser to start receiving events.
import { useEventSource } from '@remix-sse/core'
const data = useEventSource('/emitter');
Development
Coming Soon
Testing
Coming Soon
Real documentation
Coming soon
7 Dec 20, 2022
9 Dec 9, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
5 Jan 8, 2022
5 Sep 14, 2022
51 Dec 12, 2022
15 Sep 23, 2022