Introduction of WebSockets

Asha kalai
3 min readSep 13, 2020

--

WebSocket is a significant advancement in client-server web technology. It is a communications protocol, providing full-duplex communication channels over a single TCP connection which means both parties can communicate and exchange data at the same time until the connection opens.

HTTP and WebSocket both are communication protocols used in client-server communication. In WebSocket, data is continuously pushed/transmitted into the same connection which is already open, that is why WebSocket is faster and improves the application performance than HTTP.

I’m going to explain this protocol with the following parts

  1. handshake
  2. data transfer
  3. Connection close
WebSocket communication between the client and server

Handshake

For establishing this full-duplex connection, the client needs to send the initial request to the server and get the response for that request. The initial request is an HTTP GET request and the response is an upgraded WebSocket connection response. If the client gets an HTTP 101 response from the server, the full-duplex connection will be made successfully. This process is called WebSocket handshake.

WebSocket URLs use the ws/wssscheme. wss is used in the secure WebSocket connection which is the equivalent of HTTPS and the communications are usually done over TCP port number 80/443. 443 is used in the case of secured connections.

Sample URLs :

  • ws://{host}:{port}/{path}
  • wss://{host}:{port}/{path}

A simple client handshake request:

GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXAqZSBub25jZQ==
Sec-WebSocket-Version: 13

A server handshake response:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Once the handshake succeeds, WebSocket starts to listen to the following events on it.

  • open – It will have triggered when establishing the connection
  • message – It will have triggered when receiving data
  • error – It will have triggered when getting any error during the communication
  • close – It will have triggered when closing the connection

Data transfer

Once the connection opens, the client and server are able to send messages to each other until the connection is closed by anyone. This process is known as WebSocket data transfer. Here, the following frames can be sent from either side to transfer the data:

  • text frames: Contains text data that parties send to each other.
  • binary data frame: Contains binary data that parties send to each other.
  • ping/pong frames: Use to check the connection, sent from the server, the client responds to these automatically.
  • Connection close frame: Use to close the connection.

Connection close

Normally, when a party wants to close the connection (both browser and server have equal rights), they send a “connection close frame” with a numeric code and a textual reason.

  • code: A special WebSocket closing code.
  • reason: A string that describes the reason for closing.

Most common code values:

  • 1000 – Normal closure; the connection successfully completed whatever purpose for which it was created.
  • 1006 – Used to indicate that a connection was closed abnormally (that is, with no close frame being sent) when a status code is expected.

Although WebSocket is faster and high performance than HTTP, it can’t be used in all the places. It is good to use both according to the situation.

eg :

  • Fast Reaction Time: When a client needs to react quickly to a change, a WebSocket may be best.
  • Retrieve Resource: When a client wants the current state of a resource and does not want or require ongoing updates, an HTTP may be best.

References

--

--