<!DOCTYPE html>
<html>
<head>
<title>WebSocket Test</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:9000');
// Connection opened
socket.addEventListener('open', function (event) {
console.log("Connected to WebSocket server");
});
// Listen for messages
socket.addEventListener('message', function (event) {
console.log('Message from server', event.data);
let messages = document.getElementById('messages');
let message = document.createElement('li');
message.textContent = "Received: " + event.data;
messages.appendChild(message);
});
// Send a message to the server
function sendMessage() {
let message = document.getElementById('messageInput').value;
socket.send(message);
console.log('Message sent', message);
}
// Bind send message function to button click
document.getElementById('sendMessage').addEventListener('click', sendMessage);
});
</script>
</head>
<body>
<h2>WebSocket Test</h2>
<input type="text" id="messageInput" placeholder="Type a message...">
<button id="sendMessage">Send Message</button>
<ul id="messages"></ul>
</body>
</html>