<!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¬ify_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>