HTML5 Game - Use EventSource to get result from php

Description

Use EventSource to get result from php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Server-Sent Events</title>

<style>
body {
  font-family: Verdana;
  font-size: 12px;
}

div {
  float: left;
}

#messageLog {
  width: 400px;
  height: 230px;
  border: darkgray 2px solid;
  border-radius: 5px;
  margin: 20px;
  padding: 10px;
  overflow: scroll;
  overflow-x: hidden;
}

#timeDisplay {
  color: darkblue;
  font-size: 50px;
  font-weight: bold;
  border: black 1px solid;
  border-radius: 15px;
  margin: 20px;
  padding: 20px;
  background-color: #FBF3CB;
}

#controls {
  padding-top: 30px;
}

button {
  padding: 5px;
  margin: 2px;
}
</style>

<script>
let messageLog;
let timeDisplay;
let source;

window.onload = function() {
  messageLog = document.getElementById("messageLog");
  timeDisplay = document.getElementById("timeDisplay");
}

function startListening() {
  source = new EventSource("TimeEvents.php");
  source.onmessage = receiveMessage;
  messageLog.innerHTML += "<br>" + "Started listening for messages."
}

function stopListening() {
  source.close();
  messageLog.innerHTML += "<br>" + "No longer listening for messages."
}

function receiveMessage(event) {
  messageLog.innerHTML += "<br>" + "New web server time received: " + event.data;
  timeDisplay.innerHTML = event.data;
}

</script>
</head>

<body>
<div id="messageLog">
[Page Created]
</div>
<div id="timeDisplay">
[No Time.]
</div>
<div id="controls">
<button onclick="startListening()">Start Listening</button>
<br>
<button onclick="stopListening()">Stop Listening</button>
</div>
</body>
</html>

php file

<?php
  header('Content-Type: text/event-stream');
  header('Cache-Control: no-cache');
                                                                                        
  // Tell the browser to wait two minutes before reconnecting,
  // when the connection is closed.
  echo 'retry: 120000' . PHP_EOL;
                                                                                        
  // Turn off output buffering, so messages are sent
  // to the browser immediately.
  ob_end_clean();
                                                                                        
  // Store the start time.
  $startTime = time();
                                                                                        
  do {
    // Send a message.
    $currentTime = date('h:i:s', time());
    echo 'data: ' . $currentTime . PHP_EOL;
    echo PHP_EOL;
                                                                                        
    flush();
                                                                                        
    // If a minute has passed, end this script.
    if ((time() - $startTime) > 60) {
      die();
    }
                                                                                        
    // Wait 5 seconds, and send a new message.
    sleep(5);
  } while(true);
?>