Cloudflare Durable Objects

Build a WebSocket server with Durable Objects and a Vite client

Cloudflare Durable Objects Example

This example demonstrates building a real-time WebSocket server using Cloudflare Durable Objects with a Vite frontend client.

Features

• Durable Objects: Stateful WebSocket server with SQLite storage
• WebSocket: Real-time bidirectional communication
• Vite Client: Modern frontend with WebSocket client
• Type Safety: Full TypeScript types for Durable Objects

Project Setup

Key Features Explained

Durable Object with SQLite

Durable Objects support SQLite storage for persistence:

WS_SERVER: DurableObjectNamespace<WebSocketServer>("ws-server", {
  className: "WebSocketServer",
  sqlite: true,
})

WebSocket Lifecycle

Durable Objects provide WebSocket lifecycle hooks:

• webSocketMessage: Handle incoming messages
• webSocketClose: Handle connection close
• webSocketError: Handle errors

Environment Passing

Server URL is passed to the client via environment variables:

env: {
  VITE_WEBSOCKET_URL: server.url!,
}

Development Tunnel

Local tunnel for WebSocket testing:

dev: {
  tunnel: !process.env.ALCHEMY_E2E,
}

Source Code

View the complete source code: examples/cloudflare-durable-object-websocket