Estoy creando un sitio web, donde estoy utilizando sesiones, tengo una tabla llamada usuarios, lo que quiero es que al momento de cerrar el navegador me detecte un evento con JS y ese evento mande un POST a mi PHP y actualizando mi tabla usuarios específicamente en la columna estatus. Eh logrado lo anterior pero me di cuenta que al recargar la pagina de igual manera el evento me lo detecta, estoy utilizando AJAX para llamar esa petición, se que puedo utilizar un cronometro de inactividad y cierre sesión, pero lo que se requiere es la sesión sea cerrada al inmediatamente cerrar el navegador. Cualquier sugerencia es aceptada y agradecida.
Este es mi código:
<?php
//session_start();
$connection = new swag();
if(!isset($_SESSION["id_user"])){
echo"<script>location.href='index.php';</script>";
} ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" href="imgs/icon/favicon.ico">
<title>PAGINA</title>
<link href="font-awesome/css/all.min.css" rel="stylesheet">
</head>
<body id="principal" >
<script language="javascript">
function cerrarSesion(){
$.ajax({
type: 'post',
url: 'logout.php',
});
}
</script>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/utiles.js"></script>
</body>
</html>
CODIGO ACTUALIZADO:
Encontre la forma en la cual ya no detectara al recargar la pagina, solamente hay un problema, me funciona con F5 o Ctrl+R, pero al recargar desde el botón del navegador si me detecta la función ajax- ¿Saben como lo puedo resolver? Se los agradezco. Este es mi codigo:
<?php
//session_start();
$connection = new swag();
if(!isset($_SESSION["id_user"])){
echo"<script>location.href='index.php';</script>";
} ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" href="imgs/icon/favicon.ico">
<title>PAGINA</title>
<link href="font-awesome/css/all.min.css" rel="stylesheet">
</head>
<body onUnload="cerrarSesion()" id="principal" >
<script type="text/javascript">
$(document).ready(function(){
var validNavigation = false;
// Attach the event keypress to exclude the F5 refresh (includes normal refresh)
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});
$(document).keydown(function(e) {
if (e.keyCode == 65 && e.ctrlKey) {
validNavigation = true;
}
});
$(document).keydown(function(e) {
if (e.keyCode == 65+17 && e.ctrlKey) {
validNavigation = true;
}
});
$(document).keydown(function (e) {
if (e.key=="F5") {
validNavigation = true;
}
else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {
validNavigation = true;
}
else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
validNavigation = true;
}
else if (e.key.toUpperCase() == "F4" && (prevKey == "ALT" || prevKey == "CONTROL")) {
window.onbeforeunload = ConfirmLeave;
}
});
window.onbeforeunload = function() {
if (!validNavigation) {
$.ajax({
type: 'post',
url: 'logout.php',
});
}else{
}
};
});
</script>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/utiles.js"></script>
</body>
</html>