display a message before session timeout triggers - php

Question

I have a php webpage that logs users out after 10 seconds of inactivity. After 10 seconds, I need to hit the refresh button before it redirects to the main index.php page. How do I make a popup box displaying "You are logged out due to inactivity" and after that it redirects to index.php without refreshing?
P/S: I'm a student learning the basics so I don't know much.
session_start();
$timeout = 10;
// Check if the timeout field exists.
if(isset($_SESSION['timeout'])) {
// See if the number of seconds since the last
// visit is larger than the timeout period.
$duration = time() - (int)$_SESSION['timeout'];
if($duration > $timeout) {
// Destroy the session and restart it.
session_destroy();
session_start();
}
}
So I tried something like this using alert.Why doesn't it work?
<?php
//include ("popup.php");
session_start();
$timeout = 10;
// Check if the timeout field exists.
if(isset($_SESSION['timeout'])) {
// See if the number of seconds since the last
// visit is larger than the timeout period.
$duration = time() - (int)$_SESSION['timeout'];
if($duration > $timeout) {
echo"<script type='javascript'>alert('10 seconds over!');
header("location:../../index.php");
</script>";
}
// Destroy the session and restart it.
session_destroy();
session_start();
header("location:../../index.php");
}
// Update the timout field with the current time.
$_SESSION['timeout'] = time();

Answer 1

Implement a popup with Javascript; or
In your conditional, use header("Location: logout-notice.php");
Edit:
I can't test right now, but based on your update, the things I see is that you're checking for $_SESSION['timeout'] but I don't see it declared or given a value anywhere. You have the variable of $timeout set at the top but they're different variables.
Maybe something like this:
$_SESSION['timeout'] = time() + $timeout; // should = 1491838370 if set at UNIX time of 1491838360
if(time() > $_SESSION['timeout']){ // evaluated at 1491838380 which is > 1491838370 results in true
?>
<script type='javascript'>alert('10 seconds over!');</script>
<?php
header("Location: ../../index.php");
}
The question is where/how you'll be evaluating this. If you want each user's action to validate whether they've been active, you can include this script at the beginning of each file. The downside is that if they're inactive for a minute, it won't evaluate until they do something.
You could use a pure javascript version relying on SetInterval or SetTimeout to evaluate every ten seconds and pop up an alert with a window.location.href to index.php as well. Something like this (again you may need to tweak, this is untested):
var checkSession = setInterval(
function({
var sessionExpires = <?=$_SESSION['timeout']?>; //this is probably considered heresy, but as long as the javascript is evaluated by the PHP processor, it should work
var currentTime = Math.floor((new Date).getTime()/1000);
if(currentTime > sessionExpires ){
alert("Take your stuff and go!");
window.location.href = "../../index.php";
}
}, 10000);