git.scottworley.com Git - reliable-chat/blob

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

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, version 3.

13 This program is distributed in the hope that it will be useful,

14 but WITHOUT ANY WARRANTY; without even the implied warranty of

15 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

16 GNU Affero General Public License for more details.

18 You should have received a copy of the GNU Affero General Public License

19 along with this program. If not, see <http://www.gnu.org/licenses/>.

20 -->

21 <head>

22 <title>Reliable Chat</title>

   <style type="text/css"><!--/*--><![CDATA[/*><!--*/

24 html, body {

25 width: 100%;

26 height: 100%;

27 margin: 0;

28 padding: 0;

29 background-color: #293134;

30 color: silver;

31 font-family: monospace;

32 }

33 a {

34 color: #ddd;

35 }

36 #container {

37 height: 100%;

38 }

39 #status {

40 width: 100%;

41 text-align: right;

42 background-color: #293134;

43 padding: 5px 5px 5px 0px;

44 }

45 #client {

46 width: 100%;

47 position: fixed;

48 bottom: 0;

49 display: none;

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 .status {

65 color: #dd8;

66 }

67 .local.self {

68 color: #d8d;

69 }

70 .self {

71 color: #8d8;

72 }

73 .me {

74 color: #bbd;

75 }

76 .servercount {

77 margin-right: -0.5em;

78 font-size: 70%;

79 }

80 .timestamp:hover, .timestamp:hover .servertimestamps {

81 background-color: #556;

82 }

83 .timestamp:hover .servertimestamps {

84 display: block;

85 }

86 .servertimestamps {

87 display: none;

88 position: absolute;

89 left: 3em;

90 z-index: 1;

91 border: 1px solid black;

92 border-radius: 5px;

93 padding-left: 5px;

94 padding-right: 5px;

95 }

96 img { width: 1px; height: 1px; }

97 iframe { display: none }

98 #status span { margin-right: 10px; }

99 #status span.sad {

100 background-color: #f00;

101 color: #fff;

102 border: 1px solid black;

103 border-radius: 5px;

104 padding-left: 5px;

105 padding-right: 5px;

106 }

107 #status span.happy {

108 background-color: #0f0;

109 color: #000;

110 border: 1px solid black;

111 border-radius: 5px;

112 padding-left: 5px;

113 padding-right: 5px;

114 }

115 #getnick {

116 padding-left: 3em;

117 display: none;

118 }

119

120 /* BEGIN expando input box trick kindly provided by http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ */

121 .expandingArea {

122 position: relative;

123 border: 1px solid #888;

124 background: silver;

125 }

126 .expandingArea > textarea,

127 .expandingArea > pre {

128 margin: 0;

129 outline: 0;

130 border: 0;

131 padding: 5px;

132 background: transparent;

133 font: 400 13px/16px helvetica, arial, sans-serif;

134 /* Make the text soft-wrap */

135 white-space: pre-wrap;

136 word-wrap: break-word;

137 }

138 .expandingArea > textarea {

139 /* The border-box box model is used to allow

140 * padding whilst still keeping the overall width

141 * at exactly that of the containing element.

142 */

143 -webkit-box-sizing: border-box;

144 -moz-box-sizing: border-box;

145 -ms-box-sizing: border-box;

146 box-sizing: border-box;

147 width: 100%;

148 /* Hide any scrollbars */

149 overflow: hidden;

150 position: absolute;

151 top: 0;

152 left: 0;

153 height: 100%;

154 /* Remove WebKit user-resize widget */

155 resize: none;

156 }

157 .expandingArea > pre {

158 display: block;

159 /* Hide the text; just using it for sizing */

160 visibility: hidden;

161 }

162 /* END expando input box trick kindly provided by http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ */

163

164 /*]]>*/--></style>

   <script type="text/javascript"><!--//--><![CDATA[//><!--

166 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'];

167

168 var session = Math.random(); // For outgoing message IDs

169 var since = {}; // server -> time: For fetch?since=

170 var seen = {}; // seen_key -> message

171 var hist = []; // List of messages sorted by Time

172 // Messages have these fields:

173 // Time: The timestamp. Median of ServerTimes

174 // ID: Some unique string for deduping

175 // Text: The text of the message

176 // ServerTimes: server -> timestamp

177 // UI: The DOM node for this message in the UI

178

179 function rcnick() {

180 return localStorage.getItem("nick");

181 }

182

183 function rcsetnick(new_nick) {

184 localStorage.setItem("nick", new_nick);

185 }

