Storing Javascript value into PHP

Short note!
I'm programming a web app for a health clinic and I just had a problem to give a notification sound for the doctor if new patient registered.

I use SSE to update the list of the queuing patients. The number of the queuing patients will be reduced if one patient is served and added if a new patient registered. The notification sound should be ringed once when a new patient registered.

The question is, where should I put the update function since I save the header, the side menu and the body (content) separately.

If I put the update function in the body, the problem is I have to put the update function in every page. Well it is actually not a problem, it is just funny to put the same function in every page.

So I decide to put the function in the header, since every page uses the same header. The problem is wherever I browse through the web app, the notification sound just may only be ringed once!!!! That means, I have to store the current number of the queuing patients as a session variable. That is the solution, but the problem is how I can do that since the Javascript updating the number..???!!!!

For the record, Javascript is client side and php is server side. So it is imposible to save Javascript value into PHP, if I do it via Javascript. That is the second clue. I have to pass the Javascript value to PHP somehow and let the PHP stores the value to a session variable.

So this is how I do that:

1. Storing: Use AJAX to pass the Javascript value to PHP
2. Storing: Since I am using MVC, I make a function in Controller just for storing the value to a session variable.
3. Fetching: Make a Javascript function to fetch the value of the session variable and call it on loading windows. Storing PHP value into Javascript variable should not be a problem. 
4. Fetching: Put the AJAX function inside SSE and call it if the number of queuing patient is added.

HTML5 Server Sent Event in Codeigniter

There are many sources describing about SSE in HTML5 and also with the code that can be downloaded. One source that I can recommend to read is this. W3school also describes SSE in a short, simple and clear explanation.

But, there are not many websites that gives tutorial using SSE in Codeigniter. I'm working on a project using Codeigniter that requires SSE to display a dynamic data. It was quite difficult for me at the beginning to implement SSE in MVC-way, since all the codes that I got from some tutorials are not programmed in MVC-way. 

Maybe it is not the best way to implement SSE in Codeigniter, but at least it works. 

At the client side I have a javascript code shown below that allows client to "subscribe" a stream of data from the server. I send JSON data from server.

var source = new EventSource("❬?php echo site_url('c_sse/loaddata');?❭");
    
  source.addEventListener("message", function(e) {
   document.getElementById("status").innerHTML = "MESSAGE";showdata(e);
   }, false);
   
  source.addEventListener("open", function(e) {
   document.getElementById("status").innerHTML = "OPENED";
   }, false);

  source.addEventListener("error", function(e) {
   document.getElementById("status").innerHTML = e.readyState;
   if (e.readyState == EventSource.CLOSED) {
    document.getElementById("status").innerHTML = "CLOSED";
     }
   }, false);
 } else {
  document.getElementById("notSupported").innerHTML = "SSE not Supported";
 }
}
  
function showdata(Jdat)
{
 var data = JSON.parse(Jdat);
   
 document.getElementById("result").innerHTML = data.name;
}
 

The MVC style code is already seen in there. Check the EventSource above, that is the way I call the function "loaddata" inside controller c_sse.php.

At the server side, I started to code from the controller. The function that is responsible for sending the data (for example) called "loaddata". The most important thing of SSE in server side are the first three line with "header" in the code. Those should be placed in this function and they will cause Error if I put those in the Viewer. So, here is how the function "loaddata" looks like.

function loaddata()
{
 header("Content-Type: text/event-stream");
 header("Cache-Control: no-cache");
 header("Connection: keep-alive");
  
 $this-❭load-❭model('m_sse');
 while(true)
 {
  $data['mydata']=$this-❭m_sse-❭compute_dashboard_data();
  $this-❭load-❭view('sse_view_fast',$data);
  sleep(1);
 }
}

m_sse is the model for computing the data. In my case the return's value of the function 'compute_dashboard_data( )' is JSON data.

The one who is responsible to flush the data to Client is the viewer. Wrongly coded in the viewer can make the performance of SSE much slower. Firstly, I'll show the code resulting slow SSE. Oh ya, I forgot to mention the syntax. The real data should be put behind the "data:".

the source code for sse_view_slow.php:

print "data:".$mydata;
ob_flush();
flush();

If you implement that code, you'll have to wait couple seconds or maybe even couple minutes until the data shown.

Better use this code:

sse_view_fast.php

print "data:".$mydata.PHP_EOL;

print PHP_EOL;

ob_end_flush();
flush();

Actually, that is it for the programming. That is how I implement SSE in Codeigniter.