What are Websockets? 🔌

One sentence explanation is that they implement push-based communication in web applications.

What was push pattern I've already explained before in this article.

To get some context let me explain again: push is a communication design pattern where data is actively sent ("pushed") to an initiator (client) rather than having the initiator (client) poll or check for data periodically. You start by establishing connection and starting that moment initiator doesn't have to do any other interaction with the receiver (server).

Step 1: Establishing a WebSocket Connection

• Client Request - The client (typically a web browser) sends a special HTTP request to the server asking to upgrade the connection to a WebSocket. This request includes a header - Upgrade - websocket, indicating that the client wishes to establish a WebSocket connection.
• Server Response - If the server supports WebSockets and accepts the connection upgrade request, it responds with a 101 Switching Protocols status code, along with an Upgrade: websocket header in its response. This handshake process switches the protocol from HTTP to WebSocket.

Step 2: Maintaining the Connection

• Persistent Connection - After the handshake, the client and server have an open WebSocket connection. Unlike traditional HTTP requests that close the connection after a response is sent, this connection remains open, allowing for continuous two-way communication.
• Heartbeats - To maintain the connection and ensure it's active, either the client or server may send "ping" messages at regular intervals, to which the other party responds with "pong" messages. This helps in detecting and closing broken connections.

Step 3: Pushing Data from Server to Client

• Server Initiated - Whenever there's new data to send, the server can push this data through the open WebSocket connection to the client. This can happen anytime, without the client having to request it, allowing for real-time data updates on the client side.
• Handling on the Client - The client listens for messages from the server. When data is received, it's typically processed and used to update the web page dynamically, without needing to refresh the page. This is done through JavaScript event listeners that react to incoming messages.

Step 4: Bidirectional Communication (Optional)

• Client to Server - Similarly, the client can send data to the server at any time through the same WebSocket connection. This is used in interactive applications, like online games or chat applications, where the client's actions need to be communicated to the server in real-time.
• Processing on the Server - The server listens for messages from the client, processes them as needed (which might involve updating server-side state, database interactions, or broadcasting to other connected clients), and can send responses back to the initiating client or push updates to other clients.

Step 5: Closing the Connection

• Initiation - Either the client or server can initiate the closing of the WebSocket connection. This might be done when the user navigates away from the page, the application is closed, or if the server no longer needs to communicate.
• Close Handshake - A close frame is sent from the initiating party to the other, which responds with its own close frame. Once both sides have exchanged close frames, the TCP connection is terminated.

Now lets double check push properties and compare it with what we have learned about websockets :)

1. Server can initiate data transmission? YES
2. Bi-directional Communication? YES
3. Client passively receives data? YES
4. Limited client control over incoming data flow? YES

Yay!

Hope that helped someone, cheers!