From Zero to Serverless: Building a Real-Time Chat App with Deno, WebSockets, and No Backend
From Zero to Serverless: Building a Real-Time Chat App with Deno, WebSockets, and No Backend
From Zero to Serverless: Building a Real-Time Chat App with Deno, WebSockets, and No Backend
Imagine building a real-time chat application where there's no traditional backend—no Express, no database, not even a VM running 24/7. Sounds crazy? Welcome to the world of Deno and serverless WebSockets.
In this article, we’re diving deep into a lesser-known yet powerful use case: spinning up a real-time chat system using Deno Deploy, native WebSockets, and entirely stateless architecture. This is not your normal CRUD + PostgreSQL tutorial—this is an architectural eye-opener for modern developers.
Why This Setup Matters
Most chat apps are built on socket.io with Express or Nest.js, tethered to a server and a database with sessions, user tokens, etc. But what if:
- You didn’t need an always-on server?
- Your app scaled instantly under traffic?
- You never paid for idle?
- You didn’t even need a database for transient messages?
You can use Deno Deploy + WebSockets + Edge broadcast channels to build a chat app that’s instantly scalable and runs at the edge. Welcome to the serverless revolution.
Tech Stack
- Deno Deploy - Serverless JavaScript/TypeScript runtime.
- Native WebSockets - Real-time communication.
- BroadcastChannel API - Native API to synchronise between edge locations (yes, stateless side channel!)
- Vanilla HTML/JS frontend
What We'll Build
A real-time chat app:
- Send/receive messages instantly
- No backend
- Client-side rendered
- Completely stateless (no DB!)
Quick Preview
Getting Started
1. Project Structure
chat-app/
├── main.ts # Deno serverless handler
└── static/
└── index.html # UI
The Magic in main.ts
// main.ts
import { serve } from "https://deno.land/[email protected]/http/server.ts";
// Broadcast channel to relay messages across edge instances
const channel = new BroadcastChannel("global-chat");
serve((req) => {
const { socket, response } = Deno.upgradeWebSocket(req);
socket.onopen = () => {
console.log("Client connected");
};
socket.onmessage = (event) => {
const msg = event.data;
// Broadcast to all edges / users
channel.postMessage(msg);
};
// Relay messages to connected clients
channel.onmessage = (e) => {
socket.send(e.data);
};
socket.onclose = () => console.log("Client disconnected");
return response;
});
Deploy it Now
You can instantly deploy this with:
deno deploy --project=chat-app main.ts
Frontend (index.html)
<!-- static/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Deno Chat</title>
<style>
body { font-family: sans-serif; margin: 1rem; }
#messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 1rem; }
input { width: 80%; }
</style>
</head>
<body>
<h2>💬 Deno Real-Time Chat</h2>
<div id="messages"></div>
<input id="messageInput" placeholder="Type a message..." />
<button onclick="sendMessage()">Send</button>
<script>
const ws = new WebSocket("wss://your-deno-project.deno.dev");
const messagesDiv = document.getElementById("messages");
ws.onmessage = (event) => {
const el = document.createElement("div");
el.textContent = event.data;
messagesDiv.appendChild(el);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
};
window.sendMessage = () => {
const input = document.getElementById("messageInput");
if (input.value) ws.send(input.value);
input.value = "";
};
</script>
</body>
</html>
Curious Edge Tech: The Broadcast Channel
Deno Deploy has support for BroadcastChannel, which is essentially a real-time communication tunnel across Deno's global edge locations.
This is the key. Since your WebSocket connections might hit different edge servers, a local in-memory relay won’t work. But with BroadcastChannel, messages get broadcast to all connected edge nodes, creating true global state synchronization—without Redis or databases.
Real-Life Use Cases
- Live score update apps
- Real-time dashboards
- Multiplayer browser games
- Temporary real-time community chats (like Reddit AMAs)
What’s Missing (and Why That’s Okay)
This app is great for use cases where message history is ephemeral. Think more WhatsApp group live than Slack workspace. If you need persistence:
- Add Supabase/PlanetScale/Fauna for DB storage.
- Store messages on the client with IndexedDB.
But if your messages can vanish after reload, you just built a beautiful stateless chat system, instantly scalable, with no backend code beyond a single file. Pretty cool, huh?
Next Steps
- Deploy this app on https://deno.com/deploy
- Add localStorage to cache messages client-side
- Add usernames, emojis, and typing indicators
- Add authentication using Deno KV (Redis-like storage)
Lessons Learned
✅ WebSockets are amazing — and native everywhere now
✅ Deno Deploy lets you build at the edge without thinking about servers
✅ Broadcast Channel turns stateless services into networked ones
✅ Simplicity wins — one TypeScript file > 4 services
Resources
- Deno Deploy
- BroadcastChannel API
- Deno WebSocket Docs
If you're still binding socket.io to Express in 2024, you're working too hard. Embrace the edge. ðŸ§
Found this cool or have questions? Email me or drop a DM on Twitter @edgechad
💡 If you need this done – we offer fullstack development services! Check it out here