Building a Real-Time Chat Application with PartyServer

// src/types.ts
export type ChatMessage = {
  type: "chat-message";
  id: string;
  content: string;
  sender: string;
};

export type SystemMessage = {
  type: "join" | "leave";
  id: string;
  sender: string;
};

export type Message = ChatMessage | SystemMessage;

// src/server.ts
import { routePartykitRequest, Server } from "partyserver";
import type { Connection, ConnectionContext, WSMessage } from "partyserver";
import { env } from "cloudflare:workers";

import type { Message, ChatMessage } from "./types";

const MAX_MESSAGES = 50; // messages to keep in storage

export class Chat extends Server {
  static options = { hibernate: true };

  // ----------------------------------------------------------------
  // onConnect: send message history to the new client
  // ----------------------------------------------------------------
  async onConnect(connection: Connection, ctx: ConnectionContext) {
    const url = new URL(ctx.request.url);
    const sender = url.searchParams.get("name") ?? "Anonymous";

    // Attach the sender name to this connection so we can use it later
    connection.setState({ sender });

    // Load recent messages from storage and replay them
    const history =
      (await this.ctx.storage.get<ChatMessage[]>("messages")) ?? [];
    connection.send(JSON.stringify({ type: "history", messages: history }));

    // Announce arrival to everyone already in the room
    this.broadcast(
      JSON.stringify({ type: "join", id: connection.id, sender } satisfies Message),
      [connection.id]
    );
  }

  // ----------------------------------------------------------------
  // onMessage: persist and broadcast every chat message
  // ----------------------------------------------------------------
  async onMessage(connection: Connection<{ sender: string }>, message: WSMessage) {
    const data = JSON.parse(message as string) as ChatMessage;

    // Persist to Durable Object storage
    const history =
      (await this.ctx.storage.get<ChatMessage[]>("messages")) ?? [];
    history.push(data);
    // Keep only the most recent messages to bound storage size
    if (history.length > MAX_MESSAGES) history.splice(0, history.length - MAX_MESSAGES);
    await this.ctx.storage.put("messages", history);

    // Broadcast to everyone, including the sender
    this.broadcast(JSON.stringify(data));
  }

  // ----------------------------------------------------------------
  // onClose: notify remaining participants
  // ----------------------------------------------------------------
  onClose(connection: Connection<{ sender: string }>) {
    const sender = connection.state?.sender ?? "Someone";
    this.broadcast(
      JSON.stringify({ type: "leave", id: connection.id, sender } satisfies Message),
      [connection.id]
    );
  }
}

export default {
  async fetch(request: Request): Promise<Response> {
    return (
      (await routePartykitRequest(request, env)) ||
      new Response("Not Found", { status: 404 })
    );
  },
} satisfies ExportedHandler<Env>;

// wrangler.jsonc
{
  "name": "my-chat-app",
  "main": "src/server.ts",
  "durable_objects": {
    "bindings": [
      {
        "name": "Chat",
        "class_name": "Chat"
      }
    ]
  },
  "migrations": [
    {
      "tag": "v1",
      "new_sqlite_classes": ["Chat"]
    }
  ]
}

// src/client.ts
import { PartySocket } from "partysocket";

const socket = new PartySocket({
  host: "https://my-chat-app.workers.dev",
  party: "chat",   // kebab-cased binding name
  room: "general", // room name = DO instance name
  query: { name: "Alice" },
});

socket.addEventListener("open", () => {
  console.log("Connected to room");
});

socket.addEventListener("message", (event) => {
  const msg = JSON.parse(event.data as string);

  if (msg.type === "history") {
    // Render previous messages on initial load
    renderHistory(msg.messages);
  } else if (msg.type === "chat-message") {
    appendMessage(msg);
  } else if (msg.type === "join") {
    appendSystem(`${msg.sender} joined`);
  } else if (msg.type === "leave") {
    appendSystem(`${msg.sender} left`);
  }
});

// Send a chat message
function sendMessage(content: string) {
  socket.send(
    JSON.stringify({
      type: "chat-message",
      id: crypto.randomUUID(),
      content,
      sender: "Alice",
    })
  );
}

// src/App.tsx
import { useState, useRef } from "react";
import { usePartySocket } from "partysocket/react";
import type { ChatMessage } from "./types";

export default function App() {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);

  const socket = usePartySocket({
    party: "chat",
    room: "general",
    query: { name: "Alice" },
    onMessage(evt) {
      const msg = JSON.parse(evt.data as string);
      if (msg.type === "history") {
        setMessages(msg.messages);
      } else if (msg.type === "chat-message") {
        setMessages((prev) => [...prev, msg]);
      }
    },
  });

  function send() {
    if (!inputRef.current?.value) return;
    socket.send(
      JSON.stringify({
        type: "chat-message",
        id: crypto.randomUUID(),
        content: inputRef.current.value,
        sender: "Alice",
      })
    );
    inputRef.current.value = "";
  }

  return (
    <>
      <ul>
        {messages.map((m) => (
          <li key={m.id}>
            <b>{m.sender}:</b> {m.content}
          </li>
        ))}
      </ul>
      <input ref={inputRef} onKeyDown={(e) => e.key === "Enter" && send()} />
    </>
  );
}