WebSocket Basics in the Browser
new WebSocket(url), onopen/onmessage/onerror/onclose, send(), readyState.
Real-Time in the Browser
HTTP is request/response: the client asks, the server answers, and the connection closes. For chat, live dashboards, or multiplayer games you need the server to push data without being asked.
The WebSocket protocol gives you a single long-lived, two-way connection between browser and server.
Opening a Connection
The browser ships a global WebSocket constructor. Pass a URL using the ws:// (plain) or wss:// (TLS) scheme.
Creating the object immediately starts the connection handshake.
const ws = new WebSocket("wss://echo.example.com/socket")
// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.All lessons in this course
- WebSocket Basics in the Browser
- Socket.io Client with Vue
- Building a Real-Time Chat Component
- useWebSocket Composable with Reconnection