blob: ed5f9d4406e8d3ffa551ab8f35ce678eda5732a1 (
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<div class="container">
<div class="sidebar">
Channels
<ul id="channels"></ul>
</div>
<div class="flex-col">
<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>
</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
let gettingChannels = false;
let leavingAChannel = false;
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}`;
gettingChannels = true;
ws.send(":jsonGet channels");
};
ws.onmessage = (msg) => {
console.log(msg);
if (msg.data.startsWith(":json.channels>")) {
gettingChannels = false;
let channels = JSON.parse(String(msg.data).replace(":json.channels>", ""));
console.log(msg.data, "gh", channels);
channels.forEach((ch) => {
let elem = document.createElement("li");
elem.innerText = `#${ch}`;
elem.addEventListener("click", function (ev) {
ws.send(`/join #${ch}`);
leavingAChannel = true;
});
document.getElementById("channels").appendChild(elem);
});
return;
}
if (leavingAChannel) {
logs.innerText = "";
leavingAChannel = false;
return;
}
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}. reload the page to reconnect`;
};
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;
}
.sidebar {
padding: 1em;
border-right: 2px red solid;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.container {
display: flex;
position: relative;
height: calc(100vh - 3em);
border: 2px red solid;
margin: 1.5em;
}
.flex-col {
flex-direction: column;
display: flex;
flex-grow: 1;
}
.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>
|
