<!DOCTYPE html>
<html>
<head>
    <title>Chatroom</title>
    <li><a href="Redditlike.HTML">Home</a></li>
    <style>
        #chatbox {
            width: 1280px;
            height: 720px;
            border: 1px solid #ccc;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div id="chatbox"></div>
    <input type="text" id="message" placeholder="Type your message">
    <button id="send">Send</button>

    <script>
        const chatbox = document.getElementById('chatbox');
        const messageInput = document.getElementById('message');
        const sendButton = document.getElementById('send');

        
        const socket = new WebSocket('wss://free.blr2.piesocket.com/v3/1?api_key=C1ZujiijYNPNj8gvuGXhIPKsDR4WolCCKOBzMdbM&notify_self=1');

        
        socket.addEventListener('open', () => {
            sendButton.disabled = false; // Enable the send button when the WebSocket is open
        });


        socket.addEventListener('message', event => {
            const message = event.data;
            appendMessageToChatbox(message);
        });

     
        messageInput.addEventListener('keydown', event => {
            if (event.key === 'Enter') {
                sendMessage();
            }
        });

        sendButton.addEventListener('click', sendMessage);

        function sendMessage() {
            const message = messageInput.value;
            if (message.trim() === '') return;

            if (socket.readyState === WebSocket.OPEN) {
                // Send the message to the server
                socket.send(message);

                // Clear the input field
                messageInput.value = '';
            }
        }

        function appendMessageToChatbox(message) {
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            chatbox.appendChild(messageElement);

            // Scroll to the bottom of the chatbox
            chatbox.scrollTop = chatbox.scrollHeight;
        }
    </script>
</body>
</html>