<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.IO Client</title>
    <!-- Include Socket.IO client library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js"></script>
</head>
<body>
    <h1>Socket.IO Client</h1>
    <div id="messages"></div>

    <script>
        // Connect to the Socket.IO server
        const socket = io('http://localhost:3000'); // Replace with your server URL

        // Event handler for successful connection
        socket.on('connect', () => {
            console.log('Connected to server');
        });

        // Event handler for receiving messages from the server
        socket.on('message', (data) => {
            const messagesDiv = document.getElementById('messages');
            messagesDiv.innerHTML += `<p>${data}</p>`;
        });

        // Function to send a message to the server
        function sendMessage() {
            const message = document.getElementById('messageInput').value;
            socket.emit('message', message);
        }
    </script>
</body>
</html>
