TypeSafe Primitives for a Realtime Web

// backend
const sendMessage = io.procedure
  .input(z.object({ message: z.string() }))
  .broadcast(({ message }) => ({
    receiveMessage: { message },
  }));

const router = io.router({ sendMessage });
const ioServer = io.server({ router });

// frontend
event.receiveMessage.useEvent(({ data }) => {
  console.log(data.message);
});

broadcast.sendMessage({ message: "Hello!" });

// pnpm install @pluv/platform-node
createIO(platformNode());

// pnpm install @pluv/platform-cloudflare
createIO(platformCloudflare());

const GET = async (req: Request) => {
  const room = getRoomFromUrl(req.url);
  const { user } = await getSession(req);

  const token = await ioServer
    .createToken({ room, user });

  return new Response(token, { status: 200 });
};

const {
  useBroadcast,
  useOthers,
  // ...
} = createBundle(client);

const broadcast = useBroadcast();
const names = useOthers((others) => {
  return others.map(({ user }) => user.name);
});

// pnpm install @pluv/platform-pluv
const io = createIO(
  platformPluv({
    authorize: {
      user: z.object({ id: z.string() }),
    },
    basePath: "/api/pluv",
    publicKey: "pk_...",
    secretKey: "sk_...",
    webhookSecret: "whsec_...",
  })
);

const client = createClient({
  types,
  initialStorage: yjs.doc(() => ({
    messages: yjs.array<string>([]),
  })),
});

const [messages, type] = useStorage("messages");

const addMessage = (message: string) => {
  type?.push([message]);
};

messages?.map((message, i) => (
  <div key={i}>{message}</div>
));

const client = createClient({
  types,
  presence: z.object({
    cursor: z.object({
      x: z.number(),
      y: z.number(),
    }).nullable(),
  }),
});

const [myCursor] = useMyPresence(
  ({ cursor }) => cursor,
);
const cursors = useOthers((others) => (
  others.map(({ presence }) => presence.cursor)
));