git.scottworley.com Git - reliable-chat/blob - webclient/rc.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   2   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3
   4 <html xmlns="http://www.w3.org/1999/xhtml">
   5 <head>
   6  <title>Reliable Chat</title>
   7   <style type="text/css"><!--/*--><![CDATA[/*><!--*/
   8         html, body, #outer-table, #history { width: 99.9%; height: 100%; margin: 0; padding: 0 }
   9         #status { background-color: #eef }
  10         #say { width: 100% }
  11         #history { vertical-align: bottom }
  12         img { width: 1px; height: 1px; }
  13         iframe { display: none }
  14         #status span { margin-right: 2em }
  15         #status span.sad { background-color: #fee }
  16         #status span.happy { background-color: #efe }
  17   /*]]>*/--></style>
  18   <script type="text/javascript"><!--//--><![CDATA[//><!--
  19         var servers = ['chkno.net', 'rc2.chkno.net', 'echto.net', 'the-wes.com', 'vibrantlogic.com'];
  20
  21         var session = Math.random();
  22         var seen = {};
  23
  24         function rcnick() {
  25                 var nick = localStorage.getItem("nick");
  26                 if (nick) {
  27                         return nick;
  28                 }
  29                 return 'anonymous';
  30         }
  31
  32         function rcsetnick(new_nick) {
  33                 localStorage.setItem("nick", new_nick);
  34         }
  35
  36         function rcserverbase(server) {
  37                 // Add the default port if server doesn't contain a port number already
  38                 if (server.indexOf(":") == -1) {
  39                         return "http://" + server + ":21059";
  40                 } else {
  41                         return "http://" + server;
  42                 }
  43         }
  44
  45         function rcchangeserverstatus(server, new_status) {
  46                 var statusbar = document.getElementById("status");
  47                 var spans = statusbar.getElementsByTagName("span");
  48                 for (var i in spans) {
  49                         if (spans[i].firstChild && 'data' in spans[i].firstChild && spans[i].firstChild.data == server) {
  50                                 spans[i].setAttribute("class", new_status);
  51                         }
  52                 }
  53         }
  54
  55         function rcaddmessagetohistory(message) {
  56                 var d = document.createElement("div");
  57                 d.appendChild(document.createTextNode(message));
  58                 var h = document.getElementById("history");
  59                 h.appendChild(d);
  60                 window.scrollTo(0, document.body.scrollHeight);
  61                 return d;
  62         }
  63
  64         function make_seen_key(id, text) {
  65                 return id.replace(/@/g, "@@") + "_@_" + text.replace(/@/g, "@@");
  66         }
  67
  68         function receiveMessage(server, time, id, text) {
  69                 var seen_key = make_seen_key(id, text);
  70                 if (!(seen_key in seen)) {
  71                         seen[seen_key] = true;
  72                         rcaddmessagetohistory(text);
  73                         for (var i in servers) {
  74                                 rcchangeserverstatus(servers[i], "sad");
  75                         }
  76                 }
  77                 rcchangeserverstatus(server, "happy");
  78         }
  79
  80         function receiveMessageEvent(event)
  81         {
  82                 for (var i in servers) {
  83                         if (event.origin === rcserverbase(servers[i])) {
  84                                 messages = JSON.parse(event.data);
  85                                 for (var j in messages) {
  86                                         if ('Time' in messages[j] &&
  87                                             'ID'   in messages[j] &&
  88                                             'Text' in messages[j]) {
  89                                                 receiveMessage(servers[i], messages[j]['Time'], messages[j]['ID'], messages[j]['Text']);
  90                                         }
  91                                 }
  92                         }
  93                 }
  94         }
  95
  96         function rcconnect() {
  97                 window.addEventListener("message", receiveMessageEvent, false);
  98                 for (var i in servers) {
  99                         // Create a hidden iframe for same-origin workaround
 100                         var iframe = document.createElement("iframe");
 101                         iframe.setAttribute("src", rcserverbase(servers[i]) + "/frame");
 102                         document.body.insertBefore(iframe, document.body.firstChild);
 103                         // Status bar entry
 104                         var status_indicator = document.createElement("span");
 105                         status_indicator.appendChild(document.createTextNode(servers[i]));
 106                         status_indicator.setAttribute("class", "sad");
 107                         document.getElementById("status").appendChild(status_indicator);
 108                 }
 109                 if (rcnick() == 'anonymous') {
 110                         rcaddmessagetohistory("-!- Set your nick with /nick");
 111                 }
 112         }
 113
 114         function rcsend(d, message) {
 115                 var id = new Date().getTime() + "-" + session + "-" + Math.random();
 116                 seen[make_seen_key(id, message)] = true;
 117                 var path = "/speak" +
 118                         "?id=" + encodeURIComponent(id) +
 119                         "&text=" + encodeURIComponent(message);
 120                 for (var i in servers) {
 121                         var uri = rcserverbase(servers[i]) + path;
 122                         var img = document.createElement("img");
 123                         img.setAttribute("src", uri);
 124                         d.appendChild(img);
 125                 }
 126         }
 127
 128         function rckeydown(event) {
 129                 if (event.keyCode == 13) {
 130                         var input = document.input.say.value;
 131                         document.input.say.value = "";
 132
 133                         // Check nick change
 134                         var message;
 135                         var re = /^\/nick (.*)/;
 136                         var match = re.exec(input);
 137                         if (match) {
 138                                 message = "*** " + rcnick() + " is now known as " + match[1];
 139                                 rcsetnick(match[1]);
 140                         } else {
 141                                 message = "<" + rcnick() + "> " + input;
 142                         }
 143
 144                         // /me support
 145                         var message;
 146                         var re = /^\/me (.*)/;
 147                         var match = re.exec(input);
 148                         var inputme = input.substring(4);
 149                         if (match) {
 150                                 message = "* " + rcnick() + "  " + inputme;
 151                         } else {
 152                                 message = "<" + rcnick() + "> " + input;
 153                         }
 154
 155                         // Remind people to set their nick
 156                         if (rcnick() == 'anonymous') {
 157                                 rcaddmessagetohistory("-!- Set your nick with /nick");
 158                         }
 159
 160                         // Say the message
 161                         var d = rcaddmessagetohistory(message);
 162                         rcsend(d, message);
 163                 }
 164         }
 165   //--><!]]></script>
 166
 167 </head>
 168
 169 <body onload="rcconnect()">
 170         <table id="outer-table">
 171                 <tr><td id="history"></td></tr>
 172                 <tr><td id="status">&nbsp;</td></tr>
 173                 <tr><td><form name="input" onsubmit="return false" autocomplete="off">
 174                         <input id="say" onkeydown="return rckeydown(event)" autocomplete="off" autofocus="autofocus"></input>
 175                         </form></td></tr>
 176         </table>
 177 </body>
 178 </html>