Polling vs Streaming, Which one is better? — What we have used in MakeMyTrip Flights.

Polling and streaming are the ways of communication between server and client.

Streaming:-

It is described as the process in which a client sends a request to the server for receiving data in chunks. First, a connection is established using sockets, and then the server responds continuously with several chunks or events. When the server sends the final chunk or event, the connection will be ceased.

A socket is a file that lives on your computer that can be read or written to by another computer.

Polling:-

It is defined as the process in which a request is sent from a client to the server multiple times based on some criteria and the server responds with some response every time.

Scenarios:-

1. In some use case, the client has to show outside temperature which is stored in servers. Since the temperature changes frequently the client needs to poll for temperature, say every 30 seconds. Since the client does not need instantaneous temperature updates, we can use polling.
2. There are some chatting apps where we need instantaneous/live feeling while chatting with someone, so the server must deliver instant message updates. By polling, If a client polls for messages every 30 seconds, that won’t provide an instantaneous experience. This is because users will receive some messages and then not receive anything for the next 30 seconds. If you want to try fixing that by polling, by reducing polling time in between requests, so instead of 30 seconds, if the client polls for every 0.1 seconds then it will look real-time. But this comes with the trade-off of having lots of loads on the server like 10 requests per second by one client. If you have thousands or millions of clients there will be a lot of unnecessary load on the server and that’s where streaming comes into the picture. By streaming, as soon as the connection is established, your server will send messages continuously through this connection to your client, resulting in an instant update of messages. So in this case, streaming is better than polling.

USE CASE in MakeMyTrip Flights:-

While booking a flight on MakeMyTrip, the user will be taken to the review page.

MAKEMYTRIP FLIGHTS REVIEW PAGE

UI clients are showing details of the flight, cancellation refund policy, extra baggage, insurance, traveller details, seats, meals, fare breakup, promo codes and several other add-ons on that single page. The client is calling an API called review-traveller for rendering all the information on the UI. If we use a normal GET API call, the response time of the server is comparatively high. The client has to wait for a long time for the response. Overall, the loading time is high and the user experience will be poor as the user had to wait a lot of time after landing on the review page. So the client has to call the server in a better way. So we have to use either polling or streaming.

Polling Approach:- If the client poll every 30 seconds there will be a lot of unnecessary load on the server. The client doesn’t have to poll continuously as data won’t change frequently and also server doesn’t have any information to send to the client after some time. So the client has to poll the server in a better way. So first, a request is sent from the client to the server and the server acknowledges it with a requested response. Based on a node(eg:- token: 12345) from the server response, the client will poll the server recursively until that node(token: null) value is null from the response. So by polling latency of the server is better than a normal GET API call but still, the user experience is not up to the mark because the latency of the first API call is around 5–6 seconds.

Streaming Approach:- Server has implemented Streaming API in such a way that server will send the first chunk of data instantly(approximately around 500 milliseconds) and the next chunks of data in a few seconds. So the client can show data instantly to the user in a few milliseconds and can update the next chunks of data correspondingly.

By streaming, the overall loading time of the page decreased compared to polling. User experience has enhanced as the user can see meaningful data in a few milliseconds. The load on the server has been reduced compared to the polling technique. The latency of the streaming API is better than the polling API. So for our use case streaming is better than polling. So we have finalised to use the streaming technique for review-traveller API.

The client-side streaming API call can be implemented by using the default browser EventSource API. But it has some limitations like the client cannot send custom request headers and request body. In order to overcome these issues client has used the @microsoft/fetch-event-source npm package for making streaming API call.

Polling Implementation:-

polling.mov

Streaming Implementation:-

stream.mov

Normal fetch api call code example:-

fetch('http://someexample.com')
  .then((response) => response.json())
  .then((data) => console.log(data));

Implementing streaming API with @microsoft/fetch-event-source:-

npm install @microsoft/fetch-event-source

import { fetchEventSource } from '@microsoft/fetch-event-source';
await fetchEventSource('http://someexample.com', {
  method: 'GET', //'POST' for post method.
  headers: {
    accept: 'text/event-stream', 
    'Content-Type': 'application/json'
  },
  onopen (response) { 
    //This fn will be trigerred when the connection is established.
    if (response.ok && response.status !== 200) {
      //handle error case here.
      return;
    } else {
        //handle success case here.
        console.log("connection formed");
        return;
    }
  },
  onmessage (msg) {
    //when the connection if formed, this function will be triggered     
    //everytime when server sends response in chunks. 
    if (msg.event === "response" && msg.id) {
      //handle success response case.
      console.log("response, chunkID",response, id);
    } else if (msg.event === "error") {
      //handle error case.
      console.log("error", error);
    }
  },
  onerror (error) {
    //This fn will be trigerred when there is some error.
    if (error) {
      //handle error case.      
      console.log("error",error);  
      throw error; // rethrow to stop the operation
    }
  },
  onclose () { 
    //This fn will be triggered when server ceases the connection.
    console.log("connection closed");
  }
})

Conclusion:-

Streaming is not always better than polling. For our MakeMyTrip review page example, streaming is better than polling. Depending on our use case polling might be better than streaming. If you need instantaneous experience or data updates frequently then you can likely use streaming.
The polling / Streaming Strategy depends on our use case and also on the server.

Reference:-

https://github.com/Azure/fetch-event-source