useStatementChannel

import { useStatementChannel } from "@use-truapi/react";
import { useEffect } from "react";

interface Presence {
  peerId: string;
  name: string;
  timestamp: number;
}

function WhoIsOnline({ peerId, name }: { peerId: string; name: string }) {
  const { values, write, ready } = useStatementChannel<Presence>();

  useEffect(() => {
    if (!ready) return;
    const announce = () =>
      write(`presence/${peerId}`, { peerId, name, timestamp: Date.now() });
    void announce();
    const interval = setInterval(announce, 10_000);
    return () => clearInterval(interval);
  }, [ready, write, peerId, name]);

  if (!ready) return <p>Presence unavailable (running standalone).</p>;

  return (
    <ul>
      {[...values.values()].map((peer) => (
        <li key={peer.peerId}>
          {peer.name}, seen {new Date(peer.timestamp).toLocaleTimeString()}
        </li>
      ))}
    </ul>
  );
}

<script setup lang="ts">
import { useStatementChannel } from "@use-truapi/vue";
import { onUnmounted, watch } from "vue";

interface Presence {
  peerId: string;
  name: string;
  timestamp: number;
}

const props = defineProps<{ peerId: string; name: string }>();

const { values, write, ready } = useStatementChannel<Presence>();

let interval: ReturnType<typeof setInterval> | undefined;
watch(ready, (isReady) => {
  if (!isReady) return;
  const announce = () =>
    write(`presence/${props.peerId}`, {
      peerId: props.peerId,
      name: props.name,
      timestamp: Date.now(),
    });
  void announce();
  interval = setInterval(announce, 10_000);
});
onUnmounted(() => clearInterval(interval));
</script>

<template>
  <p v-if="!ready">Presence unavailable (running standalone).</p>
  <ul v-else>
    <li v-for="peer in [...values.values()]" :key="peer.peerId">
      {{ peer.name }}, seen {{ new Date(peer.timestamp).toLocaleTimeString() }}
    </li>
  </ul>
</template>