showing server messages. refreshing messages on timer. removing old messages.

examples/html/main.js

@@ -1,5 +1,4 @@
 // This file is part of Mongoose project, http://code.google.com/p/mongoose
-// $Id: main.js 514 2010-05-03 11:06:27Z valenok $
 
 var chat = {
   // Backend URL, string.
@@ -9,25 +8,38 @@ var chat = {
   errorMessageFadeOutTimeoutMs: 2000,
   errorMessageFadeOutTimer: null,
   lastMessageId: 0,
+  getMessagesIntervalMs: 1000,
+};
+
+chat.normalizeText = function(text) {
+  return text.replace('<', '&lt;').replace('>', '&gt;');
 };
 
 chat.refresh = function(data) {
   $.each(data, function(index, entry) {
     var row = $('<div>').addClass('message-row').appendTo('#mml');
     var timestamp = (new Date(entry.timestamp * 1000)).toLocaleTimeString();
-    $('<span>').addClass('message-timestamp').html(
-      '[' + timestamp + ']').prependTo(row);
-    $('<span>').addClass('message-user').html(entry.user + ':').appendTo(row);
-    $('<span>').addClass('message-text').html(entry.text).appendTo(row);
+    $('<span>')
+      .addClass('message-timestamp')
+      .html('[' + timestamp + ']')
+      .prependTo(row);
+    $('<span>')
+      .addClass('message-user')
+      .addClass(entry.user ? '' : 'message-user-server')
+      .html(chat.normalizeText((entry.user || '[server]') + ':'))
+      .appendTo(row);
+    $('<span>')
+      .addClass('message-text')
+      .addClass(entry.user ? '' : 'message-text-server')
+      .html(chat.normalizeText(entry.text))
+      .appendTo(row);
     chat.lastMessageId = Math.max(chat.lastMessageId, entry.id) + 1;
   });
 
-  // TODO(lsm): keep only chat.maxVisibleMessages, delete older ones.
-  /*
-  while ($('#mml').children().length < chat.maxVisibleMessages) {
-    $('#mml').children()[0].remove();
+  // Keep only chat.maxVisibleMessages, delete older ones.
+  while ($('#mml').children().length > chat.maxVisibleMessages) {
+    $('#mml div:first-child').remove();
   }
-  */
 };
 
 chat.getMessages = function() {
@@ -39,6 +51,7 @@ chat.getMessages = function() {
     error: function() {
     },
   });
+  window.setTimeout(chat.getMessages, chat.getMessagesIntervalMs);
 };
 
 chat.handleMenuItemClick = function(ev) {
@@ -60,7 +73,7 @@ chat.handleMessageInput = function(ev) {
   var input = ev.target;
   if (ev.keyCode != 13 || !input.value)
     return;
-  input.disabled = true;
+  //input.disabled = true;
   $.ajax({
     dataType: 'jsonp',
     url: chat.backendUrl + '/ajax/send_message',