useRealtime

import { useState } from "react";
import { useRealtime } from "./realtime";

export function Notifications() {
  const [messages, setMessages] = useState<string[]>([]);

  const { status } = useRealtime({
    channels: ["default"],
    events: ["notification.alert", "chat.message"],
    onData(payload) {
      if (payload.event === "notification.alert") {
        setMessages((prev) => [...prev, `alert: ${payload.data}`]);
      }

      if (payload.event === "chat.message") {
        setMessages((prev) => [
          ...prev,
          `${payload.data.user}: ${payload.data.text}`,
        ]);
      }
    },
  });

  return (
    <div>
      <p>Status: {status}</p>
      <pre>{JSON.stringify(messages, null, 2)}</pre>
    </div>
  );
}