224 lines
4.1 KiB
HTML
224 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebSocket Chat</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 20px auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
#chat-container {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#messages {
|
|
height: 400px;
|
|
overflow-y: auto;
|
|
border: 1px solid #eee;
|
|
padding: 10px;
|
|
margin-bottom: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.message {
|
|
margin: 5px 0;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.message.sent {
|
|
background-color: #e3f2fd;
|
|
margin-left: 20%;
|
|
}
|
|
|
|
.message.received {
|
|
background-color: #f5f5f5;
|
|
margin-right: 20%;
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
#message-input {
|
|
flex-grow: 1;
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
button {
|
|
padding: 8px 16px;
|
|
background-color: #2196f3;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #1976d2;
|
|
}
|
|
|
|
button:disabled {
|
|
background-color: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#connection-status {
|
|
padding: 10px;
|
|
margin-bottom: 20px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.connected {
|
|
background-color: #c8e6c9;
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.disconnected {
|
|
background-color: #ffcdd2;
|
|
color: #c62828;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="chat-container">
|
|
<h2>WebSocket Chat</h2>
|
|
<div id="connection-status" class="disconnected">Disconnected</div>
|
|
<div id="messages"></div>
|
|
<div class="input-container">
|
|
<input type="text" id="message-input" placeholder="Type a message..." disabled>
|
|
<button id="send-btn" disabled>Send</button>
|
|
<button id="connect-btn">Connect</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const messagesDiv = document.getElementById('messages');
|
|
const messageInput = document.getElementById('message-input');
|
|
const sendButton = document.getElementById('send-btn');
|
|
const connectButton = document.getElementById('connect-btn');
|
|
const statusDiv = document.getElementById('connection-status');
|
|
|
|
let ws = null;
|
|
let username = null;
|
|
|
|
function connect() {
|
|
if (ws) {
|
|
ws.close();
|
|
}
|
|
|
|
// Get username if not already set
|
|
if (!username) {
|
|
username = prompt('Enter your username:');
|
|
if (!username) {
|
|
alert('Username is required!');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Create WebSocket connection
|
|
ws = new WebSocket('ws://localhost:8081/chat');
|
|
|
|
ws.onopen = () => {
|
|
console.log('Connected to WebSocket server');
|
|
statusDiv.textContent = 'Connected';
|
|
statusDiv.className = 'connected';
|
|
messageInput.disabled = false;
|
|
sendButton.disabled = false;
|
|
connectButton.textContent = 'Disconnect';
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log('Disconnected from WebSocket server');
|
|
statusDiv.textContent = 'Disconnected';
|
|
statusDiv.className = 'disconnected';
|
|
messageInput.disabled = true;
|
|
sendButton.disabled = true;
|
|
connectButton.textContent = 'Connect';
|
|
ws = null;
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
console.error('WebSocket error:', error);
|
|
alert('Error connecting to WebSocket server');
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
addMessage(data.username, data.message, data.username === username);
|
|
} catch (e) {
|
|
console.error('Error parsing message:', e);
|
|
}
|
|
};
|
|
}
|
|
|
|
function disconnect() {
|
|
if (ws) {
|
|
ws.close();
|
|
}
|
|
}
|
|
|
|
function sendMessage() {
|
|
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
|
alert('Not connected to server');
|
|
return;
|
|
}
|
|
|
|
const message = messageInput.value.trim();
|
|
if (message) {
|
|
const data = {
|
|
username: username,
|
|
message: message
|
|
};
|
|
ws.send(JSON.stringify(data));
|
|
messageInput.value = '';
|
|
}
|
|
}
|
|
|
|
function addMessage(username, message, isSent) {
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = `message ${isSent ? 'sent' : 'received'}`;
|
|
messageDiv.textContent = `${username}: ${message}`;
|
|
messagesDiv.appendChild(messageDiv);
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
}
|
|
|
|
// Event listeners
|
|
connectButton.addEventListener('click', () => {
|
|
if (ws) {
|
|
disconnect();
|
|
} else {
|
|
connect();
|
|
}
|
|
});
|
|
|
|
sendButton.addEventListener('click', sendMessage);
|
|
|
|
messageInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
// Handle page close/reload
|
|
window.addEventListener('beforeunload', () => {
|
|
if (ws) {
|
|
ws.close();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |