MDN WebSocket: The Essential Guide to Real-Time Communication in 2025

Introduction to MDN WebSocket

Understanding the WebSocket Protocol

How WebSocket Works

• Initial handshake: A client sends an HTTP upgrade request to the server, which responds and establishes the WebSocket protocol.
• Persistent connection: Once established, the connection remains open, supporting ongoing, low-latency data transfer in both directions.
• Two-way communication: Both client and server can send messages independently at any time.

Differences from HTTP/REST

• Stateful: Maintains connection state versus stateless HTTP.
• Reduced latency: No need to re-establish connections for each message.
• Lower overhead: Fewer headers, less protocol chatter.

Key Features and Use Cases

• Real-time chat applications
• Live financial or sports feeds
• Multiplayer online games
• Collaborative document editing

WebSocket API: MDN WebSocket Fundamentals

Creating a WebSocket Connection

• ws://: Unencrypted connection (for trusted environments only)
• wss://: Secure connection over TLS (recommended for production)
• Protocols: Optional array of sub-protocols for application-specific negotiation

Handling Connection Events

• onopen: Connection established
• onmessage: Message received
• onclose: Connection closed
• onerror: Error occurred

Code Snippet: Basic WebSocket Connection in JavaScript

1const ws = new WebSocket("wss://echo.websocket.org");
2
3ws.onopen = function(event) {
4    console.log("Connection opened");
5    ws.send("Hello, server!");
6};
7
8ws.onmessage = function(event) {
9    console.log("Received: ", event.data);
10};
11
12ws.onclose = function(event) {
13    console.log("Connection closed");
14};
15
16ws.onerror = function(error) {
17    console.error("WebSocket error:", error);
18};
19

Advanced MDN WebSocket Features

Sub-protocols and Extensions

Binary Data and Text Data Handling

• "blob" (default)
• "arraybuffer"

Web Workers Support

Code Snippet: Using binaryType and Protocols

1const ws = new WebSocket("wss://example.com/data", ["binary", "json"]);
2ws.binaryType = "arraybuffer";
3
4ws.onmessage = function(event) {
5    if (event.data instanceof ArrayBuffer) {
6        // Handle binary data
7        const view = new Uint8Array(event.data);
8        console.log("Binary data received:", view);
9    } else {
10        // Handle text data
11        console.log("Text data received:", event.data);
12    }
13};
14

Handling Errors and Closing Connections

Error Events and Troubleshooting

The CloseEvent Interface

Properly Closing a Connection

Code Snippet: Graceful Connection Closure

1ws.onclose = function(event) {
2    if (event.wasClean) {
3        console.log(`Closed cleanly, code=${event.code}, reason=${event.reason}`);
4    } else {
5        console.warn("Connection died unexpectedly");
6    }
7};
8
9// Trigger closure
10ws.close(1000, "Session ended by user");
11

WebSocketStream and Backpressure

What is WebSocketStream?

• WebSocket: Message-based, immediate delivery
• WebSocketStream: Stream-based, supports flow control and chunked messages

Streams API and Backpressure

Current Support and Limitations

Security Considerations with WebSockets

Secure Connections (wss://)

• Always use wss:// for encrypted, authenticated transport.
• Avoid ws:// in public or untrusted networks.

Authentication, CORS, and Best Practices

• Perform authentication at the handshake, using cookies, tokens, or custom headers.
• Configure CORS policies on the server to restrict origins.
• Validate all incoming data to prevent injection or buffer attacks.

Reference to RFC 6455 Security Section

Writing a WebSocket Server

Server Requirements and Basic Architecture

• Must support the HTTP upgrade handshake
• Maintain persistent TCP connections
• Support message routing and state management

The Handshake Process

Server Implementation Tips (Node.js Example)

Reverse Proxy Considerations

• Correct forwarding of upgrade headers
• Timeout and buffer settings are optimized for persistent connections

When to Use WebTransport or Other Alternatives

Conclusion and Further Resources