43 lines
1.5 KiB
HTML
43 lines
1.5 KiB
HTML
<!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>
|