adam/cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

expand client

Browse source
This commit is contained in:
Adam 2024-04-29 03:32:44 -04:00
parent b82a0f32c7
commit 1596907546
1 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
test_client.html
View file

@ -8,6 +8,10 @@
background-color: #111; background-color: #111;
color: #DDD; color: #DDD;
} }
div {
margin-top: 1rem;
}
</style> </style>
</head> </head>
<body> <body>
@ -15,14 +19,18 @@
<div id="status"> <div id="status">
<p><em>Disconnected...</em></p> <p><em>Disconnected...</em></p>
</div> </div>
<div>
<form id="login" onsubmit="loginSubmit();return false"> <form id="login" onsubmit="loginSubmit();return false">
<input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username"> <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> <button id="join-chat" type="submit">Join Chat</button>
</form> </form>
</div>
<div>
<form id="chat" onsubmit="chatSubmit();return false"> <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> <textarea id="chat-history" readonly="true" wrap="soft" style="display:block; width:30rem; height:10rem; 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"> <input id="chat-input" style="display:block; width:30rem; box-sizing: border-box" type="text" placeholder="chat">
</form> </form>
</div>
<script type="text/javascript"> <script type="text/javascript">
websocket = new WebSocket("ws://localhost:3030/websocket"); websocket = new WebSocket("ws://localhost:3030/websocket");
@ -32,7 +40,7 @@
}; };
websocket.onopen = function() { websocket.onopen = function() {
console.log("connection opened"); console.log("connection opened",websocket.extensions, websocket.protocol, websocket.readyState);
document.getElementById("status").innerHTML = '<p><em>Connected!</em></p>'; document.getElementById("status").innerHTML = '<p><em>Connected!</em></p>';
} }
@ -43,8 +51,10 @@
} }
websocket.onmessage = function(e) { websocket.onmessage = function(e) {
const history = document.getElementById("chat-history")
console.log("received message: "+e.data); console.log("received message: "+e.data);
document.getElementById("chat-history").value += e.data+"\r\n"; history.value += e.data+"\r";
history.scrollTop = history.scrollHeight;
} }
function chatSubmit() { function chatSubmit() {
@ -52,6 +62,10 @@
websocket.send(input.value); websocket.send(input.value);
input.value = ""; input.value = "";
}; };
websocket.addEventListener("error", (event) => {
console.log("WebSocket error: ", event);
});
</script> </script>
</body> </body>
</html> </html>