2024-04-28 04:53:00 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Cards For Humanity Test Client</title>
|
|
|
|
|
<style>
|
|
|
|
|
html, body, input, textarea, button {
|
|
|
|
|
background-color: #111;
|
|
|
|
|
color: #DDD;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Cards For Humanity Test Client</h1>
|
2024-04-29 02:18:20 -04:00
|
|
|
<div id="status">
|
|
|
|
|
<p><em>Disconnected...</em></p>
|
|
|
|
|
</div>
|
|
|
|
|
<form id="login" onsubmit="loginSubmit();return false">
|
|
|
|
|
<input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username">
|
|
|
|
|
<button id="join-chat" type="submit">Join Chat</button>
|
|
|
|
|
</form>
|
|
|
|
|
<form id="chat" onsubmit="chatSubmit();return false">
|
|
|
|
|
<textarea id="chat-history" style="display:block; width:600px; height:400px; box-sizing: border-box" cols="30" rows="10"></textarea>
|
|
|
|
|
<input id="chat-input" style="display:block; width:600px; box-sizing: border-box" type="text" placeholder="chat">
|
|
|
|
|
</form>
|
2024-04-28 04:53:00 -04:00
|
|
|
<script type="text/javascript">
|
2024-04-29 02:18:20 -04:00
|
|
|
websocket = new WebSocket("ws://localhost:3030/websocket");
|
2024-04-28 04:53:00 -04:00
|
|
|
|
2024-04-29 02:18:20 -04:00
|
|
|
function loginSubmit() {
|
|
|
|
|
document.getElementById("join-chat").disabled = true;
|
|
|
|
|
websocket.send(username.value);
|
|
|
|
|
};
|
2024-04-28 04:53:00 -04:00
|
|
|
|
2024-04-29 02:18:20 -04:00
|
|
|
websocket.onopen = function() {
|
|
|
|
|
console.log("connection opened");
|
|
|
|
|
document.getElementById("status").innerHTML = '<p><em>Connected!</em></p>';
|
|
|
|
|
}
|
2024-04-28 04:53:00 -04:00
|
|
|
|
2024-04-29 02:18:20 -04:00
|
|
|
websocket.onclose = function() {
|
|
|
|
|
console.log("connection closed");
|
|
|
|
|
// document.getElementById("join-chat").disabled = false;
|
|
|
|
|
document.getElementById("status").innerHTML = '<p><em>Disconnected...</em></p>';
|
|
|
|
|
}
|
2024-04-28 04:53:00 -04:00
|
|
|
|
2024-04-29 02:18:20 -04:00
|
|
|
websocket.onmessage = function(e) {
|
|
|
|
|
console.log("received message: "+e.data);
|
|
|
|
|
document.getElementById("chat-history").value += e.data+"\r\n";
|
|
|
|
|
}
|
2024-04-28 04:53:00 -04:00
|
|
|
|
2024-04-29 02:18:20 -04:00
|
|
|
function chatSubmit() {
|
|
|
|
|
let input = document.getElementById("chat-input");
|
|
|
|
|
websocket.send(input.value);
|
|
|
|
|
input.value = "";
|
|
|
|
|
};
|
2024-04-28 04:53:00 -04:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
