npm install streamthing

SERVER_PASSWORD=abc123
NEXT_PUBLIC_SERVER_REGION=us3
SERVER_ID=123987

"use server";

import { createServerStream } from "streamthing";

export async function sendEvent(event: string, message: string) {
  // Some sort of auth

  // Create a server stream
  const stream = createServerStream({
    channel: "main",
    id: process.env.SERVER_ID,
    region: process.env.NEXT_PUBLIC_SERVER_REGION,
    password: process.env.SERVER_PASSWORD,
  });

  // Send the event and message
  await stream.send(event, message);

  return {
    success: true,
    message: "Successfully sent message",
  };
}

export async function getToken(socketID: string) {
  // Some sort of auth

  const token = await createToken({
    id: process.env.SERVER_ID,
    channel: "main",
    password: process.env.SERVER_PASSWORD,
    socketID,
  });

  return token;
}

"use client";

import { useEffect, useState } from "react";
import { createClientStream, ClientStream } from "streamthing";

export default function Page() {
  // Initialize state
  const [data, setData] = useState<string>("");

  useEffect(() => {
    let stream: ClientStream | null = null;
    // Create client stream
    (async () => {
      stream = await createClientStream(process.env.NEXT_PUBLIC_SERVER_REGION);
      stream.authenticate(await getToken(stream.id));

      // Create listener
      stream.receive("keyboard-event", (message) => {
        // Handle data
        setData(message);
      });
    })();

    // Send event
    window.onkeydown = async (e) => {
      await sendEvent("keyboard-event", e.key);
    };

    return () => {
      // Disconnect on unmount
      stream?.disconnect();
    };
  }, []);

  // Render data
  return (
    <div>
      <p>Data: {data}</p>
    </div>
  );
}