186

187 function rcserverbase(server) {

188 // Add the default port if server doesn't contain a port number already

189 if (server.indexOf(":") == -1) {

190 return "http://" + server + ":21059";

191 } else {

192 return "http://" + server;

193 }

194 }

195

196 function rcchangeserverstatus(server, new_status) {

197 var statusbar = document.getElementById("status");

198 var spans = statusbar.getElementsByTagName("span");

199 for (var i in spans) {

200 if (spans[i].firstChild && 'data' in spans[i].firstChild && spans[i].firstChild.data == server) {

201 spans[i].setAttribute("class", new_status);

202 }

203 }

204 }

205

206 function rcpad2(x) {

207 return (x < 10 ? "0" : "") + x;

208 }

209 function rcpad3(x) {

210 return (x < 10 ? "00" : (x < 100 ? "0" : "")) + x;

211 }

212

213 function rcformattime(t) {

214 var d = t.getDay();

215 d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d];

216 var h = t.getHours();

217 var m = t.getMinutes();

218 var s = t.getSeconds();

219 return d + " " + rcpad2(h) + ":" + rcpad2(m) + ":" + rcpad2(s);

220 }

221

222 function rcaddservertimestamptohover(message, server) {

223 var divs = message.UI.getElementsByTagName("div");

224 var t = message.ServerTimes[server];

225 for (var i in divs) {

226 if (divs[i].getAttribute && divs[i].getAttribute("class") == "servertimestamps") {

227 var d = document.createElement("div");

228 var text = t.getFullYear() + "-" +

229 rcpad2(t.getMonth()) + "-" +

230 rcpad2(t.getDay()) + " " +

231 rcformattime(t) + "." +

232 rcpad3(t.getMilliseconds()) + " " +

233 server;

234 d.appendChild(document.createTextNode(text));

235 divs[i].appendChild(d);

236 }

237 }

238 }

239

240 function rcmakemessageUI(message) {

241 message.UI = document.createElement("div");

242

243 // Server count

244 var servercount = document.createElement("span");

245 servercount.setAttribute("class", "servercount");

246 servercount.appendChild(document.createTextNode(Object.keys(message.ServerTimes).length));

247 message.UI.appendChild(servercount);

248 message.UI.appendChild(document.createTextNode(" "));

249

250 // Timestamp

251 var timestamp_text = message.Time ? rcformattime(message.Time) : "";

252 var timestamp = document.createElement("span");

253 timestamp.setAttribute("class", "timestamp");

254 timestamp.appendChild(document.createTextNode(timestamp_text));

255 message.UI.appendChild(timestamp);

256 message.UI.appendChild(document.createTextNode(" "));

257

258 // Timestamp hover

259 var timestamp_hover = document.createElement("div");

260 timestamp_hover.setAttribute("class", "servertimestamps");

261 timestamp.appendChild(timestamp_hover);

262 for (var server in message.ServerTimes) {

263 rcaddservertimestamptohover(message, server);

264 }

265

266 // Classify different message types

267 var text_span = document.createElement("span");

268 var type;

269 if (/^\*\*\* /.test(message.Text)) {

270 type = "status";

271 } else if (/^\* /.test(message.Text)) {

272 type = "me";

273 } else if (/^-!- /.test(message.Text)) {

274 type = "local";

275 } else {

276 type = "text";

277 }

278 if (Object.keys(message.ServerTimes).length == 0) {

279 type += " self";

280 }

281 text_span.setAttribute("class", type);

282

283 // URL detection

284 var text = message.Text;

285 var URL_re = /\bhttps?:\/\/\S+/;

286 while (URL_re.test(text)) {

287 var match = URL_re.exec(text);

288 var leading_text = text.substr(0, match.index);

289 if (leading_text) {

290 text_span.appendChild(document.createTextNode(leading_text));

291 }

292 var anchor = document.createElement("a");

293 anchor.setAttribute("rel", "nofollow");

294 anchor.setAttribute("href", encodeURI(match[0]));

295 anchor.appendChild(document.createTextNode(match[0]));

296 text_span.appendChild(anchor);

297 text = text.substr(match.index + match[0].length);

298 }

299 if (text) {

300 text_span.appendChild(document.createTextNode(text));

301 }

302

303 message.UI.appendChild(text_span);

304 }

305

