Alexander Zinn
d8fe4a9dc6
- Created a WebSocket server with connection handling and message broadcasting - Added frontend files including HTML, TypeScript, and CSS for a WebSocket test client - Configured package.json for both server and frontend with necessary scripts and dependencies - Introduced Prettier configuration for code formatting - Established a basic structure for handling WebSocket connections and messages
101 lines
3.4 KiB
HTML
101 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WebSocket Test</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
#messages { border: 1px solid #ccc; height: 300px; overflow-y: scroll; padding: 10px; margin: 10px 0; }
|
|
#input { width: 70%; padding: 5px; }
|
|
button { padding: 5px 10px; margin-left: 5px; }
|
|
.status { padding: 5px; margin: 5px 0; border-radius: 3px; }
|
|
.connected { background-color: #d4edda; color: #155724; }
|
|
.disconnected { background-color: #f8d7da; color: #721c24; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>WebSocket Test Client</h1>
|
|
<div id="status" class="status disconnected">Disconnected</div>
|
|
<div id="messages"></div>
|
|
<input type="text" id="input" placeholder="Type a message..." disabled>
|
|
<button id="send" disabled>Send</button>
|
|
<button id="connect">Connect</button>
|
|
<button id="disconnect" disabled>Disconnect</button>
|
|
|
|
<script>
|
|
let ws = null;
|
|
const status = document.getElementById('status');
|
|
const messages = document.getElementById('messages');
|
|
const input = document.getElementById('input');
|
|
const sendBtn = document.getElementById('send');
|
|
const connectBtn = document.getElementById('connect');
|
|
const disconnectBtn = document.getElementById('disconnect');
|
|
|
|
function addMessage(message) {
|
|
const div = document.createElement('div');
|
|
div.textContent = new Date().toLocaleTimeString() + ': ' + message;
|
|
messages.appendChild(div);
|
|
messages.scrollTop = messages.scrollHeight;
|
|
}
|
|
|
|
function updateStatus(connected) {
|
|
if (connected) {
|
|
status.textContent = 'Connected';
|
|
status.className = 'status connected';
|
|
input.disabled = false;
|
|
sendBtn.disabled = false;
|
|
connectBtn.disabled = true;
|
|
disconnectBtn.disabled = false;
|
|
} else {
|
|
status.textContent = 'Disconnected';
|
|
status.className = 'status disconnected';
|
|
input.disabled = true;
|
|
sendBtn.disabled = true;
|
|
connectBtn.disabled = false;
|
|
disconnectBtn.disabled = true;
|
|
}
|
|
}
|
|
|
|
connectBtn.onclick = function() {
|
|
ws = new WebSocket('ws://localhost:3000');
|
|
|
|
ws.onopen = function() {
|
|
addMessage('Connected to WebSocket server');
|
|
updateStatus(true);
|
|
};
|
|
|
|
ws.onmessage = function(event) {
|
|
addMessage('Received: ' + event.data);
|
|
};
|
|
|
|
ws.onclose = function() {
|
|
addMessage('Disconnected from WebSocket server');
|
|
updateStatus(false);
|
|
};
|
|
|
|
ws.onerror = function(error) {
|
|
addMessage('Error: ' + error);
|
|
};
|
|
};
|
|
|
|
disconnectBtn.onclick = function() {
|
|
if (ws) {
|
|
ws.close();
|
|
}
|
|
};
|
|
|
|
sendBtn.onclick = function() {
|
|
if (ws && input.value) {
|
|
ws.send(input.value);
|
|
addMessage('Sent: ' + input.value);
|
|
input.value = '';
|
|
}
|
|
};
|
|
|
|
input.onkeypress = function(e) {
|
|
if (e.key === 'Enter') {
|
|
sendBtn.click();
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |