Push

Push is a mechanism where the server sends data or updates to the client without the client requesting  it. An example can be YouTube notifications where YouTube notifies you when a user has uploaded a video (if you have that option turned on). Other examples can include livestreams, chat applications, or anything involving real time updates like receiving a doordash notification when the food has arrived!

Some approaches that are used to implement push include: Short polling, Long polling, WebSockets, and SSE

Short Polling & Long Polling

Short polling and long polling are both techniques that are used in web development to retrieve real time updates. Polling involves making requests in fixed intervals, and Long Polling involves keeping the connection open until there is an update, or an error occurs.

Short Polling

In Short Polling, the client makes several requests to the server at fixed intervals weather there was an update or not, and the server responds to each request with the latest data or status. Short polling is asynchronous, in the bottom example, when the requests are being made to the server to see if there are any new updates, its obtaining data in the background so that means you can still scroll down, like posts, and do other stuff. 

Pros: Server can remain stateless, Good for long running requests(Requests that take a long time to execute ie. Uploading a video to YouTube)

Cons: Can lead to network traffic

Example: You load up twitter, and the client side will initiate periodic requests to the server to see if there are any updates, such as tweets, replies, or if someone liked your tweet, etc. below is an example of what twitter may look like using short polling in HTMX.

<div id="tweets-container" hx-get="{% url 'fetch-tweets' %}" hx-trigger="every 5s">
       <!-- Tweets will be dynamically added here -->
</div>

Long Polling

In Long Polling the client makes a request to the server, and if the server has the data then it will respond right away, but if it doesn't, then the server will keep a connnection between the client and itself, so that when it does receive an update, it can immediately send it back to the client. In short,the server wont respond until it has data or an update

Long Polling may be used in chat applications, online muiltiplayer, or notifications

Pros: Allows for real time updates(pushes updates to clients once they become available), also reduced Latency

Cons: Increased server load

WebSockets

WebSocket is a communication protocol that allows bidirectional communication between the server and the client, alowing both to send messages and receive messages in real time over a single TCP connection.

WebSockets begin as a HTTP protocol, The client initiates the WebSocket connection by sending a handshake request to the server. This request is an HTTP GET request. The protol is then upgraded to the WebSocket protocol using the ( HTTP Upgrade header) Once the connection is established between the server and the client, it is persistant, meaning that you dont have to keep establishing new connections for each interaction like HTTP connections.

Uses: Multiplayer games, messaging

Pros: Real time communication, low latency, no polling, HTTP compatible, firewall friendly

Cons: implementing can be more complex than normal HTTP requests.

Server Sent Events (SSE)

Server Sent Events (SSE) is a server push  technology that enables servers to push real time updates to the client. SSE are built on top of HTTP. First the client sends an HTTP request to the server, the server receives this request, keeps the connection opened and sends back responses as text/event-stream responses. One thing to note is that the connection remains open indefinitely, and if the connection is interrupted, the user can come back, the connection will be reestablished, and the updates are resumed.

Pros: since it built on top of HTTP it is friendly with firewall, reverse proxy, and load balancer.

Cons: 1) Clients must be online.  2) HTTP 1.1 problem where they only allow 6 connections, and lets say you have 6 server sent request events. The rest of the connections will be busy because the sse connection remains opened, and so you wont be able to even do a simple get request because the connections will be blocked. HTTP2 fixes this problem