React Setup

Setting up

Install package

npm install streamthing

Environment variables

.env

REACT_APP_SERVER_REGION=us3
REACT_APP_SERVER_ID=123987
Server setup

You'll need to create your own server.

Server setup
Full example

Here is a full example app using React with Express server

src/App.tsx

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

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

  useEffect(() => {
    let stream: ClientStream | null = null;

    // Create client stream
    (async () => {
      const res = await fetch("/get-streamthing-token");
      const { token } = await res.json();

      stream = createClientStream({
        region: process.env.REACT_APP_SERVER_REGION,
        id: process.env.REACT_APP_SERVER_ID,
        token,
      });

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

    window.onkeydown = async (e) => {
      // Send from client
      stream?.send("keyboard-event", e.key);

      // Send from server
      await fetch("/send-event", {
        method: "POST",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify({
          event: "keyboard-event",
          message: e.key,
        }),
      });
    };

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

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