feat: add sse-chat example (#111)

Author: sergiodxa

sse-chat/.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};

sse-chat/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env

sse-chat/README.md

@@ -0,0 +1,27 @@
+# Server-Sent Events - Simple chat app
+
+This example demonstrates how to use Server-Sent Events to create a simple chat app without persistant storage.
+
+## Preview
+
+Open this example on [CodeSandbox](https://codesandbox.com):
+
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/examples/tree/main/sse-chat)
+
+## Example
+
+The example uses the `eventStream` response helper from Remix Utils to implement a SSE endpoint.
+
+In that endpoint the server subscribe to an EventEmitter to get new messages and broadcast them to subscribers.
+
+Client-side, the `useEventSource` hook from Remix Utils is used to subscribe to the SSE endpoint and display new messages as they arrive.
+
+All paired with a Remix form to send new messages to an action which are then emitted to the EventEmitter.
+
+## Related Links
+
+- [Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events)
+- [Remix Utils](https://github.com/sergiodxa/remix-utils#server-sent-events)
+- [Event Emitter](https://nodejs.org/api/events.html#events_class_eventemitter)
+- [Remix Form](https://remix.run/docs/en/v1/components/form)
+- [Remix action](https://remix.run/docs/en/v1/route/action)

sse-chat/app/entry.client.tsx

@@ -0,0 +1,21 @@
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+const hydrate = () =>
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>
+    );
+  });
+
+if (window.requestIdleCallback) {
+  window.requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  window.setTimeout(hydrate, 1);
+}

sse-chat/app/entry.server.tsx

@@ -0,0 +1,110 @@
+import { PassThrough } from "stream";
+
+import type { EntryContext } from "@remix-run/node";
+import { Response } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import isbot from "isbot";
+import { renderToPipeableStream } from "react-dom/server";
+
+const ABORT_DELAY = 5000;
+
+const handleRequest = (
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) =>
+  isbot(request.headers.get("user-agent"))
+    ? handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      )
+    : handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      );
+export default handleRequest;
+
+const handleBotRequest = (
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) =>
+  new Promise((resolve, reject) => {
+    let didError = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onAllReady: () => {
+          const body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError: (error: unknown) => {
+          reject(error);
+        },
+        onError: (error: unknown) => {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+
+const handleBrowserRequest = (
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) =>
+  new Promise((resolve, reject) => {
+    let didError = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onShellReady: () => {
+          const body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError: (error: unknown) => {
+          reject(error);
+        },
+        onError: (error: unknown) => {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });

sse-chat/app/root.tsx

@@ -0,0 +1,31 @@
+import type { MetaFunction } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "New Remix App",
+  viewport: "width=device-width,initial-scale=1",
+});
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}

sse-chat/app/routes/index.tsx

@@ -0,0 +1,53 @@
+import type { LoaderArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Form, useLocation } from "@remix-run/react";
+import { useEffect, useRef, useState } from "react";
+import { useEventSource } from "remix-utils";
+
+import { emitter } from "~/services/emitter";
+
+export async function action({ request }: LoaderArgs) {
+  const formData = await request.formData();
+  const message = formData.get("message");
+  emitter.emit("message", message);
+  return json({ message });
+}
+
+export default function Component() {
+  const $form = useRef<HTMLFormElement>(null);
+  const { key } = useLocation();
+  useEffect(
+    function clearFormOnSubmit() {
+      $form.current?.reset();
+    },
+    [key]
+  );
+
+  const [messages, setMessages] = useState<string[]>([]);
+  const lastMessage = useEventSource("/sse/chat");
+  useEffect(
+    function saveMessage() {
+      setMessages((current) => {
+        if (typeof lastMessage === "string") return current.concat(lastMessage);
+        return current;
+      });
+    },
+    [lastMessage]
+  );
+
+  return (
+    <>
+      <Form ref={$form} method="post">
+        <label>Message</label>
+        <input type="text" name="message" />
+        <button>Send</button>
+      </Form>
+
+      <ul>
+        {messages.map((message) => (
+          <li key={message}>{message}</li>
+        ))}
+      </ul>
+    </>
+  );
+}

sse-chat/app/routes/sse.chat.ts

@@ -0,0 +1,18 @@
+import type { LoaderArgs } from "@remix-run/node";
+import { eventStream } from "remix-utils";
+
+import { emitter } from "~/services/emitter";
+
+export function loader({ request }: LoaderArgs) {
+  return eventStream(request.signal, function setup(send) {
+    function listener(value: string) {
+      send({ data: value });
+    }
+
+    emitter.on("message", listener);
+
+    return function cleanup() {
+      emitter.off("message", listener);
+    };
+  });
+}

sse-chat/app/services/emitter.ts

@@ -0,0 +1,30 @@
+/*
+ * This file is used to create a global EventEmitter instance.
+ * This is used to emit events from the action to the SSE route
+ * so that the SSE route can send the event to the client.
+ *
+ * This example uses the EventEmitter class from the events built-in module.
+ * You can use any other event emitter you want. For example, you can use
+ * Redis or any PubSub technology to implement the same.
+ *
+ * In a real app, you would probably want to use one of those because your app
+ * will probably be running on multiple servers.
+ */
+import { EventEmitter } from "events";
+
+let emitter: EventEmitter;
+
+declare global {
+  var __emitter: EventEmitter | undefined;
+}
+
+if (process.env.NODE_ENV === "production") {
+  emitter = new EventEmitter();
+} else {
+  if (!global.__emitter) {
+    global.__emitter = new EventEmitter();
+  }
+  emitter = global.__emitter;
+}
+
+export { emitter };

sse-chat/package.json

@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "start": "remix-serve build"
+  },
+  "dependencies": {
+    "@remix-run/node": "*",
+    "@remix-run/react": "*",
+    "@remix-run/serve": "*",
+    "isbot": "^3.6.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "remix-utils": "^5.1.0"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "*",
+    "@remix-run/eslint-config": "*",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.27.0",
+    "typescript": "^4.8.4"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}