WebSockets allow a browser and server to keep one connection open so both sides can send data at any time. This cheat sheet covers how WebSockets work, how they differ from normal HTTP requests, and why they are useful for chat, games, dashboards, and live collaboration. Students need this reference to connect networking ideas with real-time app design and to recognize when persistent communication is the right tool.
The core idea is that a WebSocket starts with an HTTP upgrade request and then switches to a full-duplex connection. After the handshake, the client and server exchange messages instead of repeatedly creating new HTTP requests. Important concepts include connection events, message formats, latency, heartbeats, reconnection, and secure use of wss://.
Key Facts
- A WebSocket connection begins with an HTTP request that includes Upgrade: websocket and then switches protocols if the server accepts it.
- Use ws:// for an unencrypted WebSocket connection and wss:// for an encrypted WebSocket connection over TLS.
- WebSockets are full-duplex, which means the client and server can send messages to each other independently at the same time.
- The main browser events are open, message, error, and close, and each event should be handled in client code.
- A common client pattern is socket = new WebSocket(url), then socket.send(data) after the open event fires.
- Latency is the time delay between sending data and receiving a response, and lower latency is important for real-time apps.
- Heartbeats use ping and pong messages or app-level keepalive messages to detect broken connections.
- Real-time systems should handle reconnects, duplicate messages, invalid data, and server overload instead of assuming the connection always works.
Vocabulary
- WebSocket
- A network protocol that keeps a persistent connection open so a client and server can exchange messages in real time.
- Handshake
- The starting request and response that upgrade an HTTP connection into a WebSocket connection.
- Full-duplex
- A communication style where both sides can send and receive data at the same time.
- Latency
- The delay between when data is sent and when it is received or acted on.
- Heartbeat
- A small repeated message used to confirm that a connection is still alive.
- Message frame
- A structured unit of data sent across a WebSocket connection, such as text, binary data, ping, pong, or close.
Common Mistakes to Avoid
- Sending data before the open event fires, because the WebSocket may not be ready and the message can fail.
- Using WebSockets for simple one-time data requests, because normal HTTP is often simpler and more efficient for request-response tasks.
- Forgetting to validate incoming messages, because clients and servers should never trust data just because it came through an open connection.
- Ignoring the close and error events, because real networks disconnect and the app needs recovery behavior such as retrying or showing status.
- Assuming wss:// is optional for production, because secure sites should use encrypted WebSocket connections to protect data and avoid browser security problems.
Practice Questions
- 1 A live chat app sends 24 messages per minute from one user. If each message is about 500 bytes, about how many bytes does that user send in 5 minutes, not counting headers?
- 2 A game client receives position updates every 50 milliseconds. How many updates does it receive in 1 second?
- 3 Write the basic sequence of steps for opening a WebSocket connection, sending one message, and closing the connection.
- 4 Explain why a stock price dashboard or multiplayer game benefits more from WebSockets than from repeatedly refreshing a webpage.