Quickstart

CELERIS_CLIENT_ID=your-client-id
CELERIS_SIGNING_SECRET=your-signing-secret

.env
node_modules/
dist/

import { createServer } from "node:http";
import { createSigner } from "@useceleris/server";

const { CELERIS_CLIENT_ID, CELERIS_SIGNING_SECRET } = process.env;
if (!CELERIS_CLIENT_ID || !CELERIS_SIGNING_SECRET) {
  throw new Error("Set both Celeris values in the server .env file.");
}

const signer = createSigner({
  clientId: CELERIS_CLIENT_ID,
  signingSecret: CELERIS_SIGNING_SECRET,
});

function sendJson(response, status, value) {
  response.writeHead(status, {
    "content-type": "application/json",
    "cache-control": "no-store",
  });
  response.end(JSON.stringify(value));
}

const server = createServer(async (request, response) => {
  if (request.url !== "/api/realtime-credentials") {
    sendJson(response, 404, { error: "Not found." });
    return;
  }
  if (request.method !== "POST") {
    sendJson(response, 405, { error: "Use POST." });
    return;
  }
  if (
    request.headers.origin !== "http://127.0.0.1:5173" ||
    request.headers["content-type"]?.split(";")[0] !== "application/json"
  ) {
    sendJson(response, 403, { error: "Use the local demo page." });
    return;
  }

  try {
    const chunks = [];
    let size = 0;
    for await (const chunk of request) {
      size += chunk.length;
      if (size > 2048) {
        sendJson(response, 413, { error: "Request too large." });
        return;
      }
      chunks.push(chunk);
    }

    let body;
    try {
      body = JSON.parse(Buffer.concat(chunks).toString("utf8"));
    } catch {
      sendJson(response, 400, { error: "Send valid JSON." });
      return;
    }

    if (body?.channelReference !== "demo-room") {
      sendJson(response, 403, { error: "Only demo-room is allowed." });
      return;
    }

    // Demo identity and permissions are fixed here, never taken from the body.
    const credentials = signer.sign({
      channels: { kind: "restricted", references: ["demo-room"] },
      permissions: {
        kind: "restricted",
        segments: [{ segmentId: "chat", read: true, write: true }],
      },
      reference: "demo-user",
      replay: false,
      allowEcho: false,
    });
    sendJson(response, 200, credentials);
  } catch {
    if (!response.headersSent && !response.destroyed) {
      sendJson(response, 500, { error: "Could not issue credentials." });
    }
  }
});

server.listen(4000, "127.0.0.1", () => {
  console.log("Demo credential server: http://127.0.0.1:4000");
});

import { defineConfig } from "vite";

export default defineConfig({
  root: "web",
  server: {
    host: "127.0.0.1",
    port: 5173,
    strictPort: true,
    proxy: {
      "/api": {
        target: "http://127.0.0.1:4000",
        changeOrigin: true,
      },
    },
  },
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My first Celeris app</title>
  </head>
  <body>
    <main>
      <h1>Celeris messages</h1>
      <p role="status">Connection: <span id="status">idle</span></p>
      <button id="connect" type="button">Connect</button>
      <button id="close" type="button">Close connection</button>
      <form id="message-form">
        <label for="message">Message</label>
        <input id="message" maxlength="500" required />
        <button id="send" type="submit" disabled>Send</button>
      </form>
      <h2>Activity</h2>
      <ul id="messages" aria-live="polite"></ul>
    </main>
    <script type="module" src="/app.js"></script>
  </body>
</html>

import {
  createClient,
  readText,
  textPayload,
  ServerError,
} from "@useceleris/client";

const status = document.querySelector("#status");
const connectButton = document.querySelector("#connect");
const closeButton = document.querySelector("#close");
const sendButton = document.querySelector("#send");
const form = document.querySelector("#message-form");
const messageInput = document.querySelector("#message");
const messages = document.querySelector("#messages");

function log(message) {
  const item = document.createElement("li");
  item.textContent = message;
  messages.append(item);
  if (messages.children.length > 100) messages.firstElementChild.remove();
}

function reportError(error) {
  const category =
    error instanceof ServerError ? error.type : (error.code ?? "Error");
  log(category + ": " + error.message);
}

const client = createClient({
  credentialProvider: async (request) => {
    const response = await fetch("/api/realtime-credentials", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ channelReference: request.channelReference }),
      signal: request.signal,
    });
    if (!response.ok) {
      throw new Error("Credential endpoint returned " + response.status);
    }
    return response.json();
  },
});

const channel = client.channel("demo-room");
const chat = channel.segment("chat");
const events = channel.events();

const stopState = events.onStateChange((state) => {
  status.textContent = state;
  sendButton.disabled = state !== "connected";
  connectButton.disabled = state !== "idle" && state !== "failed";
});
const stopErrors = events.onError(reportError);
const stopRecovery = events.onRecovery(() => {
  log("Reconnected. Messages during the outage may be missing.");
});
const stopMessages = chat.onMessage((payload, metadata) => {
  log(metadata.tokenReference + ": " + readText(payload));
});
const membership = chat.subscribe();

connectButton.addEventListener("click", async () => {
  try {
    await channel.connect();
  } catch (error) {
    reportError(error);
  }
});

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const message = messageInput.value;
  if (!message.trim()) return;
  try {
    await chat.publish({ payload: textPayload(message) });
    log("Sent locally (not a delivery receipt): " + message);
    messageInput.value = "";
  } catch (error) {
    reportError(error);
  }
});

closeButton.addEventListener("click", async () => {
  closeButton.disabled = true;
  try {
    await channel.close();
  } finally {
    membership.cancel();
    stopMessages();
    stopRecovery();
    stopErrors();
    stopState();
  }
});