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

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

– 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.

<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)

– 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.

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: