npm-package-nodejs-utils-lda
Version:
Este projeto tem como fins de criar e abstrair módulos basicos e utilidades para o node js
88 lines (75 loc) • 1.98 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WSChat Test Page</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
#chat {
border: 1px solid #ccc;
height: 250px;
overflow-y: auto;
padding: 10px;
margin-bottom: 10px;
}
#controls {
display: flex;
gap: 10px;
}
input {
padding: 8px;
}
button {
padding: 8px 12px;
}
</style>
</head>
<body>
<h2>WSChat - Test Page</h2>
<div id="chat"></div>
<div id="controls">
<input id="name" placeholder="Your name" />
<input id="msg" placeholder="Type your message..." />
<button onclick="sendMessage()">Send</button>
</div>
<script>
const chat = document.getElementById("chat");
const input = document.getElementById("msg");
const nameInput = document.getElementById("name");
const socket = new WebSocket(`ws://${location.host}`);
socket.addEventListener("open", () => {
log("[Connected]");
});
socket.addEventListener("message", (event) => {
log(event.data);
});
socket.addEventListener("close", () => {
log("[Disconnected]");
});
socket.addEventListener("error", (e) => {
log("[Error connecting to server]");
});
nameInput.addEventListener("change", () => {
const name = nameInput.value.trim();
if (name) {
socket.send(JSON.stringify({ type: "setName", name }));
}
});
function sendMessage() {
const text = input.value.trim();
if (!text) return;
socket.send(JSON.stringify({ type: "message", text }));
input.value = "";
}
function log(text) {
const div = document.createElement("div");
div.textContent = text;
chat.appendChild(div);
chat.scrollTop = chat.scrollHeight;
}
</script>
</body>
</html>