63 lines
2 KiB
HTML
63 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Simple Chat</title>
|
|
<style>
|
|
body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
|
|
#chat { height: 400px; border: 1px solid #ccc; overflow-y: scroll; padding: 10px; margin-bottom: 10px; }
|
|
#controls { display: flex; gap: 10px; }
|
|
#message { flex-grow: 1; padding: 5px; }
|
|
button { padding: 5px 15px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Simple Chat</h1>
|
|
<div id="chat"></div>
|
|
<div id="controls">
|
|
<input type="text" id="message" placeholder="Type a message..." autofocus>
|
|
<button onclick="sendMessage()">Send</button>
|
|
</div>
|
|
|
|
<script>
|
|
const chatCheck = document.getElementById("chat");
|
|
const messageInput = document.getElementById("message");
|
|
|
|
// Connect to WebSocket
|
|
const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
|
const ws = new WebSocket(`${proto}://${window.location.host}/ws`);
|
|
|
|
ws.onmessage = (event) => {
|
|
const div = document.createElement("div");
|
|
div.textContent = event.data;
|
|
chatCheck.appendChild(div);
|
|
chatCheck.scrollTop = chatCheck.scrollHeight;
|
|
};
|
|
|
|
ws.onopen = () => {
|
|
const div = document.createElement("div");
|
|
div.textContent = "System: Connected to chat server";
|
|
div.style.color = "green";
|
|
chatCheck.appendChild(div);
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
const div = document.createElement("div");
|
|
div.textContent = "System: Disconnected";
|
|
div.style.color = "red";
|
|
chatCheck.appendChild(div);
|
|
};
|
|
|
|
function sendMessage() {
|
|
const msg = messageInput.value;
|
|
if (msg) {
|
|
ws.send(msg);
|
|
messageInput.value = "";
|
|
}
|
|
}
|
|
|
|
messageInput.addEventListener("keypress", (e) => {
|
|
if (e.key === "Enter") sendMessage();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|