]>
Commit | Line | Data |
---|---|---|
827f21bb SW |
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |
2 | "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | |
827f21bb | 3 | <html xmlns="http://www.w3.org/1999/xhtml"> |
520c21fd SW |
4 | <!-- |
5 | reliable-chat - multipath chat | |
6 | Copyright (C) 2012 Scott Worley <sworley@chkno.net> | |
7 | Copyright (C) 2012 Jason Hibbs <skitch@gmail.com> | |
8 | ||
9 | This program is free software: you can redistribute it and/or modify | |
10 | it under the terms of the GNU Affero General Public License as | |
11 | published by the Free Software Foundation, either version 3 of the | |
12 | License, or (at your option) any later version. | |
13 | ||
14 | This program is distributed in the hope that it will be useful, | |
15 | but WITHOUT ANY WARRANTY; without even the implied warranty of | |
16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
17 | GNU Affero General Public License for more details. | |
18 | ||
19 | You should have received a copy of the GNU Affero General Public License | |
20 | along with this program. If not, see <http://www.gnu.org/licenses/>. | |
21 | --> | |
827f21bb SW |
22 | <head> |
23 | <title>Reliable Chat</title> | |
0248a518 | 24 | <style type="text/css"><!--/*--><![CDATA[/*><!--*/ |
70f46223 JH |
25 | html, body { |
26 | width: 99.9%; | |
27 | height: 100%; | |
28 | margin: 0; | |
29 | padding: 0; | |
b22a2ced JH |
30 | background-color: #293134; |
31 | color: silver; | |
70f46223 JH |
32 | font-family: monospace; |
33 | } | |
e04a2cfd SW |
34 | a { |
35 | color: white; | |
36 | } | |
70f46223 JH |
37 | #container { |
38 | height: 100%; | |
39 | } | |
40 | #status { | |
41 | width: 100%; | |
638866e9 | 42 | text-align: right; |
b22a2ced | 43 | background-color: #293134; |
70f46223 JH |
44 | padding: 5px 5px 5px 0px; |
45 | } | |
46 | #client { | |
47 | width: 98.5%; | |
48 | padding: 0px 0px 0px 5px; | |
49 | height: 50px; | |
50 | position: fixed; | |
51 | bottom: 0; | |
52 | } | |
53 | #input { | |
54 | width: 100%; | |
b22a2ced | 55 | background-color: #293134; |
70f46223 | 56 | } |
0248a518 | 57 | #say { width: 100% } |
70f46223 JH |
58 | #history { |
59 | padding: 0px 5px 55px 5px; | |
60 | vertical-align: bottom | |
61 | } | |
5afebfc6 SW |
62 | .banner { |
63 | font-size: 85%; | |
64 | text-align: right; | |
65 | } | |
c0aac85a | 66 | .servercount { |
33fdb071 | 67 | margin-right: -0.5em; |
c0aac85a SW |
68 | font-size: 70%; |
69 | } | |
244a78af SW |
70 | .timestamp:hover, .timestamp:hover .servertimestamps { |
71 | background-color: #556; | |
72 | } | |
73 | .timestamp:hover .servertimestamps { | |
74 | display: block; | |
75 | } | |
76 | .servertimestamps { | |
77 | display: none; | |
78 | position: absolute; | |
79 | left: 3em; | |
80 | z-index: 1; | |
81 | border: 1px solid black; | |
82 | border-radius: 5px; | |
83 | padding-left: 5px; | |
84 | padding-right: 5px; | |
85 | } | |
0248a518 SW |
86 | img { width: 1px; height: 1px; } |
87 | iframe { display: none } | |
70f46223 | 88 | #status span { margin-right: 10px; } |
f09c4ede JH |
89 | #status span.sad { |
90 | background-color: #f00; | |
91 | color: #fff; | |
92 | border: 1px solid black; | |
93 | border-radius: 5px; | |
94 | padding-left: 5px; | |
95 | padding-right: 5px; | |
96 | } | |
97 | #status span.happy { | |
98 | background-color: #0f0; | |
99 | color: #000; | |
100 | border: 1px solid black; | |
101 | border-radius: 5px; | |
102 | padding-left: 5px; | |
103 | padding-right: 5px; | |
104 | } | |
0248a518 SW |
105 | /*]]>*/--></style> |
106 | <script type="text/javascript"><!--//--><![CDATA[//><!-- | |
107 | var servers = ['chkno.net', 'rc2.chkno.net', 'echto.net', 'the-wes.com', 'vibrantlogic.com']; | |
108 | ||
da9ce2ab | 109 | var session = Math.random(); // For outgoing message IDs |
869430fa SW |
110 | var since = {}; // server -> time: For fetch?since= |
111 | var seen = {}; // seen_key -> message | |
7f54ca0a | 112 | var history = []; // List of messages sorted by Time |
5419ea4c | 113 | // Messages have these fields: |
40380bd3 | 114 | // Time: The timestamp. Median of ServerTimes |
5419ea4c SW |
115 | // ID: Some unique string for deduping |
116 | // Text: The text of the message | |
705e26cf | 117 | // ServerTimes: server -> timestamp |
5419ea4c | 118 | // UI: The DOM node for this message in the UI |
0248a518 SW |
119 | |
120 | function rcnick() { | |
121 | var nick = localStorage.getItem("nick"); | |
122 | if (nick) { | |
123 | return nick; | |
124 | } | |
125 | return 'anonymous'; | |
126 | } | |
127 | ||
128 | function rcsetnick(new_nick) { | |
129 | localStorage.setItem("nick", new_nick); | |
130 | } | |
131 | ||
132 | function rcserverbase(server) { | |
133 | // Add the default port if server doesn't contain a port number already | |
134 | if (server.indexOf(":") == -1) { | |
135 | return "http://" + server + ":21059"; | |
136 | } else { | |
137 | return "http://" + server; | |
138 | } | |
139 | } | |
140 | ||
141 | function rcchangeserverstatus(server, new_status) { | |
142 | var statusbar = document.getElementById("status"); | |
143 | var spans = statusbar.getElementsByTagName("span"); | |
144 | for (var i in spans) { | |
145 | if (spans[i].firstChild && 'data' in spans[i].firstChild && spans[i].firstChild.data == server) { | |
146 | spans[i].setAttribute("class", new_status); | |
147 | } | |
148 | } | |
149 | } | |
150 | ||
66b29e97 SW |
151 | function rcpad2(x) { |
152 | return (x < 10 ? "0" : "") + x; | |
153 | } | |
154 | function rcpad3(x) { | |
155 | return (x < 10 ? "00" : (x < 100 ? "0" : "")) + x; | |
156 | } | |
157 | ||
bd1ed9dd SW |
158 | function rcformattime(t) { |
159 | var d = t.getDay(); | |
160 | d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d]; | |
161 | var h = t.getHours(); | |
162 | var m = t.getMinutes(); | |
163 | var s = t.getSeconds(); | |
66b29e97 | 164 | return d + " " + rcpad2(h) + ":" + rcpad2(m) + ":" + rcpad2(s); |
bd1ed9dd SW |
165 | } |
166 | ||
244a78af SW |
167 | function rcaddservertimestamptohover(message, server) { |
168 | var divs = message.UI.getElementsByTagName("div"); | |
66b29e97 | 169 | var t = message.ServerTimes[server]; |
244a78af SW |
170 | for (var i in divs) { |
171 | if (divs[i].getAttribute && divs[i].getAttribute("class") == "servertimestamps") { | |
172 | var d = document.createElement("div"); | |
66b29e97 SW |
173 | var text = t.getFullYear() + "-" + |
174 | rcpad2(t.getMonth()) + "-" + | |
175 | rcpad2(t.getDay()) + " " + | |
176 | rcformattime(t) + "." + | |
177 | rcpad3(t.getMilliseconds()) + " " + | |
178 | server; | |
244a78af SW |
179 | d.appendChild(document.createTextNode(text)); |
180 | divs[i].appendChild(d); | |
181 | } | |
182 | } | |
183 | } | |
184 | ||
bf8f6a39 SW |
185 | function rcmakemessageUI(message) { |
186 | message.UI = document.createElement("div"); | |
187 | ||
188 | // Server count | |
189 | var servercount = document.createElement("span"); | |
190 | servercount.setAttribute("class", "servercount"); | |
191 | servercount.appendChild(document.createTextNode(Object.keys(message.ServerTimes).length)); | |
192 | message.UI.appendChild(servercount); | |
33fdb071 | 193 | message.UI.appendChild(document.createTextNode(" ")); |
bf8f6a39 SW |
194 | |
195 | // Timestamp | |
196 | var timestamp_text = message.Time ? rcformattime(message.Time) : ""; | |
197 | var timestamp = document.createElement("span"); | |
198 | timestamp.setAttribute("class", "timestamp"); | |
199 | timestamp.appendChild(document.createTextNode(timestamp_text)); | |
200 | message.UI.appendChild(timestamp); | |
33fdb071 | 201 | message.UI.appendChild(document.createTextNode(" ")); |
bf8f6a39 | 202 | |
244a78af SW |
203 | // Timestamp hover |
204 | var timestamp_hover = document.createElement("div"); | |
205 | timestamp_hover.setAttribute("class", "servertimestamps"); | |
206 | timestamp.appendChild(timestamp_hover); | |
207 | for (var server in message.ServerTimes) { | |
208 | rcaddservertimestamptohover(message, server); | |
209 | } | |
210 | ||
3a89c414 SW |
211 | // Classify different message types |
212 | var text_span = document.createElement("span"); | |
213 | var type; | |
214 | if (/^\*\*\* /.test(message.Text)) { | |
215 | type = "status"; | |
216 | } else if (/^\* /.test(message.Text)) { | |
217 | type = "me"; | |
218 | } else { | |
219 | type = "text"; | |
220 | } | |
221 | if (Object.keys(message.ServerTimes).length == 0) { | |
222 | type += " self"; | |
223 | } | |
224 | text_span.setAttribute("class", type); | |
e04a2cfd SW |
225 | |
226 | // URL detection | |
227 | var text = message.Text; | |
228 | var URL_re = /\bhttps?:\/\/\S+/; | |
229 | while (URL_re.test(text)) { | |
230 | var match = URL_re.exec(text); | |
231 | var leading_text = text.substr(0, match.index); | |
232 | if (leading_text) { | |
233 | text_span.appendChild(document.createTextNode(leading_text)); | |
234 | } | |
235 | var anchor = document.createElement("a"); | |
606c01e1 | 236 | anchor.setAttribute("rel", "nofollow"); |
e04a2cfd SW |
237 | anchor.setAttribute("href", encodeURI(match[0])); |
238 | anchor.appendChild(document.createTextNode(match[0])); | |
239 | text_span.appendChild(anchor); | |
240 | text = text.substr(match.index + match[0].length); | |
241 | } | |
242 | if (text) { | |
243 | text_span.appendChild(document.createTextNode(text)); | |
244 | } | |
245 | ||
3a89c414 | 246 | message.UI.appendChild(text_span); |
bf8f6a39 SW |
247 | } |
248 | ||
0248a518 | 249 | function rcaddmessagetohistory(message) { |
7f54ca0a SW |
250 | var message_i; |
251 | if (message.Time) { | |
252 | for (var i = history.length - 1; ; i--) { | |
253 | if (i < 0 || (history[i].Time && message.Time >= history[i].Time)) { | |
254 | message_i = i+1; | |
255 | history.splice(message_i, 0, message); | |
256 | break; | |
257 | } | |
258 | } | |
259 | } else { | |
260 | history.push(message); | |
261 | message_i = history.length-1; | |
262 | } | |
263 | ||
95ba71ee | 264 | if (!message.UI) { |
bf8f6a39 | 265 | rcmakemessageUI(message); |
95ba71ee | 266 | } |
0248a518 | 267 | var h = document.getElementById("history"); |
7f54ca0a SW |
268 | if (message_i + 1 < history.length) { |
269 | h.insertBefore(message.UI, history[message_i + 1].UI); | |
270 | } else { | |
271 | h.appendChild(message.UI); | |
272 | } | |
0248a518 | 273 | window.scrollTo(0, document.body.scrollHeight); |
0248a518 SW |
274 | } |
275 | ||
276 | function make_seen_key(id, text) { | |
277 | return id.replace(/@/g, "@@") + "_@_" + text.replace(/@/g, "@@"); | |
278 | } | |
279 | ||
40380bd3 SW |
280 | function rcupdatemessagetime(message) { |
281 | // Set message.Time to be the median of message.ServerTimes | |
282 | var times = []; | |
283 | for (var i in message.ServerTimes) { | |
284 | times.push(message.ServerTimes[i]); | |
285 | } | |
286 | times.sort(); | |
40380bd3 | 287 | if (times.length % 2) { |
ac4bf273 | 288 | message.Time = times[(times.length-1)/2]; |
40380bd3 | 289 | } else { |
ac4bf273 | 290 | var middle = times.length/2; |
40380bd3 SW |
291 | var difference = times[middle].getTime() - times[middle-1].getTime(); |
292 | message.Time = new Date(times[middle-1].getTime() + difference/2); | |
293 | } | |
95ba71ee SW |
294 | |
295 | // This may have broken history's in-sorted-order invariant | |
296 | var hi = history.indexOf(message); | |
297 | if ((history[hi-1] && history[hi-1].Time > message.Time) || | |
298 | (history[hi+1] && history[hi+1].Time < message.Time)) { | |
299 | history.splice(hi,1); | |
300 | rcaddmessagetohistory(message); | |
301 | } | |
5be4c8ec SW |
302 | |
303 | // Update the UI | |
304 | var spans = message.UI.getElementsByTagName("span"); | |
305 | for (var i in spans) { | |
c0aac85a SW |
306 | if (spans[i].getAttribute) { |
307 | var type = spans[i].getAttribute("class"); | |
308 | if (type == "servercount") { | |
309 | spans[i].firstChild.data = Object.keys(message.ServerTimes).length; | |
310 | } else if (type == "timestamp") { | |
311 | spans[i].firstChild.data = rcformattime(message.Time); | |
312 | } | |
5be4c8ec SW |
313 | } |
314 | } | |
40380bd3 SW |
315 | } |
316 | ||
79ced6f1 SW |
317 | function rcreceivemessages(server, messages) { |
318 | for (var i in messages) { | |
ad35b1be | 319 | var m = messages[i]; |
bd1ed9dd | 320 | m.Time = new Date(m.Time); |
ad35b1be | 321 | var seen_key = make_seen_key(m.ID, m.Text); |
705e26cf SW |
322 | if (seen_key in seen) { |
323 | seen[seen_key].ServerTimes[server] = m.Time; | |
40380bd3 | 324 | rcupdatemessagetime(seen[seen_key]); |
244a78af | 325 | rcaddservertimestamptohover(seen[seen_key], server); |
705e26cf | 326 | } else { |
16640c5d SW |
327 | m.ServerTimes = {}; |
328 | m.ServerTimes[server] = m.Time; | |
869430fa | 329 | seen[seen_key] = m; |
ad35b1be | 330 | rcaddmessagetohistory(m); |
79ced6f1 SW |
331 | for (var i in servers) { |
332 | rcchangeserverstatus(servers[i], "sad"); | |
333 | } | |
0248a518 | 334 | } |
79ced6f1 | 335 | rcchangeserverstatus(server, "happy"); |
0248a518 | 336 | } |
0248a518 SW |
337 | } |
338 | ||
79ced6f1 SW |
339 | function rcfetch(server) { |
340 | var delay = 10000; // TODO: Exponential backoff | |
341 | var xhr = new XMLHttpRequest(); | |
342 | xhr.onreadystatechange = function() { | |
343 | if (this.readyState == this.DONE) { | |
344 | if (this.status == 200) { | |
345 | var rtxt = this.responseText; | |
346 | if (rtxt != null) { | |
347 | var messages = JSON.parse(rtxt); | |
348 | if (messages != null) { | |
79ced6f1 SW |
349 | delay = 40; |
350 | if (messages.length >= 1 && "Time" in messages[messages.length-1]) { | |
ad35b1be | 351 | since[server] = messages[messages.length-1].Time; |
79ced6f1 | 352 | } |
92ca5f8a | 353 | rcreceivemessages(server, messages); |
79ced6f1 | 354 | } |
0248a518 SW |
355 | } |
356 | } | |
79ced6f1 | 357 | window.setTimeout(rcfetch, delay, server); |
0248a518 SW |
358 | } |
359 | } | |
79ced6f1 SW |
360 | var uri = rcserverbase(server) + "/fetch"; |
361 | if (server in since) { | |
362 | uri += '?since="' + since[server] + '"'; | |
363 | } | |
364 | xhr.open("GET", uri); | |
365 | xhr.send(); | |
0248a518 SW |
366 | } |
367 | ||
368 | function rcconnect() { | |
0248a518 | 369 | for (var i in servers) { |
79ced6f1 | 370 | rcfetch(servers[i]); |
0248a518 SW |
371 | // Status bar entry |
372 | var status_indicator = document.createElement("span"); | |
373 | status_indicator.appendChild(document.createTextNode(servers[i])); | |
374 | status_indicator.setAttribute("class", "sad"); | |
375 | document.getElementById("status").appendChild(status_indicator); | |
376 | } | |
0248a518 SW |
377 | } |
378 | ||
379 | function rcsend(d, message) { | |
7f54ca0a SW |
380 | message.ID = new Date().getTime() + "-" + session + "-" + Math.random(); |
381 | seen[make_seen_key(message.ID, message.Text)] = message; | |
0248a518 | 382 | var path = "/speak" + |
7f54ca0a SW |
383 | "?id=" + encodeURIComponent(message.ID) + |
384 | "&text=" + encodeURIComponent(message.Text); | |
0248a518 SW |
385 | for (var i in servers) { |
386 | var uri = rcserverbase(servers[i]) + path; | |
387 | var img = document.createElement("img"); | |
388 | img.setAttribute("src", uri); | |
389 | d.appendChild(img); | |
390 | } | |
391 | } | |
392 | ||
5a6c082a SW |
393 | function rcinput(input) { |
394 | var message; | |
395 | var re = /^\/([a-z]+) (.*)/ | |
396 | var match = re.exec(input); | |
397 | if (match && match[1] == 'me') { | |
398 | message = "* " + rcnick() + " " + match[2]; | |
399 | } else if (match && match[1] == 'nick') { | |
400 | message = "*** " + rcnick() + " is now known as " + match[2]; | |
401 | rcsetnick(match[2]); | |
402 | } else { | |
403 | message = "<" + rcnick() + "> " + input; | |
404 | } | |
405 | ||
7f54ca0a | 406 | var m = {'Text': message, 'ServerTimes': {}}; |
869430fa SW |
407 | rcaddmessagetohistory(m); |
408 | rcsend(m.UI, m); | |
5a6c082a SW |
409 | } |
410 | ||
0248a518 SW |
411 | function rckeydown(event) { |
412 | if (event.keyCode == 13) { | |
5a6c082a | 413 | rcinput(document.input.say.value); |
0248a518 SW |
414 | document.input.say.value = ""; |
415 | ||
0248a518 SW |
416 | } |
417 | } | |
418 | //--><!]]></script> | |
419 | ||
827f21bb SW |
420 | </head> |
421 | ||
f0e385c7 | 422 | <body onload="rcconnect()"> |
70f46223 | 423 | <div id="container"> |
5afebfc6 | 424 | <div class="banner">(You are using <a href="https://github.com/chkno/reliable-chat">Reliable Chat</a>)</div> |
70f46223 JH |
425 | <div id="history"></div> |
426 | <div id="client"> | |
427 | <div id="input"> | |
428 | <form name="input" onsubmit="return false" autocomplete="off"> | |
429 | <input id="say" onkeydown="return rckeydown(event)" autocomplete="off" autofocus="autofocus"></input> | |
430 | </form></div> | |
431 | <div id="status"> </div> | |
432 | </div> | |
433 | </div> | |
827f21bb SW |
434 | </body> |
435 | </html> |