X-Git-Url: http://git.scottworley.com/reliable-chat/blobdiff_plain/c3983543f7453a81573a496168049edb38a5d223..591b51678a352ec65de07c3f4dc79f63156ca605:/webclient/rc.html diff --git a/webclient/rc.html b/webclient/rc.html index 591bd21..632956b 100644 --- a/webclient/rc.html +++ b/webclient/rc.html @@ -1,24 +1,86 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> - <html xmlns="http://www.w3.org/1999/xhtml"> +<!-- + reliable-chat - multipath chat + Copyright (C) 2012 Scott Worley <sworley@chkno.net> + Copyright (C) 2012 Jason Hibbs <skitch@gmail.com> + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as + published by the Free Software Foundation, either version 3 of the + License, or (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. +--> <head> <title>Reliable Chat</title> <style type="text/css"><!--/*--><![CDATA[/*><!--*/ - html, body, #outer-table, #history { width: 99.9%; height: 100%; margin: 0; padding: 0 } - #status { background-color: #eef } + html, body { + width: 99.9%; + height: 100%; + margin: 0; + padding: 0; + background-color: #293134; + color: silver; + font-family: monospace; + } + #container { + height: 100%; + } + #status { + width: 100%; + text-align: right; + background-color: #293134; + padding: 5px 5px 5px 0px; + } + #client { + width: 98.5%; + padding: 0px 0px 0px 5px; + height: 50px; + position: fixed; + bottom: 0; + } + #input { + width: 100%; + background-color: #293134; + } #say { width: 100% } - #history { vertical-align: bottom } + #history { + padding: 0px 5px 55px 5px; + vertical-align: bottom + } img { width: 1px; height: 1px; } iframe { display: none } - #status span { margin-right: 2em } - #status span.sad { background-color: #fee } - #status span.happy { background-color: #efe } + #status span { margin-right: 10px; } + #status span.sad { + background-color: #f00; + color: #fff; + border: 1px solid black; + border-radius: 5px; + padding-left: 5px; + padding-right: 5px; + } + #status span.happy { + background-color: #0f0; + color: #000; + border: 1px solid black; + border-radius: 5px; + padding-left: 5px; + padding-right: 5px; + } /*]]>*/--></style> <script type="text/javascript"><!--//--><![CDATA[//><!-- var servers = ['chkno.net', 'rc2.chkno.net', 'echto.net', 'the-wes.com', 'vibrantlogic.com']; var session = Math.random(); + var since = {}; var seen = {}; function rcnick() { @@ -65,50 +127,58 @@ return id.replace(/@/g, "@@") + "_@_" + text.replace(/@/g, "@@"); } - function receiveMessage(server, time, id, text) { - var seen_key = make_seen_key(id, text); - if (!(seen_key in seen)) { - seen[seen_key] = true; - rcaddmessagetohistory(text); - for (var i in servers) { - rcchangeserverstatus(servers[i], "sad"); + function rcreceivemessages(server, messages) { + for (var i in messages) { + var seen_key = make_seen_key(messages[i]['ID'], messages[i]['Text']); + if (!(seen_key in seen)) { + seen[seen_key] = true; + rcaddmessagetohistory(messages[i]['Text']); + for (var i in servers) { + rcchangeserverstatus(servers[i], "sad"); + } } + rcchangeserverstatus(server, "happy"); } - rcchangeserverstatus(server, "happy"); } - function receiveMessageEvent(event) - { - for (var i in servers) { - if (event.origin === rcserverbase(servers[i])) { - messages = JSON.parse(event.data); - for (var j in messages) { - if ('Time' in messages[j] && - 'ID' in messages[j] && - 'Text' in messages[j]) { - receiveMessage(servers[i], messages[j]['Time'], messages[j]['ID'], messages[j]['Text']); + function rcfetch(server) { + var delay = 10000; // TODO: Exponential backoff + var xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function() { + if (this.readyState == this.DONE) { + if (this.status == 200) { + var rtxt = this.responseText; + if (rtxt != null) { + var messages = JSON.parse(rtxt); + if (messages != null) { + rcreceivemessages(server, messages); + delay = 40; + if (messages.length >= 1 && "Time" in messages[messages.length-1]) { + since[server] = messages[messages.length-1]["Time"]; + } + } } } + window.setTimeout(rcfetch, delay, server); } } + var uri = rcserverbase(server) + "/fetch"; + if (server in since) { + uri += '?since="' + since[server] + '"'; + } + xhr.open("GET", uri); + xhr.send(); } function rcconnect() { - window.addEventListener("message", receiveMessageEvent, false); for (var i in servers) { - // Create a hidden iframe for same-origin workaround - var iframe = document.createElement("iframe"); - iframe.setAttribute("src", rcserverbase(servers[i]) + "/frame"); - document.body.insertBefore(iframe, document.body.firstChild); + rcfetch(servers[i]); // Status bar entry var status_indicator = document.createElement("span"); status_indicator.appendChild(document.createTextNode(servers[i])); status_indicator.setAttribute("class", "sad"); document.getElementById("status").appendChild(status_indicator); } - if (rcnick() == 'anonymous') { - rcaddmessagetohistory("-!- Set your nick with /nick"); - } } function rcsend(d, message) { @@ -141,14 +211,20 @@ message = "<" + rcnick() + "> " + input; } + // /me support + var message; + var re = /^\/me (.*)/; + var match = re.exec(input); + var inputme = input.substring(4); + if (match) { + message = "* " + rcnick() + " " + inputme; + } else { + message = "<" + rcnick() + "> " + input; + } + // Say the message var d = rcaddmessagetohistory(message); rcsend(d, message); - - // Remind people to set their nick - if (rcnick() == 'anonymous') { - rcaddmessagetohistory("-!- Set your nick with /nick"); - } } } //--><!]]></script> @@ -156,12 +232,15 @@ </head> <body onload="rcconnect()"> - <table id="outer-table"> - <tr><td id="history"></td></tr> - <tr><td id="status"> </td></tr> - <tr><td><form name="input" onsubmit="return false" autocomplete="off"> - <input id="say" onkeydown="return rckeydown(event)" autocomplete="off"></input> - </form></td></tr> - </table> + <div id="container"> + <div id="history"></div> + <div id="client"> + <div id="input"> + <form name="input" onsubmit="return false" autocomplete="off"> + <input id="say" onkeydown="return rckeydown(event)" autocomplete="off" autofocus="autofocus"></input> + </form></div> + <div id="status"> </div> + </div> + </div> </body> </html>