https://github.com/wallpants/remix-event-stream

Utilities for easier integration of server-sent events and remix
https://github.com/wallpants/remix-event-stream

remix server-sent-events

Last synced: 3 months ago
JSON representation

Utilities for easier integration of server-sent events and remix

• Host: GitHub
• URL: https://github.com/wallpants/remix-event-stream
• Owner: wallpants
• Created: 2024-05-19T01:08:13.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-21T04:02:42.000Z (12 months ago)
• Last Synced: 2024-10-12T05:05:22.435Z (7 months ago)
• Topics: remix, server-sent-events
• Language: TypeScript
• Homepage:
• Size: 73.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# remix-event-stream

Utilities for easier integration of [_server sent events_](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)

with [_remix_](https://remix.run/).

1. Create a [Resource Route:](https://remix.run/docs/en/main/guides/resource-routes#creating-resource-routes)

   ```ts

   // app/routes/time.sse.ts

   import { LoaderFunctionArgs } from "@remix-run/node";

   import { EventStream } from "remix-event-stream/server";

   // This loader returns an EventStream to allow for

   // server-sent events. It sends the time every 5 seconds.

   export function loader({ request }: LoaderFunctionArgs) {

     return new EventStream(request, (send) => {

       const timer = setInterval(() => {

         send(new Date().toISOString());

       }, 5_000);

       return () => {

         clearInterval(timer);

       };

     });

   }

   ```

2. Receive data in React:

   ```ts

   // app/routes/time.tsx

   import { useEventSource } from "remix-event-stream/browser";

   export default function TimeRoute() {

     const sseData = useEventSource({ url: "/time.see" });

     return sseData;

   }

   ```