70 lines
2.2 KiB
HTML
70 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
#chat-container {
|
|
width: 400px;
|
|
height: 500px;
|
|
border: 1px solid #ccc;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#messages {
|
|
flex: 1;
|
|
overflow-y: auto; /* Enables scrolling */
|
|
padding: 10px;
|
|
background: #f9f9f9;
|
|
}
|
|
.msg { margin-bottom: 10px; }
|
|
.user { font-weight: bold; color: #2c3e50; }
|
|
.time { font-size: 0.7em; color: #999; }
|
|
.controls { display: flex; padding: 10px; border-top: 1px solid #eee; }
|
|
input { flex: 1; padding: 5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="chat-container">
|
|
<div id="messages"></div>
|
|
<div class="controls">
|
|
<input type="text" id="input" placeholder="Enter message...">
|
|
<button onclick="send()">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const room = new URLSearchParams(window.location.search).get('room') || 'general';
|
|
const ws = new WebSocket(`ws://localhost:8080/ws?room=${room}`);
|
|
const msgDiv = document.getElementById('messages');
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
appendMessage(data);
|
|
};
|
|
|
|
function appendMessage(data) {
|
|
const item = document.createElement('div');
|
|
item.className = 'msg';
|
|
const time = new Date(data.timestamp).toLocaleTimeString();
|
|
|
|
item.innerHTML = `
|
|
<span class="user">${data.username}:</span>
|
|
<span>${data.content}</span>
|
|
<div class="time">${time}</div>
|
|
`;
|
|
msgDiv.appendChild(item);
|
|
|
|
// Auto-scroll to bottom when a new message arrives
|
|
msgDiv.scrollTop = msgDiv.scrollHeight;
|
|
}
|
|
|
|
function send() {
|
|
const input = document.getElementById('input');
|
|
ws.send(JSON.stringify({
|
|
content: input.value,
|
|
username: "User123" // In production, get this from auth
|
|
}));
|
|
input.value = '';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |