Creare una chat per gli utenti del mio sito [era: aiuto chat]
Salve a tutti, spero abbiate la soluzione al mio problema. Vorrei creare una chat per i miei utenti sul mio sito, ma non riesco a fare in modo che sia live, dunque che carichi i nuovi messaggi senza bisogno di ricaricare manualmente la pagina.
Vi allego il file che ho della chat, che va dunque migliorato.
Codice PHP:
<?php
session_start();
// Inizializza la lista dei messaggi se non esiste già nella sessione
if (!isset($_SESSION['messages'])) {
$_SESSION['messages'] = [];
}
// Funzione per aggiungere un messaggio alla lista
function addMessage($username_user, $message) {
$timestamp = date("Y-m-d H:i:s");
$_SESSION['messages'][] = [
'username_user' => $username_user,
'message' => $message,
'timestamp' => $timestamp
];
}
// Funzione per mostrare la classe del messaggio in base al mittente
function getMessageClass($username_user) {
return ($username_user === $_SESSION['username']) ? 'my-message' : 'other-message';
}
// Funzione per mostrare la chat con le classi dei messaggi
function showChat() {
if (isset($_SESSION['messages'])) {
foreach ($_SESSION['messages'] as $message) {
$formatted_date = date("d/m/Y H:i", strtotime($message['timestamp']));
$message_class = getMessageClass($message['username_user']);
echo "<div class='message $message_class' data-timestamp='{$message['timestamp']}'><strong>{$message['username_user']}</strong>: {$message['message']} ({$formatted_date})</div>";
}
}
}
// Aggiungi un messaggio se il form è stato inviato
if (isset($_POST['message']) && isset($_SESSION['username'])) {
$message = $_POST['message'];
$username_user = $_SESSION['username'];
addMessage($username_user, $message);
exit(); // Termina lo script dopo l'aggiunta del messaggio
}
// Se è una richiesta AJAX per controllare i nuovi messaggi
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
if (isset($_GET['lastTimestamp']) && isset($_SESSION['messages'])) {
$lastTimestamp = $_GET['lastTimestamp'];
$newMessages = [];
foreach ($_SESSION['messages'] as $message) {
if ($message['timestamp'] > $lastTimestamp) {
$newMessages[] = $message;
}
}
// Restituisci i nuovi messaggi in formato JSON
header('Content-Type: application/json');
echo json_encode($newMessages);
exit();
}
}
?>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Pubblica</title>
<style>
/* Stile generale dei messaggi */
body {
width:700px;
}
.chat {
padding:0px;
margin:0px;
width:700px;
height:400px;
border-radius:20px;
background-color:#007fff;
overflow-y:scroll;
overflow-x:none;
}
.message {
font-family: Arial, sans-serif;
border-radius: 10px;
word-wrap: break-word; /* Per gestire il testo lungo */
margin-bottom: 10px; /* Spazio tra i messaggi */
}
/* Stile dei messaggi inviati dall'utente */
.my-message {
background-color: #f0f0f0; /* Grigio chiaro */
padding: 10px;
margin-right: 10px; /* Distanza dal bordo destro */
margin-left: 40px; /* Distanza dal bordo sinistro */
width: calc(500px - 50px); /* Larghezza calcolata */
}
/* Stile dei messaggi non inviati dall'utente */
.other-message {
background-color: #c4e3ff; /* Azzurro chiaro */
padding: 10px;
margin-left: 10px; /* Distanza dal bordo sinistro */
margin-right: 40px; /* Distanza dal bordo destro */
width: calc(500px - 50px); /* Larghezza calcolata */
}
.imageinvio {
width:45px;
height:45px;
opacity:1.0;
position:relative;
top:10px;
cursor:pointer;
}
.imageinvio:hover {
opacity:0.7;
}
.buttoninvio {
border:0px;
padding:0px;
margin-left:5px;
margin-top:10px;
}
input {
height:30px;
font-size:17px;
width:600px;
border-radius:20px;
margin-top:10px;
padding-left:15px
}
</style>
</head>
<body>
<div class="chat" id="chat">
<?php showChat(); ?>
</div>
<?php if(isset($_SESSION['username'])): ?>
<form id="messageForm" action="" method="post">
<input type="text" name="message" id="messageInput" placeholder="Scrivi il tuo messaggio qui..." required>
<button class="buttoninvio" type="submit"><img class="imageinvio" src="https://paperpediaforum.altervista.org/immagini/paperinoportalettere.gif"></button>
</form>
<?php else: ?>
<p>Devi essere registrato per scrivere messaggi.</p>
<?php endif; ?>
<script>
// Funzione per scorrere automaticamente la chat fino in fondo
function scrollToBottom() {
var chatDiv = document.getElementById("chat");
chatDiv.scrollTop = chatDiv.scrollHeight;
}
// Carica i nuovi messaggi senza ricaricare l'intera pagina
function loadNewMessages() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var newMessages = JSON.parse(xhr.responseText);
if (newMessages.length > 0) {
newMessages.forEach(function(message) {
var formattedDate = new Date(message.timestamp);
var formattedTime = formattedDate.toLocaleTimeString();
var messageClass = message.username_user === '<?php echo $_SESSION['username']; ?>' ? 'my-message' : 'other-message';
var messageHTML = "<div class='message " + messageClass + "'><strong>" + message.username_user + "</strong>: " + message.message + " (" + formattedTime + ")</div>";
document.getElementById("chat").insertAdjacentHTML('beforeend', messageHTML);
});
scrollToBottom();
// Informa l'utente dei nuovi messaggi qui, ad esempio cambiando il colore dell'icona o mostrando un messaggio di notifica
}
}
};
var lastTimestamp = document.querySelector(".message:last-child").getAttribute("data-timestamp");
xhr.open("GET", "?lastTimestamp=" + lastTimestamp, true); // Invia la richiesta GET con il timestamp dell'ultimo messaggio
xhr.send();
}
// Invia il messaggio senza ricaricare la pagina
document.getElementById("messageForm").addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData(this);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("messageInput").value = "";
scrollToBottom();
}
};
xhr.open("POST", "", true); // Invia la richiesta POST alla stessa pagina
xhr.send(formData);
});
// Carica i nuovi messaggi quando la pagina si carica
window.onload = function() {
scrollToBottom();
loadNewMessages(); // Carica i messaggi iniziali
setInterval(loadNewMessages, 5000); // Carica i nuovi messaggi ogni 5 secondi (5000 millisecondi)
};
</script>
</body>
</html>
Come potete notare, ho già tentato la soluzione:
Codice:
// Carica i nuovi messaggi quando la pagina si carica
window.onload = function() {
scrollToBottom();
loadNewMessages(); // Carica i messaggi iniziali
setInterval(loadNewMessages, 5000); // Carica i nuovi messaggi ogni 5 secondi (5000 millisecondi)
Ma non funziona.
