blob: db7a4d3b4106dde733568b0de473f846e1548424 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<div class="container">
<div class="title">wsChat</div>
<div class="logs">
</div>
<div class="msg">
<form id="msg">
<input type="text" id="msg-content" autocomplete="off">
<input type="submit">
</form>
</div>
</div>
<script>
const logs = document.querySelector(".logs");
const msgForm = document.querySelector("#msg");
const server = prompt("Enter server URL", "ws://127.0.0.1:9933")
const ws = new WebSocket(server); // CHANGE ME
ws.onopen = openEv => {
if(logs.innerText.length != 0) logs.innerText += "\n";
logs.innerText += `Connected to wsChat server at ${ws.url}`;
document.querySelector(".title").innerHTML += ` - ${new URL(ws.url).host}`;
}
ws.onmessage = msg => {;
console.log(msg);
if(logs.innerText.length != 0) logs.innerText += "\n";
logs.innerText += msg.data;
};
ws.onclose = cls => {
if(logs.innerText.length != 0) logs.innerText += "\n";
logs.innerText += `Connection closed with code ${cls.code}, reason: ${cls.reason}`;
}
msgForm.addEventListener('submit', ev => {
ev.preventDefault();
const message = document.querySelector("#msg-content");
ws.send(message.value);
message.value = "";
});
</script>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
width: 100%;
min-height: 100vh;
position: absolute;
}
.container {
position: relative;
display: flex;
flex-direction: column;
height: calc(100vh - 3em);
border: 2px red solid;
margin: 1.5em;
}
.logs {
flex-grow: 1;
padding: 1em;
}
.title {
border-bottom: 2px red solid;
padding: 1em;
font-size: larger;
font-weight: bold;
text-align: center;
}
#msg {
border-top: 2px red solid;
padding: 1em;
display: flex;
margin: 0;
height: 2em;
box-sizing: content-box;
}
#msg-content {
flex-grow: 1;
}
</style>
|
