51 lines
1.5 KiB
HTML
51 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Cards For Humanity Test Client</title>
|
|
</head>
|
|
<body>
|
|
<h1>Cards</h1>
|
|
<div id="status">
|
|
<p><em>Connecting...</em></p>
|
|
</div>
|
|
Chat:
|
|
<form id="muhForm" onsubmit="onSubmit();return false">
|
|
<textarea id="history" readonly="true" wrap="soft" style="width: 80%; height: 10rem;"></textarea>
|
|
<br />
|
|
<input type="text" id="text" autocomplete="off" style="width: 80%;" />
|
|
<br />
|
|
<button type="submit" id="send">Send</button>
|
|
</form>
|
|
<script type="text/javascript">
|
|
const status = document.getElementById('status');
|
|
const history = document.getElementById('history');
|
|
history.value = "";
|
|
const uri = 'ws://' + location.host + '/chat';
|
|
const ws = new WebSocket(uri);
|
|
|
|
function message(data) {
|
|
history.value = history.value + data + '\n';
|
|
}
|
|
|
|
ws.onopen = function() {
|
|
status.innerHTML = '<p><em>Connected!</em></p>';
|
|
};
|
|
|
|
ws.onmessage = function(msg) {
|
|
message(msg.data);
|
|
};
|
|
|
|
ws.onclose = function() {
|
|
status.getElementsByTagName('em')[0].innerText = 'Disconnected!';
|
|
};
|
|
|
|
function onSubmit() {
|
|
const msg = text.value;
|
|
ws.send(msg);
|
|
text.value = '';
|
|
|
|
message('You: ' + msg);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|