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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
const messages = new Map();
const users = new Map();
function xhttp_request(location) {
var xhttp = new XMLHttpRequest();
var return_string;
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
return_string = xhttp.responseText;
}
};
xhttp.open("GET", "http://localhost/api/" + location, false);
xhttp.send();
return JSON.parse(return_string);
}
function xhttp_post(location, json) {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "http://localhost/api/" + location, false);
xhttp.setRequestHeader("Content-Type", "application/json")
var return_string;
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
return_string = xhttp.responseText;
}
};
xhttp.send(json);
return JSON.parse(return_string);
}
function format_message(m) {
var s;
var sender = get_user_name(m.sender);
if (m.deleted) {
s = `<span>${m.id}|${sender}: deleted</span>`
// s = "<span>" + m.id + "|" + m.sender + ": /deleted/" + "</span>"
} else {
s = `<span>${m.id}|${sender}: ${m.message}</span>`
// s = "<span>" + m.id + "|" + m.sender + ": " + m.message + "</span>"
}
return s
}
function send() {
var input = document.getElementById("input").value;
let message = JSON.stringify({"sender": 0, "message": input})
var id = xhttp_post("send_message", message)
get_message(id.Ok);
document.getElementById("input").value = ''
}
function get_newest_cache_id() {
let last = -1;
for (k of messages.keys()) {
if (k > last) {
last = k
}
}
return last
}
// Returns message list
function get_newest_messages() {
let newest_id = xhttp_request("get_message_id_newest").Ok;
let newest_cache_id = get_newest_cache_id();
let final_array = [];
if (newest_id == newest_cache_id) {
return
}
if (newest_cache_id == -1) {
get_message(0)
return get_newest_messages()
}
if (newest_id > newest_cache_id) {
let delta = newest_id - newest_cache_id ;
if (delta > 25) {
let oldest = newest_id - 25;
let newest = delta;
let list = get_message_list(oldest, newest);
for (x of list.values()) {
final_array.push(x)
}
newest_id = oldest;
if (oldest - 25 < 0) {
newest_cache_id = 0
} else {
newest_cache_id = oldest - 25
}
}
}
let list = get_message_list(newest_cache_id, newest_id)
for (x of list.values()) {
final_array.push(x)
}
// Insert all values into the message map
for (x of final_array.values()) {
messages.set(x.id, x)
}
chatwindow()
}
function get_message_list(oldest, newest) {
let req = xhttp_request(`get_message_list/${oldest}/${newest}`).Ok
return req
}
// Returns dom
function get_message(id) {
let cached = messages.get(id)
if (cached != undefined) {
return to_dom(cached)
}
// Get message
let msg = xhttp_request("get_message/" + id).Ok;
messages.set(msg.id, msg)
let dom = to_dom(msg);
chatwindow()
return dom
}
function get_user_name(id) {
let cached = users.get(id)
if (cached != undefined) {
return cached.username
}
let user = xhttp_request("get_user/" + id).Ok;
users.set(user.id, user)
return user.username
}
// Returns dom
function to_dom(x) {
let dom = new DOMParser().parseFromString(format_message(x), "text/xml").firstChild;
return dom
}
function chatwindow() {
let window = document.getElementById("chatwindow");
window.innerHTML = "";
let array = [];
for (v of messages.values()) {
array.push(v);
}
array.sort(
function(a, b) {
return a.id - b.id
}
);
for (v of array) {
let dom = to_dom(v);
window.append(dom)
}
window.scrollTop = window.scrollHeight
}
function inputkey(event) {
let key = event.key
let shift = event.shiftKey;
if (key == "Enter" && shift) {
send()
} else if (key == "Enter" && !shift) {
this.value += "\n"
}
}
function onload() {
let server_info = xhttp_request("");
document.getElementById("info").innerHTML += server_info.version + ", " + server_info.name + ", users: " + server_info.users;
// Get all messages on startup
// get_newest_messages();
const interval = setInterval(get_newest_messages, 1000);
}
|
