Adam Biro

Software Developer

Blogger

Photographer

Full Stack Developer

Photo Enthusiast

Web Developer

Adam Biro
Adam Biro

Software Developer

Blogger

Photographer

Full Stack Developer

Photo Enthusiast

Web Developer

Blog Post

What is the WebSocket protocol and what is the handshake?

May 21, 2022 Internet, Technology
What is the WebSocket protocol and what is the handshake?

What is a WebSocket?

WebSocket is a protocol and a persistent connection between a client and server. It uses the handshake communication procedure to transport messages. 

In telecommunication, a handshake is an automated negotiating procedure, in order to establish rules for communication between the participants and to ensure the server is in sync with its clients. 

What is the context of the WebSocket?

HTTP is a strictly unidirectional protocol — any data sent from the server to the client must be first requested by the client.

However, WebSocket is two-way communication between the servers and the clients which mean both the parties communicate and exchange data at the same time. Communication is a true concurrency. So the optimization of performance results in more responsive and rich web applications. (eg: webchat)

WebSocket vs HTTP communication

As you can see in the diagram above, the client initiate connection over WebSocket or secure WebSocket (WSS), and then the server can send back messages to the client. Unlike with the HTTP protocol we do not need to do any pulling. Once the connection is established, the server can send as many requests as it likes.

The greatest benefit of using WebSocket instead of HTTP is the performance boost. Due to the fact that we do not need to establish a new connection. What is more, we do not need to introduce any sort of pulling mechanism.

What features does the WebSocket protocol have?

WebSockets do not use the http:// or https:// scheme (because they do not follow the HTTP protocol). Rather, WebSocket URIs use a new scheme ws: (or wss: for a secure WebSocket). The remainder of the URI is the same as an HTTP URI: a host, port, path, and any query parameters. 

WebSocket connections are established by upgrading an HTTP request/response pair. A client that supports WebSockets and wants to establish a connection will send an HTTP request that includes a few required headers:

  • Connection: Upgrade
  • Upgrade: WebSocket
  • Sec-WebSocket-Key: q4xkcO32u266gldTuKaSOw==
  • Sec-WebSocket-Version: 13

Together, these headers would result in an HTTP GET request from the client to a ws:// or wss:// URI like in the following example:

GET ws://example.com:8181/ HTTP/1.1
Host: localhost:8181
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: q4xkcO32u266gldTuKaSOw==

Once a client sends the initial request to open a WebSocket connection, it waits for the server’s reply. The reply must have an HTTP 101 Switching Protocols response code. The HTTP 101 Switching Protocols response indicates that the server is switching to the protocol that the client requested in its Upgrade request header. In addition, the server must include HTTP headers that validate the connection was successfully upgraded:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fA9dggdnMPU79lJgAE3W4TRnyDM=

Required header parameters in the response:

  • Connection: Upgrade
  • Upgrade: WebSocket
  • Sec-WebSocket-Accept

References:

Conclusion & Closing

In this post, I tried to detail what is WebSockets and what features they have. When we can use them in programming what are the benefits. If you want to know about VueJS and Websocket integration you could check this link here.

Taggs: