Pushing data to user browser from server Pushing data to user browser from server json json

Pushing data to user browser from server


As @som suggested, you can simply use requests with an interval between them, you don't need to use sockets.

But the thing is, you are trying to receive data from the API and pass it right to the browser, all at once. It's best if you separate those two steps.

In the script that receives the data from Facebook, store that data in a database or somewhere else:

if($_SERVER['REQUEST_METHOD'] == "POST"){    $updates = json_decode(file_get_contents("php://input"), true);     insertDataToDatabase($updates); // you'll have to implement this.}

Then setup a monitoring page:

monitor.php

<script>lastId = 0;$(document).ready(function() {    getNewDataAtInterval();});function getNewDataAtInterval() {    $.ajax({        dataType: "json",        url: "getData.php",        data: {lastId: lastId}    }).done(function(data) {        for(i=0; i<data.messages.length; i++) {            $("#messages").append("<p>" + data.messages[i]['id'] + ": " + data.messages[i]['message'] + "</p>");            if (data.messages[i]['id'] > lastId) lastId = data.messages[i]['id'];        }        setTimeout(getNewDataAtInterval, 10000);    }).fail(function( jqXHR, textStatus ) {        alert( "Request failed: " + jqXHR.responseText );    });}</script><div id="messages"></div>

At last, create a server-side script to return a JSON with the new messages loaded from the database.

getData.php

$lastId = $_GET['lastId'];$newMessages = getUpdatesFromDatabase($lastId);exit(json_encode(array("messages"=>$newMessages)));function getUpdatesFromDatabase($lastId) {    // I'm using this array just as an example, so you can see it working.    $myData = array(        array("id"=>1,"message"=>"Hi"),        array("id"=>2,"message"=>"Hello"),        array("id"=>3,"message"=>"How are you?"),        array("id"=>4,"message"=>"I'm fine, thanks")    );    $newMessages = array();    foreach($myData as $item) {        if ($item["id"] > $lastId) {            $newMessages[] = $item;            $newLastId = $item["id"];        }    }    return $newMessages;}


Use of Comet or Prototype will be best practice here. Ajax will increase server load. It will polling the server frequently. Here is some necessary information about using comet.

Here is the example of how to implement comet with php to send real-time data.


With conventional HTTP protocol, web browsers always request your server for response. Once the response is sent, server closes the connection.

True persistent connection technology such as WebSocket is one of the exceptions where a browser makes specific kind of connection to the server and, having the understanding of the intention, the server would maintain the connection open. This way as soon as there's data to be "pushed" to the browser, the connection is always ready. Using this approach, there's no need to save the data temporarily since you'd just "pass it along".

Polling techniques (including long-polling, where the server keeps sending "heartbeat" to the client as if a non-meaningful response is slowly trickling) can be used as work-around, but there's always some interval of time where connection is no longer open, until the next cycle happens. When connection is absent, your only option is to save the data temporarily so when your browser comes back you can push the pending data. In case you're thinking about storing it in a temporary variable, take into account that with PHP script once the execution is completed all data allocated in memory associated in that scope is garbage collected.