Understanding WebSocket Handshake: Seamless Two-Way Communication for Web Applications

Goal:

The goal of WebSocket technology is to enable browser-based applications to establish two-way communication with servers without the need for multiple HTTP connections. This approach facilitates seamless interaction between clients and servers, enhancing the efficiency and responsiveness of web applications.

Background:

• Traditional bidirectional involves abusing HTTP calls.

• By polling the server for updates and then send for upstream using another HTTP Call.

Issue with this approach:

• Multiple TCP connection per client for sending and receiving messages.

• High overhead.

• Browser/Client need to maintain mapping for outgoing and incoming connections.

Solutions:

• A simpler solution would be to use a single TCP connection for traffic in both directions.

• This provides an alternative to HTTP polling for two-way communication from a web page to a remote server.

• It is designed to work over HTTP ports 80 and 443 as well as to support HTTP proxies and intermediaries.

Protocol :

• The protocol has two parts: a handshake and the data transfer.

• Once the client and server have both sent their handshakes, and if the handshake was successful, then the data transfer part starts.

• This is a two-way communication channel where each side can, independently from the other, send data at will.

Opening Handshake:

Client Handshake:

        GET /chat HTTP/1.1
        Host: server.sharooque.com
        Upgrade: websocket
        Connection: Upgrade
        Sec-WebSocket-Key: fieeLSNlcSZdaWQlp77pOU==
        Origin: http://sharooque.com
        Sec-WebSocket-Protocol: score, goal
        Sec-WebSocket-Version: 13

• ‘Request-URI’ of the GET is used to identify endpoint of WebSocket connection.

• Host Client and Server identifies that they agree about the host.

• Sec-WebSocket-Protocol: List of subprotocol that client supports.

• Upgrade and Connection specific to WebSocket identification.

Server Handshake:

        HTTP/1.1 101 Switching Protocols
        Upgrade: websocket
        Connection: Upgrade
        Sec-WebSocket-Accept: d2oLSWRmQzaF1bERxxvAFnK+pPb=
        Sec-WebSocket-Protocol: goal

• Any other status code than 101 indicated WebSocket handshake failed.

• So the semantics of HTTP still valid.

• Header Connection and Upgrade completes the upgrade to WebSocket from regular HTTP.

Opening Handshake:

• Handshake is interpreted by HTTP server as an Upgrade request.

• Opening a handshake is compatible with HTTP-Server.

• Means single port (80) can be used by HTTP Client and WebSocket Client to talk to the server.

• Client Handshake is with Upgrade and Connection header in request.

What happens after client and server completes the handshake:

• The server has to prove to the client that it received the client's WebSocket handshake.

• This is to ensure that server doesn’t accept connections that are not WebSocket connections.

• Sec-WebSocket-Accept key in server handshake is made by hashing concatenated values of GUID(generated at server) and Sec-WebSocket-Key (received from client handshake).

• Now the client will check for Sec-WebSocket-Accept, status code 101, When Client finds that these values doesn’t matches with key or status code connection won’t be established.

Relationship to TCP and HTTP

• WebSocket Protocol is an independent TCP-based protocol.

• Only relation to HTTP is that it’s handshake is interpreted by HTTP server as an Upgrade request.

Security Model:

• WebSocket Protocol uses the origin model.

• This is used by web browsers to restrict which web pages can contact a WebSocket server when the WebSocket Protocol is used from a web page

Conclusion:

In conclusion, WebSocket technology revolutionizes the way web applications communicate by providing a seamless, efficient, and responsive two-way communication channel between clients and servers. By utilizing a single TCP connection, WebSockets eliminate the need for multiple HTTP connections, reducing overhead and simplifying the communication process. The handshake mechanism ensures secure and reliable connections, while compatibility with existing HTTP infrastructure allows for easy integration. As a result, WebSocket enhance the performance and user experience of modern web applications, making them an essential tool for developers seeking to build interactive and real-time web solutions.