Skip to content
Cloudflare Docs

Deploy a real-time chat application

Last reviewed: about 1 year ago

In this tutorial, you will deploy a serverless, real-time chat application that runs using Durable Objects.

This chat application uses a Durable Object to control each chat room. Users connect to the Object using WebSockets. Messages from one user are broadcast to all the other users. The chat history is also stored in durable storage. Real-time messages are relayed directly from one user to others without going through the storage layer.

To continue with this tutorial, you must purchase the Workers Paid plan and enable Durable Objects by logging into the Cloudflare dashboard ↗ > Workers & Pages > select your Worker > Durable Objects.

Before you start

All of the tutorials assume you have already completed the Get started guide, which gets you set up with a Cloudflare Workers account, C3 ↗, and Wrangler.

Clone the chat application repository

Open your terminal and clone the workers-chat-demo ↗ repository:

Terminal window
git clone https://github.com/cloudflare/workers-chat-demo.git

Authenticate Wrangler

After you have cloned the repository, authenticate Wrangler by running:

Terminal window
npx wrangler login

Deploy your project

When you are ready to deploy your application, run:

Terminal window
npx wrangler deploy

Your application will be deployed to your *.workers.dev subdomain.

To deploy your application to a custom domain within the Cloudflare dashboard, go to your Worker > Triggers > Add Custom Domain.

To deploy your application to a custom domain using Wrangler, open your project’s wrangler.toml.

To configure a route in your wrangler.toml, add the following to your environment:

routes = [
    { pattern = "example.com/about", zone_id = "<YOUR_ZONE_ID>" }
]

If you have specified your zone ID in the environment of your wrangler.toml, you will not need to write it again in object form.

To configure a subdomain in your wrangler.toml, add the following to your environment:

routes = [
  { pattern = "subdomain.example.com", custom_domain = true }
]

To test your live application:

  1. Open your edge-chat-demo.<SUBDOMAIN>.workers.dev subdomain. Your subdomain can be found in the Cloudflare dashboard ↗ > Workers & Pages > your Worker > Triggers > Routes > select the edge-chat-demo.<SUBDOMAIN>.workers.dev route.
  2. Enter a name in the your name field.
  3. Choose whether to enter a public room or create a private room.
  4. Send the link to other participants. You will be able to view room participants on the right side of the screen.

Uninstall your application

To uninstall your chat application, modify your wrangler.toml file to remove the durable_objects bindings and add a deleted_classes migration:

[durable_objects]
bindings = [
]


# Indicate that you want the ChatRoom and RateLimiter classes to be callable as Durable Objects.
[[migrations]]
tag = "v1" # Should be unique for each entry
new_classes = ["ChatRoom", "RateLimiter"]


[[migrations]]
tag = "v2"
deleted_classes = ["ChatRoom", "RateLimiter"]

Then run npx wrangler deploy.

To delete your Worker:

  1. Log in to the Cloudflare dashboard ↗ and select your account.
  2. In Account Home, select Workers & Pages.
  3. In Overview, select your Worker.
  4. Select Manage Service > Delete. For complete instructions on set up and deletion, refer to the README.md in your cloned repository.

By completing this tutorial, you have deployed a real-time chat application with Durable Objects and Cloudflare Workers.

Continue building with other Cloudflare Workers tutorials below.

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal