php push code in 15 lines

 

In this post, I show you how to make push with php from http server. With push, it’s the server side that send data, that start data connection to the client side.
This example is using php code on server, and javascript, ajax with jquery on client.

 

Before to begin

– basic knowledge in php;
– a configured http server with php;
– a navigator;
– the javascript library jquery

 

Why push ?

With http protocol connection, the client side start the connection server side. Then server answer to client at once.

To get real time information from server, client must request sever at interval time whithout knowing if data are changed.

In this case, that’s many useless requests. It’s too often because information have not necessarily changed. Bandwith is over-consumed. Not really good.

To avoid over-consumption of bandwith, push mode is a solution. Once useful bandwith is consumed. Server send data only when changing.

 

Long polling

Long polling is one of many technical solutions (like comet, pushlet…) to do push. With Http push, server send data when it’s useful.

This involves to connect to http server. http server don’t reply at once, it’s reply when it will be necessary to send data.

Between client connection and server reply, the connection is available with an infinite loop.

When server send data, the connection is out and client needs to renew connection with http server.

 

The example

Two parts for this example:
– client side with javascript, ajax and jquery;
– server side with php.

 

Server side php script

This script is simple, because it sends current time only when time minute changes.

It runs an infinite loop that stops when time minute changes.

Before stop the loop, the script returns a data string including current time.

<?php
$minute = date("i");

while(1) {
  // return data only if minute changes
  // else loop
  if(isMinuteChanged($minute)) {
    echo json_encode(date("G").":".date("i"));
    break;
  }

  // Pause 3s
  sleep(3);
}

function isMinuteChanged(&$savedMinute) {
  $currentMinute = date("i");
  if ( $savedMinute != $currentMinute ) {
    $savedMinute = $currentMinute;
    return true;
  }
  return false;
}
?>

 

Client side javascript script

We display time inside a new html page. Time (hour) is sent by server script on time change.

This script call a connect() function on page loading:

$(document).ready( function() {
  $("#textDiv").empty(); // On vide le div textDiv
  $("#textDiv").append("HEURE"); // On colle la chaine "HEURE" dans le div textDiv
  connect(); // On appelle la fonction Connect
});

The connect() function creates a http server connection and plus particulièrement le script longPolling.php chargé de renvoyer l’heure lorsqu’elle change.

When php script send a result (in this case, the time), client side script call callComplete() function.

function connect() {
  // call callComplete function
  $.post('longPolling.php', {}, callComplete, 'json');
};

callComplete() function updates div tag content with time from server side php script, and initialize a new connection until the next hour sending.

function callComplete(response) {
  // Empty div content
  $("#textDiv").empty();
  // Add to div content with response string
  $("#textDiv").append(response);
  // New connection to server
  connect();
};

Client side source code

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>;
<script type="text/javascript">
  function callComplete(response) {
    $("#textDiv").empty();
    $("#textDiv").append(response);
    connect();
  };

  function connect() {
    $.post('longPolling.php', {}, callComplete, 'json');
  };

  $(document).ready( function() {
    $("#textDiv").empty();
    $("#textDiv").append("HEURE");
    connect();
  });
</script>
</head>
<body>
LONG POLLING TEST
<div id="textDiv" style="width:300; height:180; overflow:auto; border:solid 1px black;">
</div>
</body>
</html>

 

Conclusion

Make http push is easy. So it is not the only method to make.

 

Posté dans phpTaggé ajax, ape, comet, cometd, developpement java, javascript, jquery, long polling, php, push  |  Laisser un commentaire

Répondre

*