Creare una chat per gli utenti del mio sito [era: aiuto chat]

**paperpediaforum** · 29-04-2024, 13.26.01

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.

**GraphOGLRisorse** · 29-04-2024, 14.52.37

Salve,
le basta aggiungere questo:

Codice:

location.reload();
loadNewMessages();
scrollToBottom();

alla fine del blocco di eseguzione del submit:

Codice:

document.getElementById("messageForm").addEventListener("submit", function(event) {

  .... resto del coedice ....

   location.reload();
   loadNewMessages();
   scrollToBottom();
});

Inoltre, per una gestione migliore dello scroll, si può modifcare scrollToBottom() così:

Codice:

        function scrollToBottom() {

            var chatDiv = document.getElementById("chat");

            chatDiv.scrollTop = chatDiv.scrollHeight;
			
            var chatDiv = document.getElementById("messageForm");

            chatDiv.scrollTop = chatDiv.scrollHeight;

        }
        scrollToBottom();

e rimuovere il caricamento di scrollToBottom() all'interno di loadNewMessages().

Cordiali saluti.

**dreadnaut** · 29-04-2024, 19.00.18

@GraphOGLRisorse
Se aggiungi location.reload(); ricarichi l'intera pagina, ciò che paperpediaforum voleva evitare.

@paperpediaforum

Ma non funziona.

Hai più dettagli? Non carica i messaggi giusti, mostra messaggi di errore nella console JavaScript, etc?

Intanto, dal mio punto di vista ci sono due complicazioni qua:

- usi XmlHttpRequest invece di Fetch
- passi i nuovi messaggi in formato JSON, e poi devi fare un sacco di lavoro per aggiungerli alla pagina, quando potresti preparare l'HTML nello script PHP (hai già showChat()) ed aggiungerlo alla pagina senza fatica

Discussione: Creare una chat per gli utenti del mio sito [era: aiuto chat]

LinkBack

Strumenti discussione

Display

Creare una chat per gli utenti del mio sito [era: aiuto chat]

Tags for this Thread

Regole di scrittura