Understanding Sockets and WebSocket: Concepts, Differences, and Protocol Details

Socket is an API that encapsulates the TCP/IP protocol stack, allowing programmers to use TCP/IP for network communication, while HTTP is an application‑layer protocol that packages data for transmission.

TCP/IP provides the transport layer, and HTTP adds an application layer to give meaning to the transmitted data; developers can also define custom application‑layer protocols.

WebSocket originated from the WHATWG HTML5 effort around 2008 to create a full‑duplex connection, addressing the limitations of long‑polling and other techniques for browser‑based real‑time communication.

Difference Between WebSocket and Socket

WebSocket and traditional sockets are unrelated concepts; a socket is a generic programming interface, whereas WebSocket is a specific protocol built on top of HTTP and TCP.

Why Use WebSocket?

WebSocket solves the problem of bidirectional communication by establishing a persistent connection, unlike HTTP/1.1 which follows a request‑response model even though it supports persistent connections.

Typical alternatives for real‑time communication include:

Polling : repeatedly sending requests, which wastes bandwidth and is not real‑time.

Long polling : client sends a request that the server holds open until new data arrives, reducing bandwidth usage compared to simple polling.

Long connection : using a TCP connection directly (as with sockets) or HTTP’s keep‑alive; the former is essentially what WebSocket provides.

WebSocket Protocol Content

WebSocket aims to replace HTTP in bidirectional scenarios while still leveraging HTTP infrastructure (default ports 80 and 443). The protocol consists of two parts: the handshake and data transmission.

Handshake

The client initiates the handshake with an HTTP request containing an Upgrade header, asking the server to switch the protocol from HTTP to WebSocket on the existing TCP connection.

Upgrade is the HTTP/1.1 header used to request a protocol change; the server may accept or reject the upgrade.

Request URI format:

ws-URI  = "ws:" "//" host [":" port] path ["?" query]
wss-URI = "wss:" "//" host [":" port] path ["?" query]

host = <host, defined in [RFC3986], Section 3.2.2>
port = <port, defined in [RFC3986], Section 3.2.3>
path = <path-abempty, defined in [RFC3986], Section 3.3>
query = <query, defined in [RFC3986], Section 3.4>

Data Transmission

After a successful handshake, the connection enters the OPEN state and data is exchanged using frames. Client‑to‑server frames are masked, while server‑to‑client frames are not; unmasked frames from the client must be closed.

Each frame contains a type identifier, payload length, and the payload itself, which may include extension and application data.

WebSocket vs HTTP Comparison

Similarities

Both are TCP‑based application‑layer protocols.

Both use a request/response model to establish a connection.

Both handle errors similarly during the connection phase.

Both can transmit data over the network.

Differences

WebSocket uses HTTP only for the initial handshake, then defines new headers not used by standard HTTP.

WebSocket connections are direct and cannot be forwarded by intermediaries.

After establishment, either side can send data at any time without a request.

Data is sent in frames rather than HTTP request messages.

WebSocket frames are ordered.

Source: juejin.cn/post/6942358900171603975