Put realtime rooms
in another website.

# Roomly deployment environment
REALTIME_SECRET=<at-least-32-random-characters>
ROOMLY_API_KEY=<a-different-32-character-random-value>
REDIS_URL=<your-upstash-redis-url>
ALLOWED_ORIGINS=https://www.example.com,https://preview.example.com

# GitHub-protected /dashboard
AUTH_SECRET=<another-random-value>
AUTH_GITHUB_ID=<github-oauth-client-id>
AUTH_GITHUB_SECRET=<github-oauth-client-secret>
ROOMLY_ADMIN_EMAIL=<one-verified-github-email>

Application name: Roomly dashboard
Homepage URL: https://roomly.example.com
Authorization callback URL:
https://roomly.example.com/api/auth/callback/github

# Consuming website: server-only environment
ROOMLY_URL=https://realtime.example.com
ROOMLY_API_KEY=<the-same-private-key-configured-in-roomly>

import { auth } from "@/auth";
import { canUserJoinRoom } from "@/lib/permissions";

export async function POST(request: Request) {
  const session = await auth();
  if (!session?.user?.id) {
    return Response.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { room } = await request.json();
  if (
    typeof room !== "string" ||
    !(await canUserJoinRoom(session.user.id, room))
  ) {
    return Response.json({ error: "Forbidden" }, { status: 403 });
  }

  const response = await fetch(`${process.env.ROOMLY_URL}/api/token`, {
    method: "POST",
    cache: "no-store",
    headers: {
      "content-type": "application/json",
      authorization: `Bearer ${process.env.ROOMLY_API_KEY}`,
    },
    body: JSON.stringify({
      room,
      user: {
        id: session.user.id,
        name: session.user.name ?? "Anonymous",
      },
    }),
  });

  return new Response(await response.text(), {
    status: response.status,
    headers: { "content-type": "application/json", "cache-control": "no-store" },
  });
}

# Copy the browser client into the consuming repository
lib/roomly/client.ts
lib/roomly/protocol.ts

# Consuming website: safe to expose to the browser
NEXT_PUBLIC_ROOMLY_URL=https://realtime.example.com

import { RealtimeRoom } from "@/lib/roomly/client";

const baseUrl = process.env.NEXT_PUBLIC_ROOMLY_URL!;
const websocketUrl = new URL("/api/ws", baseUrl);
websocketUrl.protocol = websocketUrl.protocol === "https:" ? "wss:" : "ws:";

const room = new RealtimeRoom({
  room: "document:42",
  user: {
    id: currentUser.id,
    name: currentUser.name,
    data: { avatarUrl: currentUser.avatarUrl },
  },
  // Same-origin route in the consuming website. It authenticates the user,
  // checks room permission, and calls Roomly from the server.
  authUrl: "/api/roomly-token",
  websocketUrl: websocketUrl.toString(),
});

await room.connect();

const stopSnapshot = room.on("room.snapshot", ({ members }) => {
  renderMembers(members);
});

const stopJoined = room.on("member.joined", ({ member }) => {
  showToast(`${member.name} joined`);
  renderMembers(room.getMembers());
});

const stopLeft = room.on("member.left", ({ member, reason }) => {
  showToast(`${member.name} left: ${reason}`);
  renderMembers(room.getMembers());
});

const stopEvents = room.on("event", ({ name, data, member }) => {
  if (name === "cursor.moved") {
    moveRemoteCursor(member.id, data);
  }
});

room.publish("cursor.moved", { x: 42, y: 18 });
room.publish("document.saved", { version: 7 });
room.publish("typing.changed", { typing: true });

// Run this when the page unmounts, the user signs out,
// or they switch to another room.
stopSnapshot();
stopJoined();
stopLeft();
stopEvents();
room.disconnect();

// The browser calls your authenticated, same-origin token proxy.
// ROOMLY_API_KEY is never sent to the browser.
const tokenResponse = await fetch("/api/roomly-token", {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({ room: "document:42" }),
});

const { token } = await tokenResponse.json();
const socket = new WebSocket(
  `wss://realtime.example.com/api/ws?token=${encodeURIComponent(token)}`,
);

socket.addEventListener("message", ({ data }) => {
  const message = JSON.parse(data);
  console.log(message.type, message);
});

await new Promise((resolve, reject) => {
  socket.addEventListener("open", resolve, { once: true });
  socket.addEventListener("error", reject, { once: true });
});

const heartbeat = window.setInterval(() => {
  socket.send(JSON.stringify({ type: "heartbeat" }));
}, 15_000);

// Publish
socket.send(JSON.stringify({
  type: "event",
  name: "cursor.moved",
  data: { x: 42, y: 18 },
}));

// Leave
window.clearInterval(heartbeat);
socket.send(JSON.stringify({ type: "leave" }));
socket.close();