How to update HTML/JS client from PHP server without refresh intervals?

Question

I am building a simple client-side web page that can be updated from an admin page. I am using PHP for server-side manipulation of the client targeted page.

The setup feels like an overkill to me:

1. index.html has some basic html input elements. A button triggers an XML GET request for makeClientPage.php. The PHP script takes a variable generated from the HTML inputs and writes down a clientPage.html file.
2. In the generated client page, I have two javascript variables, called new_image, which is assigned to the variable from admin page and old_image, which has an arbitrary string value.
3. The generated variable is a directory name for a PNG image. There are over a thousand PNG images that the admin may choose from. This path is given to a javascript variable (new_image) between <script> tags in clientPage.html.
4. The image is not simply viewed in an <img> tag. It should be passed to Panolens.js, a panorama image viewer. A JS function updates Panolens.js with the new image.
5. Finally in the clientPage.html, I run a setInterval(function(){checkUpdate())}, 1000). You can find checkUpdate() below as well. It basically runs every second, comparing new_image to old_image, and if they are different, PanoLens API is called for update purposes, and old_image is assigned to new_image, preventing the same image to be updated every second.

The trick here is that, on clientPage.html file, the new_image variable is not read directly by javascript itself. I actually send a request to another PHP function, reading clientPage.html, extracting new_image variable and comparing it like that instead. WHY? Because once the client enters url/clientPage.html, their browser cannot follow a file change. Therefore a request must be send back to the server, asking for the actual value of variable that was updated by the admin's action.

So in the end, imagine the Admin on his computer and the client with his phone. The admin enters the input and hits the button, sending the desired image to the page client is viewing. The client will be 'wearing' their phone with headset, viewing the image as if they are in an Oculus device. So we do not have the option to simply click 'refresh'.

My question is about the setInterval(). When this application would be distributed to a hundred clients, our server will have to handle so many php requests. And no, primordial instincts and premature optimizations, etc. etc. guys, I am asking this question so I can learn, below is what I tried, I ask if it can be done differently. I hope it is not asking for an 'opinion'.

I am quite new in my programming career. And that is the first server side web development I am doing. I am super confused with how PHP must go back and forth to do something useful. Yesterday I learned how to make a XMLHttpRequest to PHP, in order to pass a variable from JS to PHP. I feel bright and dark at the same time.

I keep searching the internet, on how to trigger a javascript function from PHP, in order to bypass a control everysecond. Because what would make sense is that, once the admin hits generate image button, the client page should get a notification for that. But I cannot understand how it is done on differnet files.

I would appreciate if you can share your experiences on this topic.

Code:

Between script tags in clientPage.html:

...
new_image = '_name_%new_image%_name_';
old_image = 'old_image';
var setInterval_forUpdate = setInterval(function(){checkUpdate()}, 1000); // everysecond

function checkUpdate(){
  callPHPUpdate();
  if(newImageInfo != old_image){
    old_image = newImageInfo;
    updateImage();
  }
}
function updateImage(){
  ...
  // update PanoLens.js image
  ...
}
function callPHPUpdate(){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function(){ 
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
      res = xmlhttp.responseText;
      newImageInfo = res.split('_name_')[1];
    }
  }
  xmlhttp.open("GET","updateInfo.php",false);
  xmlhttp.send();
}

updateInfo.php that clientPage.html calls for itself.

<?php 
function getLineWithString($fileName, $str) {
    $lines = file($fileName);
    foreach ($lines as $lineNumber => $line) {
        if (strpos($line, $str) !== false) {
            return $line;
        }
    }
    return -1;
}


$new_line = getLineWithString('clientPage.html', 'new_image = '); // notice how I read the variable 


echo $new_line;
?>

Answer 1

You're looking for (1) Server-sent events, (2) WebSocket and (3) long polling. All three are actual ways to solve the very same issue of receiving information on client side without doing the same request again and again (called polling).

In your case, start with Server-sent events (SSE). It doesn't look like you'll need the additional features of WebSocket, and SSE are likely to have a wider support compared to long polling in terms of proxy servers and other infrastructure.

---

This being said, your primary concern is indicative of premature optimization. You're expected to know exactly how many requests your server will handle, not guess things (because no matter how experienced you are, you'll get it wrong anyway). And you do know this number by running load tests, which would show the threshold above which your servers start misbehaving.