Part 1 – How server sends notification to client? Polling and Server Sent Events

April 21, 2019 Saurabh Oza websocket, Spring Framework 0

How server sends the real time notifications to client?

Have you ever imagined how the facebook / twitter sends the real time notifications to our mobile application? No? then this tutorial will help you to understand the different ways to

Building a real-time web application is a bit challenging one, where we need to consider how we are going to send our data from the server to the client. Technologies that enable this “proactively” have been around for quite some time and are limited to two general approaches: client pull or server push.

A few ways to implement these:
Polling – Client pull
Server-Sent Events – Server push
WebSockets – Server push

Client pull 
client asking server for updates at certain regular intervals

Server push 
server is proactively pushing updates to the client (reverse of client pull)

Lets explore these types one by one.

Polling

Polling is a technique by which the client asking the server for new data regularly. We can do polling in two ways: Short Polling and Long Polling. In simple terms, Short polling is an AJAX-based timer that calls at fixed delays whereas Long polling is based on Comet (i.e server will send data to the client when the server event happens with no delay). Both have pros and cons and suited based on the use case. For in-depth details, read the answers given by the StackOverflow community.

Client example –

subscribe: (callback) => {
const pollUserEvents = () => {
 $.ajax({
  method: 'GET',
  url: 'http://localhost:8080/githubEvents', 
  success: (data) => {
   callback(data) // process the data
  },
  complete: () => {
   pollUserEvents();
  },
  timeout: 30000
  })
 }
pollUserEvents()
}

Server Sent Events

SSE is a mechanism that allows the server to asynchronously push the data to the client once the client-server connection is established. The server can then decide to send data whenever a new “chunk” of data is available. It can be considered as a one-way publish-subscribe model.

It also offers a standard JavaScript client API named EventSource implemented in most modern browsers as part of the HTML5 standard by W3C. Polyfills are available for browsers that do not support EventSource API.

Client side

const evtSource = new EventSource('/events');

evtSource.addEventListener('event', function(evt) {
 const data = JSON.parse(evt.data);
 // Use data here
},false);

Disadvantages of Polling and Server Sent Event

1. They can not detect the dropped clients.
2. They can handle at max 6 parallel connections per server.
3. They do not support re connection mechanism
4. They don’t provide a mechanism to detect dropped clients until a message is sent.

Source Code
Download the source code of WebSocket tutorial from below git repository :
websocket-with-spring-boot-and-angular-6

Let’s go to our next tutorial where we will discuss below points :
Part 2- What is WebSocket? Polling vs Server Sent Events vs WebSocket

In this tutorial, we will understand below topics –

    – What is WebSocket?
    – Why WebSocket?

    – Polling vs Server Sent Events vs WebSocket
         1. Message Flow
         2. Communication Techniques
         3. Communication Type
         4. Protocol
         5. Usage

https://www.onlyfullstack.com/polling-vs-server-sent-events-vs-websocket/

WebSocket Tutorial