WebSocket Practical Guide: From Basics to Production Deployment

This article provides a comprehensive guide to WebSocket technology, covering the fundamental concepts and the complete development workflow from local debugging to production deployment.

1. WebSocket Basics

WebSocket is a network transmission protocol that enables full-duplex communication over a single TCP connection. Compared to HTTP, both are application-layer protocols relying on TCP. WebSocket URLs start with ws:// or wss://, while HTTP does not support full-duplex communication and typically uses polling.

2. Using WebSocket in Projects

Development Environment: The article demonstrates how to wrap a basic WebSocket demo for project use. Key configuration includes setting up webpack proxy, separating WebSocket interfaces from HTTP interfaces, and using reverse proxy with location.host to preserve cookies and headers.

Heartbeat Detection & Reconnection: To ensure connection stability, the article covers handling network fluctuations and server timeouts. Heartbeat detection involves the client sending periodic messages to the server. Reconnection logic checks connection status before sending messages and attempts to reconnect if the connection is lost.

Nginx Configuration:

location
/websocket {
proxy_pass
http://xx.xxx.xx.xx;
# websocket server. Do not include ws://
proxy_http_version
1
.
1
;
# http protocol upgrade
proxy_set_header
Host
$host
;
# preserve original headers
proxy_set_header
X-Forwarded-For
$proxy_add_x_forwarded_for
;
proxy_set_header
Upgrade
$http_upgrade
;
# protocol upgrade request
proxy_set_header
Connection
$connection_upgrade
;
}

3. Socket.io

Socket.io is a Node.js-based real-time application framework that provides more abstracted capabilities than native WebSocket. It can fall back to polling in browsers that do not support WebSocket.

Advantages: Mature, ready-to-use, good compatibility.

Disadvantages: Larger bundle size, requires matching backend and frontend (both must use socket.io).