WebSocket & WebRTC Tutorial: Real-Time Communication on the Web
How to build real-time web apps with WebSockets and WebRTC — from a broadcast chat and peer-to-peer video calls to live AI-powered speech transcription with the OpenAI Realtime API.
Get the Full Source Code on GitHub
This article is a summary. The full, runnable tutorial —
six self-contained demos from a broadcast chat to
peer-to-peer video and live AI transcription — lives in
the audoir/websocket-webrtc-tutorial repository.
Introduction
Real-time communication is at the heart of modern web applications — from live chat and collaborative editing to video calls and AI-powered voice interfaces. Two browser technologies make this possible: WebSockets, which provide a persistent bidirectional channel between a browser and a server, and WebRTC, which enables direct peer-to-peer connections between browsers for ultra-low-latency data, audio, and video.
The websocket-webrtc-tutorial repository walks through both technologies side by side across six self-contained demo tabs — starting simple and building up to live speech-to-text powered by the OpenAI Realtime API. This post summarizes what each tab covers — head to the repo for the full, runnable code.
WebSocket vs. WebRTC: A Quick Comparison
Before diving into the demos, it helps to understand when to reach for each technology.
WebSocket
- • Server is always in the loop
- • Scales to N clients via broadcast
- • Simple setup — no signaling needed
- • Great for group chat, live feeds, notifications
WebRTC
- • Server only assists during setup (signaling)
- • Ultra-low latency once connected
- • Supports data channels, audio, and video
- • Great for video calls, P2P file transfer
Six Progressive Demo Tabs
Each tab in the app is a self-contained demo that teaches a different communication pattern, building from simple to advanced.
🔌 Basic WebSocket: Real-Time Chat
A classic broadcast chat where every connected browser tab sees every message in real time via Socket.IO, with the server as the hub relaying messages to all clients.
📡 Basic WebRTC: Peer-to-Peer Chat
Messages travel directly between two browser tabs. The server only relays the initial signaling handshake (offer/answer/ICE candidates) — then it's completely out of the loop.
🎥 WebRTC Video: Peer-to-Peer Video Call
Live camera and microphone streams travel directly between two browsers using RTCPeerConnection.addTrack media tracks instead of a data channel.
🎙️ Live AI Transcription
Three different architectures — WebRTC, WebSocket, and a server proxy — all delivering live speech-to-text via the OpenAI Realtime API, with different trade-offs for security and complexity.
Three Ways to Deliver Live AI Transcription
Tabs 4, 5, and 6 all produce the same result — live speech-to-text — but differ in how audio reaches OpenAI and where the API key lives.
| Tab 4 — WebRTC | Tab 5 — WebSocket | Tab 6 — Server | |
|---|---|---|---|
| Audio transport | Native media track | PCM16 Base64 over WebSocket | PCM16 Base64 via Socket.IO → server WS |
| Ephemeral token | Yes | Yes | No |
| API key exposure | Ephemeral key in browser | Ephemeral key in browser | Key stays on server only |
Full Comparison: All Six Tabs
The table below summarizes the key differences across all six demos — message path, server role, scalability, and best use case.
| Tab | Message/Media Path | Server Role | Good For |
|---|---|---|---|
| 1 — WebSocket Chat | Browser → Server → All browsers | Always in the loop | Group chat, live feeds, notifications |
| 2 — WebRTC Chat | Browser ↔ Browser (direct) | Only during signaling | Low-latency P2P text, file transfer |
| 3 — WebRTC Video | Browser ↔ Browser (direct) | Only during signaling | Video/audio calls |
| 4 — WebRTC Transcription | Browser → OpenAI (direct) | Only mints ephemeral token | Live captions, voice notes, accessibility |
| 5 — WebSocket Transcription | Browser → OpenAI (direct) | Only mints ephemeral token | Live captions when WebRTC is unavailable |
| 6 — Server Transcription | Browser → Server → OpenAI | Full proxy (manages OpenAI WS) | Secure transcription; browser can't reach OpenAI directly |
Tech Stack
A modern TypeScript stack keeps all six demos running on a single port: Next.js, React, and Tailwind CSS on the frontend; a custom Node.js HTTP server (server.ts) that mounts both Next.js and Socket.IO; Socket.IO for WebSocket transport and signaling relay; native browser WebRTC APIs; and the OpenAI Realtime API (gpt-realtime-whisper) for live transcription.
Getting Started
Clone the repository, add your OpenAI API key, run npm install and npm run dev, then open two browser tabs to try the chat and video demos. See
the repository README for full setup instructions and the shared useTranscription hook that powers Tabs 4–6.
Conclusion
WebSockets and WebRTC are complementary technologies that together cover the full spectrum of real-time web communication. WebSockets excel at server-mediated scenarios — group chat, live feeds, notifications — where the server needs to be in the loop. WebRTC shines for peer-to-peer scenarios — video calls, file transfer, low-latency data — where you want to minimize server involvement after the initial handshake.
The three transcription tabs show how the same AI capability can be delivered with very different architectures, each with its own trade-offs around security, complexity, and browser compatibility. The server-proxy approach (Tab 6) is the most secure and straightforward to reason about — the API key never leaves the server, and no ephemeral token dance is required.
Ready to Build It Yourself?
Clone the repository and open it in two browser tabs to see WebSocket chat, WebRTC video, and live AI transcription in action.
Clone websocket-webrtc-tutorial on GitHubAbout the Author
Wayne Cheng is the founder and AI app developer at Audoir, LLC. Prior to founding Audoir, he worked as a hardware design engineer for Silicon Valley startups and an audio engineer for creative organizations. He holds an MSEE from UC Davis and a Music Technology degree from Foothill College.
Further Exploration
Explore the websocket-webrtc-tutorial repository and experiment with extending the demos. Consider adding a third peer to the WebRTC rooms, implementing TURN server support for stricter network environments, or building a multi-user transcription session where all participants see a shared live transcript.
For more AI-powered development tools and tutorials, visit Audoir .