]>
Commit | Line | Data |
---|---|---|
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 since = {}; | |
23 | var seen = {}; | |
24 | ||
25 | function rcnick() { | |
26 | var nick = localStorage.getItem("nick"); | |
27 | if (nick) { | |
28 | return nick; | |
29 | } | |
30 | return 'anonymous'; | |
31 | } | |
32 | ||
33 | function rcsetnick(new_nick) { | |
34 | localStorage.setItem("nick", new_nick); | |
35 | } | |
36 | ||
37 | function rcserverbase(server) { | |
38 | // Add the default port if server doesn't contain a port number already | |
39 | if (server.indexOf(":") == -1) { | |
40 | return "http://" + server + ":21059"; | |
41 | } else { | |
42 | return "http://" + server; | |
43 | } | |
44 | } | |
45 | ||
46 | function rcchangeserverstatus(server, new_status) { | |
47 | var statusbar = document.getElementById("status"); | |
48 | var spans = statusbar.getElementsByTagName("span"); | |
49 | for (var i in spans) { | |
50 | if (spans[i].firstChild && 'data' in spans[i].firstChild && spans[i].firstChild.data == server) { | |
51 | spans[i].setAttribute("class", new_status); | |
52 | } | |
53 | } | |
54 | } | |
55 | ||
56 | function rcaddmessagetohistory(message) { | |
57 | var d = document.createElement("div"); | |
58 | d.appendChild(document.createTextNode(message)); | |
59 | var h = document.getElementById("history"); | |
60 | h.appendChild(d); | |
61 | window.scrollTo(0, document.body.scrollHeight); | |
62 | return d; | |
63 | } | |
64 | ||
65 | function make_seen_key(id, text) { | |
66 | return id.replace(/@/g, "@@") + "_@_" + text.replace(/@/g, "@@"); | |
67 | } | |
68 | ||
69 | function rcreceivemessages(server, messages) { | |
70 | for (var i in messages) { | |
71 | var seen_key = make_seen_key(messages[i]['ID'], messages[i]['Text']); | |
72 | if (!(seen_key in seen)) { | |
73 | seen[seen_key] = true; | |
74 | rcaddmessagetohistory(messages[i]['Text']); | |
75 | for (var i in servers) { | |
76 | rcchangeserverstatus(servers[i], "sad"); | |
77 | } | |
78 | } | |
79 | rcchangeserverstatus(server, "happy"); | |
80 | } | |
81 | } | |
82 | ||
83 | function rcfetch(server) { | |
84 | var delay = 10000; // TODO: Exponential backoff | |
85 | var xhr = new XMLHttpRequest(); | |
86 | xhr.onreadystatechange = function() { | |
87 | if (this.readyState == this.DONE) { | |
88 | if (this.status == 200) { | |
89 | var rtxt = this.responseText; | |
90 | if (rtxt != null) { | |
91 | var messages = JSON.parse(rtxt); | |
92 | if (messages != null) { | |
93 | rcreceivemessages(server, messages); | |
94 | window.parent.postMessage(rtxt, "*"); | |
95 | delay = 40; | |
96 | if (messages.length >= 1 && "Time" in messages[messages.length-1]) { | |
97 | since[server] = messages[messages.length-1]["Time"]; | |
98 | } | |
99 | } | |
100 | } | |
101 | } | |
102 | window.setTimeout(rcfetch, delay, server); | |
103 | } | |
104 | } | |
105 | var uri = rcserverbase(server) + "/fetch"; | |
106 | if (server in since) { | |
107 | uri += '?since="' + since[server] + '"'; | |
108 | } | |
109 | xhr.open("GET", uri); | |
110 | xhr.send(); | |
111 | } | |
112 | ||
113 | function rcconnect() { | |
114 | for (var i in servers) { | |
115 | rcfetch(servers[i]); | |
116 | // Status bar entry | |
117 | var status_indicator = document.createElement("span"); | |
118 | status_indicator.appendChild(document.createTextNode(servers[i])); | |
119 | status_indicator.setAttribute("class", "sad"); | |
120 | document.getElementById("status").appendChild(status_indicator); | |
121 | } | |
122 | if (rcnick() == 'anonymous') { | |
123 | rcaddmessagetohistory("-!- Set your nick with /nick"); | |
124 | } | |
125 | } | |
126 | ||
127 | function rcsend(d, message) { | |
128 | var id = new Date().getTime() + "-" + session + "-" + Math.random(); | |
129 | seen[make_seen_key(id, message)] = true; | |
130 | var path = "/speak" + | |
131 | "?id=" + encodeURIComponent(id) + | |
132 | "&text=" + encodeURIComponent(message); | |
133 | for (var i in servers) { | |
134 | var uri = rcserverbase(servers[i]) + path; | |
135 | var img = document.createElement("img"); | |
136 | img.setAttribute("src", uri); | |
137 | d.appendChild(img); | |
138 | } | |
139 | } | |
140 | ||
141 | function rckeydown(event) { | |
142 | if (event.keyCode == 13) { | |
143 | var input = document.input.say.value; | |
144 | document.input.say.value = ""; | |
145 | ||
146 | // Check nick change | |
147 | var message; | |
148 | var re = /^\/nick (.*)/; | |
149 | var match = re.exec(input); | |
150 | if (match) { | |
151 | message = "*** " + rcnick() + " is now known as " + match[1]; | |
152 | rcsetnick(match[1]); | |
153 | } else { | |
154 | message = "<" + rcnick() + "> " + input; | |
155 | } | |
156 | ||
157 | // Say the message | |
158 | var d = rcaddmessagetohistory(message); | |
159 | rcsend(d, message); | |
160 | ||
161 | // Remind people to set their nick | |
162 | if (rcnick() == 'anonymous') { | |
163 | rcaddmessagetohistory("-!- Set your nick with /nick"); | |
164 | } | |
165 | } | |
166 | } | |
167 | //--><!]]></script> | |
168 | ||
169 | </head> | |
170 | ||
171 | <body onload="rcconnect()"> | |
172 | <table id="outer-table"> | |
173 | <tr><td id="history"></td></tr> | |
174 | <tr><td id="status"> </td></tr> | |
175 | <tr><td><form name="input" onsubmit="return false" autocomplete="off"> | |
176 | <input id="say" onkeydown="return rckeydown(event)" autocomplete="off"></input> | |
177 | </form></td></tr> | |
178 | </table> | |
179 | </body> | |
180 | </html> |