cloudflare/templates/durable-chat-template

Chat with other users in real-time using Durable Objects and PartyKit.

reactreact-routeresbuildtypescript
Loading...
cloudflare

Durable Chat App

Deploy to Cloudflare

Template Preview

With this template, you can deploy your own chat app to converse with other users in real-time. Going to the demo website puts you into a unique chat room based on the ID in the url. Share that ID with others to chat with them! This is powered by Durable Objects and PartyKit.

How It Works

Users are assigned their own chat room when they first visit the page, and can talk to others by sharing their room URL. When someone joins the chat room, a WebSocket connection is opened with a Durable Object that stores and synchronizes the chat history.

The Durable Object instance that manages the chat room runs in one location, and handles all incoming WebSocket connections. Chat messages are stored and retrieved using the Durable Object SQL Storage API. When a new user joins the room, the existing chat history is retrieved from the Durable Object for that room. When a user sends a chat message, the message is stored in the Durable Object for that room and broadcast to all other users in that room via WebSocket connection. This template uses the PartyKit Server API to simplify the connection management logic, but could also be implemented using Durable Objects on their own.

Getting Started

Outside of this repo, you can start a new project with this template using C3 (the create-cloudflare CLI):

npm create cloudflare@latest -- --template=cloudflare/templates/durable-chat-template

A live public deployment of this template is available at https://durable-chat-template.templates.workers.dev

Setup Steps

  1. Install the project dependencies with a package manager of your choice:
    npm install
    
  2. Deploy the project!
    npx wrangler deploy