306 function rcaddmessagetohistory(message) {

307 var message_i;

308 if (message.Time) {

309 for (var i = hist.length - 1; ; i--) {

310 if (i < 0 || (hist[i].Time && message.Time >= hist[i].Time)) {

311 message_i = i+1;

312 hist.splice(message_i, 0, message);

313 break;

314 }

315 }

316 } else {

317 hist.push(message);

318 message_i = hist.length-1;

319 }

320 if (message_i + 1 < hist.length) {

321 rcaddmessagetoUI(message, hist[message_i + 1].UI);

322 } else {

323 rcaddmessagetoUI(message, null);

324 }

325 }

326

327 function rcaddmessagetoUI(message, before) {

328 if (!message.UI) {

329 rcmakemessageUI(message);

330 }

331 var h = document.getElementById("history");

332 if (before) {

333 h.insertBefore(message.UI, before);

334 } else {

335 h.appendChild(message.UI);

336 }

337 window.scrollTo(0, document.body.scrollHeight);

338 }

339

340 function make_seen_key(id, text) {

341 return id.replace(/@/g, "@@") + "_@_" + text.replace(/@/g, "@@");

342 }

343

344 function rcupdatemessagetime(message) {

345 // Set message.Time to be the median of message.ServerTimes

346 var times = [];

347 for (var i in message.ServerTimes) {

348 times.push(message.ServerTimes[i]);

349 }

350 times.sort();

351 if (times.length % 2) {

352 message.Time = times[(times.length-1)/2];

353 } else {

354 var middle = times.length/2;

355 var difference = times[middle].getTime() - times[middle-1].getTime();

356 message.Time = new Date(times[middle-1].getTime() + difference/2);

357 }

358

359 // This may have broken hist's in-sorted-order invariant

360 var hi = hist.indexOf(message);

361 if ((hist[hi-1] && hist[hi-1].Time > message.Time) ||

362 (hist[hi+1] && hist[hi+1].Time < message.Time)) {

363 hist.splice(hi,1);

364 rcaddmessagetohistory(message);

365 }

366

367 // Update the UI

368 var spans = message.UI.getElementsByTagName("span");

369 for (var i in spans) {

370 if (spans[i].getAttribute) {

371 var type = spans[i].getAttribute("class");

372 if (type == "servercount") {

373 spans[i].firstChild.data = Object.keys(message.ServerTimes).length;

374 } else if (type == "timestamp") {

375 spans[i].firstChild.data = rcformattime(message.Time);

376 }

377 }

378 }

379 }

380

381 function rcreceivemessages(server, messages) {

382 for (var i in messages) {

383 var m = messages[i];

384 m.Time = new Date(m.Time);

385 var seen_key = make_seen_key(m.ID, m.Text);

386 if (seen_key in seen) {

387 seen[seen_key].ServerTimes[server] = m.Time;

388 rcupdatemessagetime(seen[seen_key]);

389 rcaddservertimestamptohover(seen[seen_key], server);

390 } else {

391 m.ServerTimes = {};

392 m.ServerTimes[server] = m.Time;

393 seen[seen_key] = m;

394 rcaddmessagetohistory(m);

395 for (var i in servers) {

396 rcchangeserverstatus(servers[i], "sad");

397 }

398 }

399 rcchangeserverstatus(server, "happy");

400 }

401 }

402

403 function rcfetch(server) {

404 var delay = 10000; // TODO: Exponential backoff

405 var xhr = new XMLHttpRequest();

406 xhr.onreadystatechange = function() {

407 if (this.readyState == this.DONE) {

408 if (this.status == 200) {

409 var rtxt = this.responseText;

410 if (rtxt != null) {

411 var messages = JSON.parse(rtxt);

412 if (messages != null) {

413 delay = 40;

414 if (messages.length >= 1 && "Time" in messages[messages.length-1]) {

415 since[server] = messages[messages.length-1].Time;

416 }

417 rcreceivemessages(server, messages);

418 }

419 }

420 }

421 window.setTimeout(rcfetch, delay, server);

422 }

423 }

424 var uri = rcserverbase(server) + "/fetch";

425 if (server in since) {

426 uri += '?since="' + since[server] + '"';

427 }

428 xhr.open("GET", uri);

429 xhr.send();

430 }

431

432 function rcconnect() {

433 makeExpandingArea(document.getElementById("expando"));

434 for (var i in servers) {

435 rcfetch(servers[i]);

436 // Status bar entry

437 var status_indicator = document.createElement("span");

438 status_indicator.appendChild(document.createTextNode(servers[i]));

439 status_indicator.setAttribute("class", "sad");

440 document.getElementById("status").appendChild(status_indicator);

441 }

442 }

