<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Test</title>
</head>
<body>
<h1>WebSocket Client</h1>
<div>
<label for="message">Message: </label>
<input type="text" id="message" placeholder="Enter a message" onsubmit="sendMessage()">
<button onclick="sendMessage()">Send</button>
</div>
<div id="output"></div>
<script>
const ws = new WebSocket('ws://localhost:8887');
let isComposing = false;
ws.onopen = function () {
logMessage('Connected to the WebSocket server');
};
ws.onmessage = function (event) {
logMessage('Received: ' + event.data);
};
ws.onclose = function () {
logMessage('Disconnected from the WebSocket server');
};
ws.onerror = function (error) {
logMessage('Error: ' + error.message);
};
document.getElementById('message').addEventListener('keydown', function(event) {
if (event.key === 'Enter' && !isComposing) {
sendMessage();
}
});
document.getElementById('message').addEventListener('compositionstart', function() {
isComposing = true;
});
document.getElementById('message').addEventListener('compositionend', function() {
isComposing = false;
});
function sendMessage() {
const message = document.getElementById('message').value;
ws.send(message);
logMessage('Sent: ' + message);
}
function logMessage(message) {
const output = document.getElementById('output');
const messageElement = document.createElement('div');
messageElement.textContent = message;
output.appendChild(messageElement);
}
window.onload = function() {
document.getElementById('message').focus();
};
</script>
</body>
</html>
