| | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |
| | 2 | "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| | 3 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| | 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 | --> |
| | 22 | <head> |
| | 23 | <title>Reliable Chat</title> |
| | 24 | <style type="text/css"><!--/*--><![CDATA[/*><!--*/ |
| | 25 | html, body { |
| | 26 | width: 100%; |
| | 27 | height: 100%; |
| | 28 | margin: 0; |
| | 29 | padding: 0; |
| | 30 | background-color: #293134; |
| | 31 | color: silver; |
| | 32 | font-family: monospace; |
| | 33 | } |
| | 34 | a { |
| | 35 | color: #ddd; |
| | 36 | } |
| | 37 | #container { |
| | 38 | height: 100%; |
| | 39 | } |
| | 40 | #status { |
| | 41 | width: 100%; |
| | 42 | text-align: right; |
| | 43 | background-color: #293134; |
| | 44 | padding: 5px 5px 5px 0px; |
| | 45 | } |
| | 46 | #client { |
| | 47 | width: 100%; |
| | 48 | position: fixed; |
| | 49 | bottom: 0; |
| | 50 | } |
| | 51 | #input { |
| | 52 | width: 100%; |
| | 53 | background-color: #293134; |
| | 54 | } |
| | 55 | #say { width: 100% } |
| | 56 | #history { |
| | 57 | padding: 0px 5px 30px 5px; |
| | 58 | vertical-align: bottom; |
| | 59 | } |
| | 60 | .banner { |
| | 61 | font-size: 85%; |
| | 62 | text-align: right; |
| | 63 | } |
| | 64 | .servercount { |
| | 65 | margin-right: -0.5em; |
| | 66 | font-size: 70%; |
| | 67 | } |
| | 68 | .timestamp:hover, .timestamp:hover .servertimestamps { |
| | 69 | background-color: #556; |
| | 70 | } |
| | 71 | .timestamp:hover .servertimestamps { |
| | 72 | display: block; |
| | 73 | } |
| | 74 | .servertimestamps { |
| | 75 | display: none; |
| | 76 | position: absolute; |
| | 77 | left: 3em; |
| | 78 | z-index: 1; |
| | 79 | border: 1px solid black; |
| | 80 | border-radius: 5px; |
| | 81 | padding-left: 5px; |
| | 82 | padding-right: 5px; |
| | 83 | } |
| | 84 | img { width: 1px; height: 1px; } |
| | 85 | iframe { display: none } |
| | 86 | #status span { margin-right: 10px; } |
| | 87 | #status span.sad { |
| | 88 | background-color: #f00; |
| | 89 | color: #fff; |
| | 90 | border: 1px solid black; |
| | 91 | border-radius: 5px; |
| | 92 | padding-left: 5px; |
| | 93 | padding-right: 5px; |
| | 94 | } |
| | 95 | #status span.happy { |
| | 96 | background-color: #0f0; |
| | 97 | color: #000; |
| | 98 | border: 1px solid black; |
| | 99 | border-radius: 5px; |
| | 100 | padding-left: 5px; |
| | 101 | padding-right: 5px; |
| | 102 | } |
| | 103 | |
| | 104 | /* BEGIN expando input box trick kindly provided by http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ */ |
| | 105 | .expandingArea { |
| | 106 | position: relative; |
| | 107 | border: 1px solid #888; |
| | 108 | background: silver; |
| | 109 | } |
| | 110 | .expandingArea > textarea, |
| | 111 | .expandingArea > pre { |
| | 112 | margin: 0; |
| | 113 | outline: 0; |
| | 114 | border: 0; |
| | 115 | padding: 5px; |
| | 116 | background: transparent; |
| | 117 | font: 400 13px/16px helvetica, arial, sans-serif; |
| | 118 | /* Make the text soft-wrap */ |
| | 119 | white-space: pre-wrap; |
| | 120 | word-wrap: break-word; |
| | 121 | } |
| | 122 | .expandingArea > textarea { |
| | 123 | /* The border-box box model is used to allow |
| | 124 | * padding whilst still keeping the overall width |
| | 125 | * at exactly that of the containing element. |
| | 126 | */ |
| | 127 | -webkit-box-sizing: border-box; |
| | 128 | -moz-box-sizing: border-box; |
| | 129 | -ms-box-sizing: border-box; |
| | 130 | box-sizing: border-box; |
| | 131 | width: 100%; |
| | 132 | /* Hide any scrollbars */ |
| | 133 | overflow: hidden; |
| | 134 | position: absolute; |
| | 135 | top: 0; |
| | 136 | left: 0; |
| | 137 | height: 100%; |
| | 138 | /* Remove WebKit user-resize widget */ |
| | 139 | resize: none; |
| | 140 | } |
| | 141 | .expandingArea > pre { |
| | 142 | display: block; |
| | 143 | /* Hide the text; just using it for sizing */ |
| | 144 | visibility: hidden; |
| | 145 | } |
| | 146 | /* END expando input box trick kindly provided by http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ */ |
| | 147 | |
| | 148 | /*]]>*/--></style> |
| | 149 | <script type="text/javascript"><!--//--><![CDATA[//><!-- |
| | 150 | var servers = ['chkno.net', 'rc2.chkno.net', 'reliablechat-chk.rhcloud.com:80', 'intense-basin-3395.herokuapp.com:80', 'echto.net', 'the-wes.com', 'vibrantlogic.com']; |
| | 151 | |
| | 152 | var session = Math.random(); // For outgoing message IDs |
| | 153 | var since = {}; // server -> time: For fetch?since= |
| | 154 | var seen = {}; // seen_key -> message |
| | 155 | var history = []; // List of messages sorted by Time |
| | 156 | // Messages have these fields: |
| | 157 | // Time: The timestamp. Median of ServerTimes |
| | 158 | // ID: Some unique string for deduping |
| | 159 | // Text: The text of the message |
| | 160 | // ServerTimes: server -> timestamp |
| | 161 | // UI: The DOM node for this message in the UI |
| | 162 | |
| | 163 | function rcnick() { |
| | 164 | var nick = localStorage.getItem("nick"); |
| | 165 | if (nick) { |
| | 166 | return nick; |
| | 167 | } |
| | 168 | return 'anonymous'; |
| | 169 | } |
| | 170 | |
| | 171 | function rcsetnick(new_nick) { |
| | 172 | localStorage.setItem("nick", new_nick); |
| | 173 | } |
| | 174 | |
| | 175 | function rcserverbase(server) { |
| | 176 | // Add the default port if server doesn't contain a port number already |
| | 177 | if (server.indexOf(":") == -1) { |
| | 178 | return "http://" + server + ":21059"; |
| | 179 | } else { |
| | 180 | return "http://" + server; |
| | 181 | } |
| | 182 | } |
| | 183 | |
| | 184 | function rcchangeserverstatus(server, new_status) { |
| | 185 | var statusbar = document.getElementById("status"); |
| | 186 | var spans = statusbar.getElementsByTagName("span"); |
| | 187 | for (var i in spans) { |
| | 188 | if (spans[i].firstChild && 'data' in spans[i].firstChild && spans[i].firstChild.data == server) { |
| | 189 | spans[i].setAttribute("class", new_status); |
| | 190 | } |
| | 191 | } |
| | 192 | } |
| | 193 | |
| | 194 | function rcpad2(x) { |
| | 195 | return (x < 10 ? "0" : "") + x; |
| | 196 | } |
| | 197 | function rcpad3(x) { |
| | 198 | return (x < 10 ? "00" : (x < 100 ? "0" : "")) + x; |
| | 199 | } |
| | 200 | |
| | 201 | function rcformattime(t) { |
| | 202 | var d = t.getDay(); |
| | 203 | d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d]; |
| | 204 | var h = t.getHours(); |
| | 205 | var m = t.getMinutes(); |
| | 206 | var s = t.getSeconds(); |
| | 207 | return d + " " + rcpad2(h) + ":" + rcpad2(m) + ":" + rcpad2(s); |
| | 208 | } |
| | 209 | |
| | 210 | function rcaddservertimestamptohover(message, server) { |
| | 211 | var divs = message.UI.getElementsByTagName("div"); |
| | 212 | var t = message.ServerTimes[server]; |
| | 213 | for (var i in divs) { |
| | 214 | if (divs[i].getAttribute && divs[i].getAttribute("class") == "servertimestamps") { |
| | 215 | var d = document.createElement("div"); |
| | 216 | var text = t.getFullYear() + "-" + |
| | 217 | rcpad2(t.getMonth()) + "-" + |
| | 218 | rcpad2(t.getDay()) + " " + |
| | 219 | rcformattime(t) + "." + |
| | 220 | rcpad3(t.getMilliseconds()) + " " + |
| | 221 | server; |
| | 222 | d.appendChild(document.createTextNode(text)); |
| | 223 | divs[i].appendChild(d); |
| | 224 | } |
| | 225 | } |
| | 226 | } |
| | 227 | |
| | 228 | function rcmakemessageUI(message) { |
| | 229 | message.UI = document.createElement("div"); |
| | 230 | |
| | 231 | // Server count |
| | 232 | var servercount = document.createElement("span"); |
| | 233 | servercount.setAttribute("class", "servercount"); |
| | 234 | servercount.appendChild(document.createTextNode(Object.keys(message.ServerTimes).length)); |
| | 235 | message.UI.appendChild(servercount); |
| | 236 | message.UI.appendChild(document.createTextNode(" ")); |
| | 237 | |
| | 238 | // Timestamp |
| | 239 | var timestamp_text = message.Time ? rcformattime(message.Time) : ""; |
| | 240 | var timestamp = document.createElement("span"); |
| | 241 | timestamp.setAttribute("class", "timestamp"); |
| | 242 | timestamp.appendChild(document.createTextNode(timestamp_text)); |
| | 243 | message.UI.appendChild(timestamp); |
| | 244 | message.UI.appendChild(document.createTextNode(" ")); |
| | 245 | |
| | 246 | // Timestamp hover |
| | 247 | var timestamp_hover = document.createElement("div"); |
| | 248 | timestamp_hover.setAttribute("class", "servertimestamps"); |
| | 249 | timestamp.appendChild(timestamp_hover); |
| | 250 | for (var server in message.ServerTimes) { |
| | 251 | rcaddservertimestamptohover(message, server); |
| | 252 | } |
| | 253 | |
| | 254 | // Classify different message types |
| | 255 | var text_span = document.createElement("span"); |
| | 256 | var type; |
| | 257 | if (/^\*\*\* /.test(message.Text)) { |
| | 258 | type = "status"; |
| | 259 | } else if (/^\* /.test(message.Text)) { |
| | 260 | type = "me"; |
| | 261 | } else if (/^-!- /.test(message.Text)) { |
| | 262 | type = "local"; |
| | 263 | } else { |
| | 264 | type = "text"; |
| | 265 | } |
| | 266 | if (Object.keys(message.ServerTimes).length == 0) { |
| | 267 | type += " self"; |
| | 268 | } |
| | 269 | text_span.setAttribute("class", type); |
| | 270 | |
| | 271 | // URL detection |
| | 272 | var text = message.Text; |
| | 273 | var URL_re = /\bhttps?:\/\/\S+/; |
| | 274 | while (URL_re.test(text)) { |
| | 275 | var match = URL_re.exec(text); |
| | 276 | var leading_text = text.substr(0, match.index); |
| | 277 | if (leading_text) { |
| | 278 | text_span.appendChild(document.createTextNode(leading_text)); |
| | 279 | } |
| | 280 | var anchor = document.createElement("a"); |
| | 281 | anchor.setAttribute("rel", "nofollow"); |
| | 282 | anchor.setAttribute("href", encodeURI(match[0])); |
| | 283 | anchor.appendChild(document.createTextNode(match[0])); |
| | 284 | text_span.appendChild(anchor); |
| | 285 | text = text.substr(match.index + match[0].length); |
| | 286 | } |
| | 287 | if (text) { |
| | 288 | text_span.appendChild(document.createTextNode(text)); |
| | 289 | } |
| | 290 | |
| | 291 | message.UI.appendChild(text_span); |
| | 292 | } |
| | 293 | |
| | 294 | function rcaddmessagetohistory(message) { |
| | 295 | var message_i; |
| | 296 | if (message.Time) { |
| | 297 | for (var i = history.length - 1; ; i--) { |
| | 298 | if (i < 0 || (history[i].Time && message.Time >= history[i].Time)) { |
| | 299 | message_i = i+1; |
| | 300 | history.splice(message_i, 0, message); |
| | 301 | break; |
| | 302 | } |
| | 303 | } |
| | 304 | } else { |
| | 305 | history.push(message); |
| | 306 | message_i = history.length-1; |
| | 307 | } |
| | 308 | if (message_i + 1 < history.length) { |
| | 309 | rcaddmessagetoUI(message, history[message_i + 1].UI); |
| | 310 | } else { |
| | 311 | rcaddmessagetoUI(message, null); |
| | 312 | } |
| | 313 | } |
| | 314 | |
| | 315 | function rcaddmessagetoUI(message, before) { |
| | 316 | if (!message.UI) { |
| | 317 | rcmakemessageUI(message); |
| | 318 | } |
| | 319 | var h = document.getElementById("history"); |
| | 320 | if (before) { |
| | 321 | h.insertBefore(message.UI, before); |
| | 322 | } else { |
| | 323 | h.appendChild(message.UI); |
| | 324 | } |
| | 325 | window.scrollTo(0, document.body.scrollHeight); |
| | 326 | } |
| | 327 | |
| | 328 | function make_seen_key(id, text) { |
| | 329 | return id.replace(/@/g, "@@") + "_@_" + text.replace(/@/g, "@@"); |
| | 330 | } |
| | 331 | |
| | 332 | function rcupdatemessagetime(message) { |
| | 333 | // Set message.Time to be the median of message.ServerTimes |
| | 334 | var times = []; |
| | 335 | for (var i in message.ServerTimes) { |
| | 336 | times.push(message.ServerTimes[i]); |
| | 337 | } |
| | 338 | times.sort(); |
| | 339 | if (times.length % 2) { |
| | 340 | message.Time = times[(times.length-1)/2]; |
| | 341 | } else { |
| | 342 | var middle = times.length/2; |
| | 343 | var difference = times[middle].getTime() - times[middle-1].getTime(); |
| | 344 | message.Time = new Date(times[middle-1].getTime() + difference/2); |
| | 345 | } |
| | 346 | |
| | 347 | // This may have broken history's in-sorted-order invariant |
| | 348 | var hi = history.indexOf(message); |
| | 349 | if ((history[hi-1] && history[hi-1].Time > message.Time) || |
| | 350 | (history[hi+1] && history[hi+1].Time < message.Time)) { |
| | 351 | history.splice(hi,1); |
| | 352 | rcaddmessagetohistory(message); |
| | 353 | } |
| | 354 | |
| | 355 | // Update the UI |
| | 356 | var spans = message.UI.getElementsByTagName("span"); |
| | 357 | for (var i in spans) { |
| | 358 | if (spans[i].getAttribute) { |
| | 359 | var type = spans[i].getAttribute("class"); |
| | 360 | if (type == "servercount") { |
| | 361 | spans[i].firstChild.data = Object.keys(message.ServerTimes).length; |
| | 362 | } else if (type == "timestamp") { |
| | 363 | spans[i].firstChild.data = rcformattime(message.Time); |
| | 364 | } |
| | 365 | } |
| | 366 | } |
| | 367 | } |
| | 368 | |
| | 369 | function rcreceivemessages(server, messages) { |
| | 370 | for (var i in messages) { |
| | 371 | var m = messages[i]; |
| | 372 | m.Time = new Date(m.Time); |
| | 373 | var seen_key = make_seen_key(m.ID, m.Text); |
| | 374 | if (seen_key in seen) { |
| | 375 | seen[seen_key].ServerTimes[server] = m.Time; |
| | 376 | rcupdatemessagetime(seen[seen_key]); |
| | 377 | rcaddservertimestamptohover(seen[seen_key], server); |
| | 378 | } else { |
| | 379 | m.ServerTimes = {}; |
| | 380 | m.ServerTimes[server] = m.Time; |
| | 381 | seen[seen_key] = m; |
| | 382 | rcaddmessagetohistory(m); |
| | 383 | for (var i in servers) { |
| | 384 | rcchangeserverstatus(servers[i], "sad"); |
| | 385 | } |
| | 386 | } |
| | 387 | rcchangeserverstatus(server, "happy"); |
| | 388 | } |
| | 389 | } |
| | 390 | |
| | 391 | function rcfetch(server) { |
| | 392 | var delay = 10000; // TODO: Exponential backoff |
| | 393 | var xhr = new XMLHttpRequest(); |
| | 394 | xhr.onreadystatechange = function() { |
| | 395 | if (this.readyState == this.DONE) { |
| | 396 | if (this.status == 200) { |
| | 397 | var rtxt = this.responseText; |
| | 398 | if (rtxt != null) { |
| | 399 | var messages = JSON.parse(rtxt); |
| | 400 | if (messages != null) { |
| | 401 | delay = 40; |
| | 402 | if (messages.length >= 1 && "Time" in messages[messages.length-1]) { |
| | 403 | since[server] = messages[messages.length-1].Time; |
| | 404 | } |
| | 405 | rcreceivemessages(server, messages); |
| | 406 | } |
| | 407 | } |
| | 408 | } |
| | 409 | window.setTimeout(rcfetch, delay, server); |
| | 410 | } |
| | 411 | } |
| | 412 | var uri = rcserverbase(server) + "/fetch"; |
| | 413 | if (server in since) { |
| | 414 | uri += '?since="' + since[server] + '"'; |
| | 415 | } |
| | 416 | xhr.open("GET", uri); |
| | 417 | xhr.send(); |
| | 418 | } |
| | 419 | |
| | 420 | function rcconnect() { |
| | 421 | makeExpandingArea(document.getElementById("expando")); |
| | 422 | for (var i in servers) { |
| | 423 | rcfetch(servers[i]); |
| | 424 | // Status bar entry |
| | 425 | var status_indicator = document.createElement("span"); |
| | 426 | status_indicator.appendChild(document.createTextNode(servers[i])); |
| | 427 | status_indicator.setAttribute("class", "sad"); |
| | 428 | document.getElementById("status").appendChild(status_indicator); |
| | 429 | } |
| | 430 | } |
| | 431 | |
| | 432 | function rcsend(d, message) { |
| | 433 | message.ID = new Date().getTime() + "-" + session + "-" + Math.random(); |
| | 434 | seen[make_seen_key(message.ID, message.Text)] = message; |
| | 435 | var path = "/speak" + |
| | 436 | "?id=" + encodeURIComponent(message.ID) + |
| | 437 | "&text=" + encodeURIComponent(message.Text); |
| | 438 | for (var i in servers) { |
| | 439 | var xhr = new XMLHttpRequest(); |
| | 440 | xhr.open("POST", rcserverbase(servers[i]) + path); |
| | 441 | xhr.send(); |
| | 442 | } |
| | 443 | } |
| | 444 | |
| | 445 | function rcinput(input) { |
| | 446 | var message; |
| | 447 | var re = /^\/(\S+)(\s(.*))?/; |
| | 448 | var match = re.exec(input); |
| | 449 | if (match) { |
| | 450 | var command = match[1]; |
| | 451 | var rest = match[3]; |
| | 452 | if (command == 'me') { |
| | 453 | message = "* " + rcnick() + " " + rest; |
| | 454 | } else if (command == 'nick') { |
| | 455 | if (rcnick() == rest) { |
| | 456 | rcaddmessagetoUI({'Text': '-!- Your nick is already ' + rcnick(), 'ServerTimes': {}}); |
| | 457 | return; |
| | 458 | } |
| | 459 | message = "*** " + rcnick() + " is now known as " + rest; |
| | 460 | rcsetnick(rest); |
| | 461 | } else { |
| | 462 | rcaddmessagetoUI({'Text': '-!- No such command: ' + command, 'ServerTimes': {}}); |
| | 463 | return; |
| | 464 | } |
| | 465 | } else { |
| | 466 | message = "<" + rcnick() + "> " + input; |
| | 467 | } |
| | 468 | |
| | 469 | var m = {'Text': message, 'ServerTimes': {}}; |
| | 470 | rcaddmessagetohistory(m); |
| | 471 | rcsend(m.UI, m); |
| | 472 | } |
| | 473 | |
| | 474 | function rckeydown(event) { |
| | 475 | if (event.keyCode == 13) { |
| | 476 | if (document.input.say.value) { |
| | 477 | rcinput(document.input.say.value); |
| | 478 | } |
| | 479 | document.input.say.value = ""; |
| | 480 | return false; |
| | 481 | } |
| | 482 | } |
| | 483 | |
| | 484 | // From http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ |
| | 485 | function makeExpandingArea(container) { |
| | 486 | var area = container.querySelector('textarea'); |
| | 487 | var span1 = container.querySelector('span'); |
| | 488 | var span2 = document.getElementById('historypad'); |
| | 489 | if (area.addEventListener) { |
| | 490 | area.addEventListener('input', function() { |
| | 491 | span1.textContent = area.value; |
| | 492 | span2.textContent = area.value; |
| | 493 | }, false); |
| | 494 | span1.textContent = area.value; |
| | 495 | span2.textContent = area.value; |
| | 496 | } else if (area.attachEvent) { |
| | 497 | // IE8 compatibility |
| | 498 | area.attachEvent('onpropertychange', function() { |
| | 499 | span1.innerText = area.value; |
| | 500 | span2.innerText = area.value; |
| | 501 | }); |
| | 502 | span1.innerText = area.value; |
| | 503 | span2.innerText = area.value; |
| | 504 | } |
| | 505 | } |
| | 506 | //--><!]]></script> |
| | 507 | |
| | 508 | </head> |
| | 509 | |
| | 510 | <body onload="rcconnect()"> |
| | 511 | <div id="container"> |
| | 512 | <div class="banner">(You are using <a href="https://github.com/chkno/reliable-chat">Reliable Chat</a>)</div> |
| | 513 | <div id="history"></div> |
| | 514 | <div class="expandingArea" style="visibility: hidden"> |
| | 515 | <pre><span id="historypad"></span><br></pre> |
| | 516 | </div> |
| | 517 | <div id="client"> |
| | 518 | <div id="input"> |
| | 519 | <form name="input" onsubmit="return false" autocomplete="off"> |
| | 520 | <div id="expando" class="expandingArea"> |
| | 521 | <pre><span></span><br></pre> |
| | 522 | <textarea id="say" onkeydown="return rckeydown(event)" autofocus="autofocus"></textarea> |
| | 523 | </div> |
| | 524 | </form></div> |
| | 525 | <div id="status"></div> |
| | 526 | </div> |
| | 527 | </div> |
| | 528 | </body> |
| | 529 | </html> |
projects / reliable-chat / blame_incremental