<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Chat</title>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
#chat-container {
border: 1px solid #ccc;
padding: 10px;
height: 400px;
overflow-y: scroll;
margin-bottom: 10px;
}
#user-list {
width: 200px;
float: right;
border: 1px solid #ccc;
padding: 10px;
margin-left: 10px;
}
#message-form {
display: flex;
gap: 10px;
}
#message-input {
flex-grow: 1;
padding: 5px;
}
#username-container {
margin-bottom: 10px;
}
.message {
margin: 5px 0;
}
.error {
color: red;
}
</style>
</head>
<body>
<div id="username-container">
<input type="text" id="username-input" placeholder="Enter your username">
<button onclick="setUsername()">Set Username</button>
</div>
<div id="user-list">
<h3>Connected Users</h3>
<ul id="users"></ul>
</div>
<div id="chat-container"></div>
<div id="message-form">
<input type="text" id="message-input" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
</div>
<script>
const socket = io();
socket.on('connect', () => {
console.log('Connected to server');
});
socket.on('message', (data) => {
const chatContainer = document.getElementById('chat-container');
const messageElement = document.createElement('div');
messageElement.className = 'message';
messageElement.innerHTML = `<strong>${data.username}</strong> (${new Date(data.timestamp).toLocaleTimeString()}): ${data.message}`;
chatContainer.appendChild(messageElement);
chatContainer.scrollTop = chatContainer.scrollHeight;
});
socket.on('user_list', (users) => {
const userList = document.getElementById('users');
userList.innerHTML = '';
users.forEach(user => {
const li = document.createElement('li');
li.textContent = user;
userList.appendChild(li);
});
});
socket.on('error', (data) => {
const chatContainer = document.getElementById('chat-container');
const errorElement = document.createElement('div');
errorElement.className = 'error';
errorElement.textContent = data.message;
chatContainer.appendChild(errorElement);
});
function setUsername() {
const usernameInput = document.getElementById('username-input');
const username = usernameInput.value.trim();
if (username) {
socket.emit('set_username', { username });
usernameInput.disabled = true;
document.querySelector('#username-container button').disabled = true;
}
}
function sendMessage() {
const messageInput = document.getElementById('message-input');
const message = messageInput.value.trim();
if (message) {
socket.emit('message', { message });
messageInput.value = '';
}
}
// Allow sending message with Enter key
document.getElementById('message-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
</script>
</body>
</html>
