Very new to long polling and just got this to work but trying to make it work with an array. I understand the php side of things fairly well but I'm very new to Javascript.
active_calls.php
<?php
class Calls {
// (A) CONSTRUCTOR - CONNECT TO DATABASE
protected $pdo = null;
protected $stmt = null;
function __construct () {
$this->pdo = new PDO(
"mysql:host=".DB_HOST.";dbname=".DB_NAME.";charset=".DB_CHARSET,
DB_USER, DB_PASSWORD, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
]);
}
// (B) DESTRUCTOR - CLOSE CONNECTION
function __destruct () {
if ($this->stmt !== null) { $this->stmt = null; }
if ($this->pdo !== null) { $this->pdo = null; }
}
// (C) GET LATEST SCORE
function getCalls () {
$this->stmt = $this->pdo->prepare(
"SELECT *, UNIX_TIMESTAMP(`call_time`) AS `unix`
FROM `calls` WHERE call_status=1 ORDER BY `call_time` DESC"
);
$this->stmt->execute();
return $this->stmt->fetch();
}
}
// (D) DATABASE SETTINGS - CHANGE THESE TO YOUR OWN!
define("DB_HOST", "localhost");
define("DB_NAME", "xxxxx");
define("DB_CHARSET", "utf8mb4");
define("DB_USER", "xxxxx");
define("DB_PASSWORD", "xxxxx");
// (E) CHECK FOR SCORE UPDATES
if (isset($_POST["last"])) {
// (E1) SET TIME LIMIT
set_time_limit(30); // set an appropriate time limit
ignore_user_abort(false); // stop when long polling breaks
// (E2) LOOP UNTIL THERE ARE UPDATES OR TIMEOUT
$_CALL = new Calls();
while (true) {
$call = $_CALL->getCalls();
if (isset($call["unix"]) && $call["unix"] > $_POST["last"]) {
echo json_encode($call);
break;
}
sleep(1); // short pause to not break server
}
}
active_call.html
<html>
<head>
<link rel="stylesheet" href="style/style.css">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<table>
<tr>
<th>Call Time</th>
<th>Station IP</th>
<th>Call Status</th>
<th>Action</th>
</tr>
<tr align='center'>
<td><div id="Time"></div></td>
<td><div id="StationIP"></div></td>
<td><div id="CallStatus"></td>
</tr>
</table>
<script>
// (B) LAST UPDATED TIMESTAMP
var last = 0;
// (C) AJAX LONG POLL
function GetCurrentUnixTimeStamp() {
return Math.floor(Date.now() / 1000);
}
function poll () {
// (C1) FORM DATA
let data = new FormData();
data.append("last", last);
console.log("Fetch run", last);
// (C2) FETCH UPDATE ON SERVER RESPONSE
fetch("active_calls.php", { method:"POST", body:data })
.then(res => res.json())
.then(data => {
console.log(data);
// (C2-1) UPDATE HTML DISPLAY
document.getElementById("Time").innerHTML = GetCurrentUnixTimeStamp() - data.unix;
document.getElementById("StationIP").innerHTML = data.station_ip;
document.getElementById("CallStatus").innerHTML = data.call_status;
// (C2-2) NEXT ROUND
last = data.unix;
poll();
})
// (C3) CATCH ERROR - LOOP ON TIMEOUT
.catch(err => poll());
}
// (D) GO!
window.onload = poll;
</script>
</html>
data sample
| call_id | call_status | call_time | station_ip | unix |
|---|---|---|---|---|
| 3 | 1 | 2023-07-09 11:47:51 | 192.168.254.200 | 1688921271 |
| 2 | 1 | 2023-07-08 21:36:30 | 192.168.200.201 | 1688870190 |
I have tried multiple times to declare as an array and attach values into the array but I'm not even sure how to loop though the array on the Javascript side to pull that data back out once I get it in properly. Seem this should be simple but I've been trying for weeks also just getting back into php after a few years so I'm a bit rusty.