在后台运行PHP脚本时未加载HTML

Question

I am currently creating a stock market simulation and am working on the moment that the user logs into the simulation. I have a PHP script that will generate a certain price for a company four times and update it into my MySQL database while running. I currently have the following code:

PHP:

if (isset($_SESSION['userId']))
{
  $isPlaying = 0;
  while ($isPlaying <= 3)
  {
    $priceTemp = (rand(3300, 3700) / 100);
    $sql = "UPDATE pricestemp SET price = $priceTemp WHERE companyName = 'Bawden';";
    mysqli_query($conn, $sql);
    sleep(1);
    $isPlaying++;
  }
  echo '<h1>Welcome to the simulation</h1>';
}

I am aiming for these updates to happen in the background once the user has logged into the simulation. When refreshing my database every second, the updated prices are shown which is one of my objectives. However, what I would like it to do is still load the HTML onto the page (to say "Welcome to the simulation") while updating the database with every second with an updated price.

So far, when I log in, I have to wait 4 seconds before the HTML will load. In the future, I hope to have it consisently updating until a certain condition is met but when I have set an infinite loop earlier the HTML never loaded.

What do I have to do to allow the HTML to load once logged in and have the prices being generated and updated in the MySQL database in the background with no delay in either of these tasks happening?

Answer 1

You have a fundamental misunderstanding of how web-based requests work.

What you need to understand is that PHP is a server-side language. PHP generates any combination of HTML, CSS, JavaScript, JSON, or any other forms of data you want and sends it to your web browser when it's finished. While it's doing that, it can also manage data within a database or perform any other number of actions, but it will never send what the web browser can make use of until it finishes setting everything up. So if you're within an infinite loop, it will never finish and therefore nothing will be sent back to the web browser.

To remedy this, you need to use something called " asynchronous JavaScript ", more commonly referred to as " ajax ". Specifically, you first send some initial HTML to the web browser in one request and let the request end immediately. This allows the user to see something without waiting around for an indefinite period of time. Then, on the web browser end, you can use JavaScript to automatically send a second request to the server. During this second request to the server, you can perform your data processing and send back some data when you're finished to display to the user.

If you want to periodically update what you show the user, then you would repeat that second request to refresh what is shown on the user's webpage.

Any time you see some kind of "real-time" updating on a website, it's not coming from a single, persistently open connection to the web server--it's actually a series of repeated, broken up requests that periodically refresh what you see.

---

Broken down, standard web request workflows look something like this:

1. Web browser asks the web server for the webpage. Web browser waits for a reply.
2. Web server generates the webpage and sends the webpage to the web browser. Web server is done.
3. Web browser receives the webpage and shows it to the user. Web browser stops waiting for a reply.
4. Web browser runs any JavaScript it needs to run and requests data from the web server. Web browsers waits for a reply.
5. Web server processes the request and sends the requested data back to the web browser. Web server is done.
6. Web browser receives the requested data and updates the HTML on the webpage so the user can see it. Web browser stops waiting for a reply.

As you can see, each series of requests is 1) initiated by the web browser, 2) processed by the web server, and 3) any replies from the web server are then handled by the web browser after the web server is finished up. So each and every request goes browser -> server -> browser . If we add steps 7. , 8. , and 9. to the above, we will see them repeat the exact same pattern.

If you want to avoid adding JavaScript into the mix, preferring to refresh the entire page every time, then keep your data processing short. Optimize your database calls, fix your infrastructure (make sure your server and database have a LAN connection, that your hardware is good enough, etc.), make your code more efficient... do whatever you need to do to keep the processing time to a minimum.

---

This is all incredibly simplified and not 100% accurate, but should hopefully help you with your specific problem. The short version of all of this is: you can't show your HTML and process your data at the same time the way you're doing things now. You need to fundamentally change your workflow.

Answer 2

You have to do this in 2 network calls. The first network call should fetch the html. Then you have to use Javascript to fire another call to update your data. Once that api call returns it will update the html.

Answer 3

The scheduling model to manage the frequency of a background operation based on the frequency of requests at the front end is a very difficult problem. It's also a problem you don't need to solve. The data doesn't need to be changed when nobody is looking at it. You just need to store when the data was last looked at and apply greater deltas to older data.