]>
Commit | Line | Data |
---|---|---|
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: 99.9%; | |
27 | height: 100%; | |
28 | margin: 0; | |
29 | padding: 0; | |
30 | background-color: #293134; | |
31 | color: silver; | |
32 | font-family: monospace; | |
33 | } | |
34 | #container { | |
35 | height: 100%; | |
36 | } | |
37 | #status { | |
38 | width: 100%; | |
39 | text-align: right; | |
40 | background-color: #293134; | |
41 | padding: 5px 5px 5px 0px; | |
42 | } | |
43 | #client { | |
44 | width: 98.5%; | |
45 | padding: 0px 0px 0px 5px; | |
46 | height: 50px; | |
47 | position: fixed; | |
48 | bottom: 0; | |
49 | } | |
50 | #input { | |
51 | width: 100%; | |
52 | background-color: #293134; | |
53 | } | |
54 | #say { width: 100% } | |
55 | #history { | |
56 | padding: 0px 5px 55px 5px; | |
57 | vertical-align: bottom | |
58 | } | |
59 | img { width: 1px; height: 1px; } | |
60 | iframe { display: none } | |
61 | #status span { margin-right: 10px; } | |
62 | #status span.sad { | |
63 | background-color: #f00; | |
64 | color: #fff; | |
65 | border: 1px solid black; | |
66 | border-radius: 5px; | |
67 | padding-left: 5px; | |
68 | padding-right: 5px; | |
69 | } | |
70 | #status span.happy { | |
71 | background-color: #0f0; | |
72 | color: #000; | |
73 | border: 1px solid black; | |
74 | border-radius: 5px; | |
75 | padding-left: 5px; | |
76 | padding-right: 5px; | |
77 | } | |
78 | /*]]>*/--></style> | |
79 | <script type="text/javascript"><!--//--><![CDATA[//><!-- | |
80 | var servers = ['chkno.net', 'rc2.chkno.net', 'echto.net', 'the-wes.com', 'vibrantlogic.com']; | |
81 | ||
82 | var session = Math.random(); // For outgoing message IDs | |
83 | var since = {}; // server -> time: For fetch?since= | |
84 | var seen = {}; // seen_key -> true | |
85 | ||
86 | function rcnick() { | |
87 | var nick = localStorage.getItem("nick"); | |
88 | if (nick) { | |
89 | return nick; | |
90 | } | |
91 | return 'anonymous'; | |
92 | } | |
93 | ||
94 | function rcsetnick(new_nick) { | |
95 | localStorage.setItem("nick", new_nick); | |
96 | } | |
97 | ||
98 | function rcserverbase(server) { | |
99 | // Add the default port if server doesn't contain a port number already | |
100 | if (server.indexOf(":") == -1) { | |
101 | return "http://" + server + ":21059"; | |
102 | } else { | |
103 | return "http://" + server; | |
104 | } | |
105 | } | |
106 | ||
107 | function rcchangeserverstatus(server, new_status) { | |
108 | var statusbar = document.getElementById("status"); | |
109 | var spans = statusbar.getElementsByTagName("span"); | |
110 | for (var i in spans) { | |
111 | if (spans[i].firstChild && 'data' in spans[i].firstChild && spans[i].firstChild.data == server) { | |
112 | spans[i].setAttribute("class", new_status); | |
113 | } | |
114 | } | |
115 | } | |
116 | ||
117 | function rcformattime(t) { | |
118 | var d = t.getDay(); | |
119 | d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d]; | |
120 | var h = t.getHours(); | |
121 | var m = t.getMinutes(); | |
122 | var s = t.getSeconds(); | |
123 | function pad(x) { | |
124 | return (x < 10 ? "0" : "") + x; | |
125 | } | |
126 | return d + " " + pad(h) + ":" + pad(m) + ":" + pad(s); | |
127 | } | |
128 | ||
129 | function rcaddmessagetohistory(message) { | |
130 | var d = document.createElement("div"); | |
131 | var text = (message.Time ? rcformattime(message.Time) : "") + " " + message.Text; | |
132 | d.appendChild(document.createTextNode(text)); | |
133 | var h = document.getElementById("history"); | |
134 | h.appendChild(d); | |
135 | window.scrollTo(0, document.body.scrollHeight); | |
136 | return d; | |
137 | } | |
138 | ||
139 | function make_seen_key(id, text) { | |
140 | return id.replace(/@/g, "@@") + "_@_" + text.replace(/@/g, "@@"); | |
141 | } | |
142 | ||
143 | function rcreceivemessages(server, messages) { | |
144 | for (var i in messages) { | |
145 | var m = messages[i]; | |
146 | m.Time = new Date(m.Time); | |
147 | var seen_key = make_seen_key(m.ID, m.Text); | |
148 | if (!(seen_key in seen)) { | |
149 | seen[seen_key] = true; | |
150 | rcaddmessagetohistory(m); | |
151 | for (var i in servers) { | |
152 | rcchangeserverstatus(servers[i], "sad"); | |
153 | } | |
154 | } | |
155 | rcchangeserverstatus(server, "happy"); | |
156 | } | |
157 | } | |
158 | ||
159 | function rcfetch(server) { | |
160 | var delay = 10000; // TODO: Exponential backoff | |
161 | var xhr = new XMLHttpRequest(); | |
162 | xhr.onreadystatechange = function() { | |
163 | if (this.readyState == this.DONE) { | |
164 | if (this.status == 200) { | |
165 | var rtxt = this.responseText; | |
166 | if (rtxt != null) { | |
167 | var messages = JSON.parse(rtxt); | |
168 | if (messages != null) { | |
169 | rcreceivemessages(server, messages); | |
170 | delay = 40; | |
171 | if (messages.length >= 1 && "Time" in messages[messages.length-1]) { | |
172 | since[server] = messages[messages.length-1].Time; | |
173 | } | |
174 | } | |
175 | } | |
176 | } | |
177 | window.setTimeout(rcfetch, delay, server); | |
178 | } | |
179 | } | |
180 | var uri = rcserverbase(server) + "/fetch"; | |
181 | if (server in since) { | |
182 | uri += '?since="' + since[server] + '"'; | |
183 | } | |
184 | xhr.open("GET", uri); | |
185 | xhr.send(); | |
186 | } | |
187 | ||
188 | function rcconnect() { | |
189 | for (var i in servers) { | |
190 | rcfetch(servers[i]); | |
191 | // Status bar entry | |
192 | var status_indicator = document.createElement("span"); | |
193 | status_indicator.appendChild(document.createTextNode(servers[i])); | |
194 | status_indicator.setAttribute("class", "sad"); | |
195 | document.getElementById("status").appendChild(status_indicator); | |
196 | } | |
197 | } | |
198 | ||
199 | function rcsend(d, message) { | |
200 | var id = new Date().getTime() + "-" + session + "-" + Math.random(); | |
201 | seen[make_seen_key(id, message)] = true; | |
202 | var path = "/speak" + | |
203 | "?id=" + encodeURIComponent(id) + | |
204 | "&text=" + encodeURIComponent(message); | |
205 | for (var i in servers) { | |
206 | var uri = rcserverbase(servers[i]) + path; | |
207 | var img = document.createElement("img"); | |
208 | img.setAttribute("src", uri); | |
209 | d.appendChild(img); | |
210 | } | |
211 | } | |
212 | ||
213 | function rcinput(input) { | |
214 | var message; | |
215 | var re = /^\/([a-z]+) (.*)/ | |
216 | var match = re.exec(input); | |
217 | if (match && match[1] == 'me') { | |
218 | message = "* " + rcnick() + " " + match[2]; | |
219 | } else if (match && match[1] == 'nick') { | |
220 | message = "*** " + rcnick() + " is now known as " + match[2]; | |
221 | rcsetnick(match[2]); | |
222 | } else { | |
223 | message = "<" + rcnick() + "> " + input; | |
224 | } | |
225 | ||
226 | var d = rcaddmessagetohistory({'Text': message}); | |
227 | rcsend(d, message); | |
228 | } | |
229 | ||
230 | function rckeydown(event) { | |
231 | if (event.keyCode == 13) { | |
232 | rcinput(document.input.say.value); | |
233 | document.input.say.value = ""; | |
234 | ||
235 | } | |
236 | } | |
237 | //--><!]]></script> | |
238 | ||
239 | </head> | |
240 | ||
241 | <body onload="rcconnect()"> | |
242 | <div id="container"> | |
243 | <div id="history"></div> | |
244 | <div id="client"> | |
245 | <div id="input"> | |
246 | <form name="input" onsubmit="return false" autocomplete="off"> | |
247 | <input id="say" onkeydown="return rckeydown(event)" autocomplete="off" autofocus="autofocus"></input> | |
248 | </form></div> | |
249 | <div id="status"> </div> | |
250 | </div> | |
251 | </div> | |
252 | </body> | |
253 | </html> |