CODEWITHSUNDEEP
javascriptphpnode.jswebsocketserver-sent-events
Salim Shamim
Salim Shamim

Reputation: 686

Pushing data from one client to another using Php

I am making my college project on Air Quality Monitoring System, in that data (say some integer value) has to be taken from sensing unit to a webpage.

What I want

Is that the script called upon by this url http://localhost/AQProject/recordupdate.php?val=2 updates a web page displaying the content. Now I know I can save that data in database and run ajax based query every two seconds to check for update, but I want that update to be pushed by server.

What have I done:

I have tried Server sent events. Here's what i tried 

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

if($_SERVER["REQUEST_METHOD"]=="GET")
{
    if(empty($_GET["val"])) die ("Empty Value from source");
    else
    {
        $v = $_GET['val'];
        echo "data: The Pollution stub value is {$v}".PHP_EOL;
        ob_flush();
        flush();
    }
}?>

and html has script 

    <script>
if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("recordupdate.php");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML = event.data + 
        "<br>";
    };
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

Now, I have figured out this much that (correct me If i am wrong) it won't work because when another client (sensing unit) calls for recordupdate.php its a different instance of that script than that called by webpage client.

Is there any possible way of doing this using server sent events? Or I absolutely need to dig into websockets, node.js etc. Thanks in advance

Upvotes: 2

Views: 1349

Answers (2)

Darren Cook
Darren Cook

Reputation: 28913

What you want to do is not quite as easy as you hoped, but this is still a job for which SSE is suited. You don't need to use sockets, and don't need to use ajax polling.

But you do need some database store, on the server, that can be shared by PHP scripts. As installing a LAMP stack is so easy, I'd recommend using MySQL, even though it might be overkill for what you need. But your database could be as simple as a text file.

(To keep the below samples as small as possible, I've assumed your DB will be /tmp/val.txt, and I've not done any file locking, or checking for bad data. Just be aware that you need to do some work before putting this in production in an untrusted environment. I'd recommend pre-creating /tmp/val.txt to avoid any noise about files not existing.)

Your recordupdate.php has the job to record the value it is given:

<?php
if($_SERVER["REQUEST_METHOD"]=="GET")
{
   if(empty($_GET["val"])) die ("Empty Value from source");
   else file_put_contents("/tmp/val.txt", $_GET['val']);
}

You then have sse.php, which web clients connect to:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$prev = '';
while(1){
  $v = file_get_contents("/tmp/val.txt");
  if($v != $prev){
    echo "data: The Pollution stub value is {$v}\n\n";
    $prev = $v;
    }
  usleep(100000);  //0.1s
  }

This script is checking the text file for changes 10 times a second. As soon as it spots one it sends it to the client. (Mean latency is 0.05s plus network overhead.) Sleep for less time if you need lower latency.

The only change to your front-end HTML is to call "sse.php" instead:

<script>
if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("sse.php");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML = event.data + 
        "<br>";
    };
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

Upvotes: 1

Максим Степанов
Максим Степанов

Reputation: 191

HTTP is one way protocol. Request from client to server only. Yes, absolutely need to dig into websockets, node.js etc.

Upvotes: 1

Related Questions