443

444 function rcstart() {

445 if (rcnick()) {

446 document.getElementById("client").style.display = 'block';

447 rcconnect();

448 } else {

449 document.getElementById("getnick").style.display = 'block';

450 }

451 }

452

453 function rcsend(d, message) {

454 message.ID = new Date().getTime() + "-" + session + "-" + Math.random();

455 seen[make_seen_key(message.ID, message.Text)] = message;

456 var path = "/speak" +

457 "?id=" + encodeURIComponent(message.ID) +

458 "&text=" + encodeURIComponent(message.Text);

459 for (var i in servers) {

460 var xhr = new XMLHttpRequest();

461 xhr.open("POST", rcserverbase(servers[i]) + path);

462 xhr.send();

463 }

464 }

465

466 function rcinput(input) {

467 var message;

468 var re = /^\/(\S+)(\s(.*))?/;

469 var match = re.exec(input);

470 if (match) {

471 var command = match[1];

472 var rest = match[3];

473 if (command == 'me') {

474 message = "* " + rcnick() + " " + rest;

475 } else if (command == 'nick') {

476 if (rcnick() == rest) {

477 rcaddmessagetoUI({'Text': '-!- Your nick is already ' + rcnick(), 'ServerTimes': {}});

478 return;

479 }

480 if (rest) {

481 message = "*** " + rcnick() + " is now known as " + rest;

482 rcsetnick(rest);

483 } else {

484 rcaddmessagetoUI({'Text': '-!- /nick requires an argument', 'ServerTimes': {}});

485 return;

486 }

487 } else {

488 rcaddmessagetoUI({'Text': '-!- No such command: ' + command, 'ServerTimes': {}});

489 return;

490 }

491 } else {

492 message = "<" + rcnick() + "> " + input;

493 }

494

495 var m = {'Text': message, 'ServerTimes': {}};

496 rcaddmessagetohistory(m);

497 rcsend(m.UI, m);

498 }

499

500 function rckeydown(event) {

501 if (event.keyCode == 13) {

502 if (document.input.say.value) {

503 rcinput(document.input.say.value);

504 }

505 document.input.say.value = "";

506 return false;

507 }

508 }

509

510 function rcsetinitialnick() {

511 if (document.getnickform.initial_nick.value) {

512 rcsetnick(document.getnickform.initial_nick.value);

513 document.getElementById("getnick").style.display = 'none';

514 document.getElementById("client").style.display = 'block';

515 rcconnect();

516 }

517 return false;

518 }

519

520 // From http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

521 function makeExpandingArea(container) {

522 var area = container.querySelector('textarea');

523 var span1 = container.querySelector('span');

524 var span2 = document.getElementById('historypad');

525 if (area.addEventListener) {

526 area.addEventListener('input', function() {

527 span1.textContent = area.value;

528 span2.textContent = area.value;

529 }, false);

530 span1.textContent = area.value;

531 span2.textContent = area.value;

532 } else if (area.attachEvent) {

533 // IE8 compatibility

534 area.attachEvent('onpropertychange', function() {

535 span1.innerText = area.value;

536 span2.innerText = area.value;

537 });

538 span1.innerText = area.value;

539 span2.innerText = area.value;

540 }

541 }

542 //--><!]]></script>

543

544 </head>

545

546 <body onload="rcstart()">

547 <div id="container">

                 <div class="banner">(You are using <a href="https://github.com/chkno/reliable-chat">Reliable Chat</a>)</div>

549 <div id="history"></div>

                 <div class="expandingArea" style="visibility: hidden">

551 <pre><span id="historypad"></span><br></pre>

552 </div>

553 <div id="getnick">

554 <h1>Set your nick</h1>

                         <form name="getnickform" onsubmit="return rcsetinitialnick();">

                                 <input id="initial_nick" type="text"></input>

                                 <input type="submit" value="ok"></input>

558 </form>

559 </div>

560 <div id="client">

561 <div id="input">

                                 <form name="input" onsubmit="return false" autocomplete="off">

                                         <div id="expando" class="expandingArea">

564 <pre><span></span><br></pre>

                                                 <textarea id="say" onkeydown="return rckeydown(event)" autofocus="autofocus"></textarea>

566 </div>

567 </form></div>

568 <div id="status"></div>

569 </div>

570 </div>

571 </body>

572 </html>