|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>HugVPS Chat - Connected to server</title> |
|
|
<style> |
|
|
ul { list-style-type: none; padding: 0; } |
|
|
li { padding: 8px; margin-bottom: 10px; background: #f1f1f1; } |
|
|
#username-form { display: none; } |
|
|
</style> |
|
|
<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script> |
|
|
</head> |
|
|
<body> |
|
|
<h1>HugVPS Chat</h1> |
|
|
|
|
|
<div id="username-form"> |
|
|
<input id="username" placeholder="Enter your username" /> |
|
|
<button id="set-username">Set Username</button> |
|
|
</div> |
|
|
|
|
|
<ul id="messages"></ul> |
|
|
<form id="form" action="" style="display: none;"> |
|
|
<input id="input" autocomplete="off" placeholder="Type your message..." /> |
|
|
<button>Send</button> |
|
|
</form> |
|
|
|
|
|
<script src="/socket.io/socket.io.js"></script> |
|
|
<script> |
|
|
const socket = io(); |
|
|
const usernameForm = document.getElementById('username-form'); |
|
|
const messages = document.getElementById('messages'); |
|
|
const form = document.getElementById('form'); |
|
|
const input = document.getElementById('input'); |
|
|
const usernameInput = document.getElementById('username'); |
|
|
const setUsernameButton = document.getElementById('set-username'); |
|
|
|
|
|
|
|
|
window.onload = () => { |
|
|
usernameForm.style.display = 'block'; |
|
|
}; |
|
|
|
|
|
|
|
|
setUsernameButton.addEventListener('click', () => { |
|
|
const username = usernameInput.value.trim(); |
|
|
if (username) { |
|
|
socket.emit('set username', username); |
|
|
usernameForm.style.display = 'none'; |
|
|
form.style.display = 'block'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
form.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
if (input.value) { |
|
|
socket.emit('chat message', input.value); |
|
|
input.value = ''; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
socket.on('chat message', function(data) { |
|
|
const item = document.createElement('li'); |
|
|
item.innerHTML = `${data.username}: ${data.message}`; |
|
|
messages.appendChild(item); |
|
|
window.scrollTo(0, document.body.scrollHeight); |
|
|
}); |
|
|
twemoji.parse(document.body); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
