Client Server Communication : HTTP, Polling, SSE, Websockets and Comets

A server is anything that provides service while a client is the one that receives the service. Based on a number of approaches and techniques, client-server communication can be classified into variety of classifications.

In this article, we are going to get in detail about the following techniques of Client-Server Communication.

– Simple HTTP Requests

– Ajax Polling

– Server Sent Events

– Websocket

– Comet

 

Simple HTTP Request

Simple HTTP Request
Fig. Simple HTTP Request

Client sends HTTP Request to server and server responds to the request.

<h1>Simple HTTP Request</h1>
<h2>
The server time is:
<?php echo date('Y-m-d H:i:s');?>
</h2>

 

Ajax Polling

Simple Ajax Polling
Fig. Simple Ajax Polling

 

– Client Sends an AJAX request in regular interval of time to the server.

– Polling can be short or long polling.

РIn case of long polling, the server does not immediately respond with the requested information but waits until there is new information available.

 

Ajax Long Polling
Fig. Ajax Long Polling
<h1>Simple Ajax Polling</h1>
<h2>
  The server time is:
  <span id="server-time"></span>
</h2>
//include jQuery here


  //send ajax request to server every 5 seconds
  setInterval(function(){
  poling();
},5000);

  function polling(){
    $.ajax({
      url:'polling.php',
      type:'get',
      success:function(response){
        if(response){
          $("#server-time").html(response);
        }
      }
    });

 

polling.php

<?php
echo date('Y-m-d H:i:s');

 

HTML5 Server Sent Events (SSE)

Server Sent Events (SSE)
Fig. HTML5 Server Sent Events (SSE)

– Client does not need to request the server

– server automatically sends response to the client when there is new information available.

<h1>HTML5 Server Sent Events (SSE)</h1>
<h2>
  The server time is:
  <span id="server-time"></span>
</h2>

  var source  = new EventSource('sse.php');
  source.onmessage = function(event){
    document.getElementById('server-time').innerHTML = event.data;
  }

sse.php

 

<?php 
  header('Content-Type: text/event-stream');
  header('Cache-Control: no-cache');
  
  $time= date('Y-m-d H:i:s');
  echo "data:($time)\n\n";
  flush();

 

HTML5 Websockets

–¬†The server and the client can now send each other messages when new data (on either side) is available.

HTML5 Web Sockets
Fig. HTML5 Web Sockets

 

Comet

Comet is a collection of techniques prior to HTML5 which use streaming and long-polling to achieve real time applications.

 

You can follow the following video for detailed implementation of above explained techniques:

 

Leave a Reply