ajax_im.js

ajax 聊天室,实现多人聊天,无刷新!

      }
   } else {
      error = 'Passwords do not match!';
   }
   $('register_error_msg').innerHTML = error;
   $('register_error_msg').style.display = 'block';
   new Effect.Shake('modal');
   registerButton.onclick = function() { register();return false; };
}

function ping() {
   var xhConn = new XHConn();
   
   xhConn.connect(pingTo, "POST", "call=ping&from="+user+"&pwd="+pass+"&away="+isAway,
      function(xh) {
         var i;

         if(xh.responseText == 'not_logged_in') {
            logout();
            return;
         }     
         
         if(trim(xh.responseText).length == 0) return;
         
         var response = xh.responseText.parseJSON();
         
         var from, data;
         for(i=0; i<response.numMessages; i++) {
            from = response.messages[i].sender;
            data = response.messages[i].message;
            who  = (response.messages[i].recipient == user ? from : response.messages[i].recipient);
         
            if(!$(who + '_im')) {
               createIMWindow(who, who);
            } else {
               if(!IMWindows[who].detached && !IMWindows[who].isVisible()) {
                  IMWindows[who].show();
                  setTimeout("scrollToBottom('" + who + "_rcvd')", 125);
               }
            }
            
            Stamp = new Date(); var h = String(Stamp.getHours()); var m = String(Stamp.getMinutes()); var s = String(Stamp.getSeconds());
            h = (h.length > 1) ? h : "0"+h; m = (m.length > 1) ? m : "0"+m;
            var curIM = (!IMWindows[who].detached ? $(who+"_rcvd") : IMWindows[who].popup.$(who+"_rcvd"));
            data = data.replace(/(\s|\n|>|^)(\w+:\/\/[^<\s\n]+)/, '$1<a href="$2" target="_blank">$2</a>');
            data = emoteReplace(data, smilies);
            if(data.replace(/<([^>]+)>/ig, '').indexOf('/me') == 0)
               curIM.innerHTML = curIM.innerHTML + "<b class=\"userB\">[" + h + ":" + m + "] <i>" + from + ' ' + data.replace(/<([^>]+)>/ig, '').replace(/\/me/, '') + "</i></b><br>\n";
            else
               curIM.innerHTML = curIM.innerHTML + "<b class=\"userB\">[" + h + ":" + m + "] " + from + ":</b> " + data + "<br>\n";
            curIM.scrollTop = curIM.scrollHeight - curIM.clientHeight + 6;
            
            if(curIM.innerHTML.toLowerCase().replace(/<\S[^>]*>/g, '').indexOf(user.toLowerCase()+': (auto-reply)') == -1 && isAway == 1 && who == from) {
               $(from+"_sendBox").value = '(Auto-Reply) ' + awayMessage;
               sendMessage(from);
            }
            
            if(Windows.getFocusedWindow().getId() != who + "_im" && pulsateTitles == true) {
               new Effect.Pulsate(who + '_im_top');
            }

            if(titlebarBlinker == true && useBlinker == true) {
               clearTimeout(blinkerTimer);
               setTimeout("titlebarBlink('"+who+"', \""+data.replace(/\"/, '\"').replace(/<([^>]+)>/ig, '')+"\", 0)", blinkSpeed);
            }
            curIM = null;
         }
         if(response.numMessages > 0 && audioNotify == true) soundManager.play('msg_in', 1, true);
                
         from = null; data = null;
         var group = '';
         var buddy = '';
         var event = '';
         for(i=0; i<response.numEvents; i++) {
            from = response.events[i].sender;
            data = response.events[i].event;
            who  = (response.events[i].recipient == user ? from : response.events[i].recipient);
            
            event = data.split(',');
            switch(event[0]) {
               case 'status':
                  group = response.events[i].group;
                  if(!$(group.replace(/\s/, '_')+'_group') && group != 'toJSONString') addGroupToList(group);
                  if(!$(from+'_blItem')) {
                     addBuddyToList(from, group);
                     buddyList[group][buddyList[group].length] = from;
                     $(from+'_blItem').style.display='block';
                  }
                  
                  if(event[1] == 0 || event[1] == 50) {
                     moveBuddy(from, 'Offline');
                     $(from+'_blImg').src = 'images/offline.png';
                  } else if(event[1] == 2) {
                     moveBuddy(from, group);
                     $(from+'_blImg').src = 'images/away.png';            
                  } else {
                     moveBuddy(from, group);
                     $(from+'_blImg').src = 'images/online.png';
                  }
                  break;
               case 'chat':
                  var rcvdBox = $(event[2]+"_rcvd");
                  Stamp = new Date(); var h = String(Stamp.getHours()); var m = String(Stamp.getMinutes()); var s = String(Stamp.getSeconds());
                  h = (h.length > 1) ? h : "0"+h; m = (m.length > 1) ? m : "0"+m;
                  if(event[1] == 'join') {
                     if(!$(from+'_blItem')) addBuddyToList(from, event[2]);
                     rcvdBox.innerHTML = rcvdBox.innerHTML + "<b class=\"userB\">[" + h + ":" + m + "] <i>"+from+" has joined.</i></b><br>";
                     scrollToBottom(event[2]+"_rcvd");
                  } else if(event[1] == 'left') {
                     if(typeof(response.events[i]['group']) == 'object') deleteBuddyFromList(from);
                     rcvdBox.innerHTML = rcvdBox.innerHTML + "<b class=\"userB\">[" + h + ":" + m + "] <i>"+from+" has left.</i></b><br>";
                     scrollToBottom(event[2]+"_rcvd");
                  }
                  break;
            }
            event = null;
         }
         from = null; data = null; who = null;
         
      }
   );
   xhConn = null;
}

function sendMessage(winName) {
   var xhConn = new XHConn();
   
   var isBold      = ($(winName + '_sendBox').style.fontWeight == '400' ? 'false' : 'true');
   var isItalic    = ($(winName + '_sendBox').style.fontStyle == 'normal' ? 'false' : 'true');
   var isUnderline = ($(winName + '_sendBox').style.textDecoration == 'none' ? 'false' : 'true');
   var fontName    = $(winName + '_setFont').innerHTML;
   var fontSize    = $(winName + '_setFontSize').innerHTML;
   var fontColor   = $(winName + '_setFontColorColor').style.backgroundColor;

   if(trim($(winName+"_sendBox").value).length > 0) {
      var sBox = $(winName + '_sendBox').value;
      $(winName+"_sendBox").value = '';
      xhConn.connect(pingTo, "POST", "call=send&from="+user+"&pwd="+pass+"&recipient="+winName+"&bold="+isBold+"&italic="+isItalic+"&underline="+isUnderline+"&font="+fontName+"&fontsize="+fontSize+"&fontcolor="+fontColor+"&msg="+encodeURIComponent(sBox.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/g, "<amp>")),
         function(xh) {
            if(xh.responseText == 'sent') {
               // do nothing!
            } else if(xh.responseText == 'not_online') {
               var rcvdBox = $(winName+"_rcvd");
               rcvdBox.innerHTML = rcvdBox.innerHTML + '<span style="color:#FF0000"><b>Error: Your message could not be sent because the recipient is not logged in.</b></span><br>';
               scrollToBottom(winName+"_rcvd");
            } else if(xh.responseText == 'too_long') {
               var rcvdBox = $(winName+"_rcvd");
               rcvdBox.innerHTML = rcvdBox.innerHTML + '<span style="color:#FF0000"><b>Error: Your message could not be sent because it is too long.</b></span><br>';
               scrollToBottom(winName+"_rcvd");
            } else if(xh.responseText == 'not_logged_in') {
               logout();
            } else {
               alert('An error occured while sending your message.');
            }
            $(winName+"_sendBox").focus();
         }
      );

      var sentText = sBox;
      sentText = sentText.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/<([^>]+)>/ig, '').replace(/(\s|\n|>|^)(\w+:\/\/[^<\s\n]+)/, '$1<a href="$2" target="_blank">$2</a>');
      sentText = emoteReplace(sentText, smilies);
      var rcvdBox = $(winName+"_rcvd");
      Stamp = new Date(); var h = String(Stamp.getHours()); var m = String(Stamp.getMinutes()); var s = String(Stamp.getSeconds());
      h = (h.length > 1) ? h : "0"+h; m = (m.length > 1) ? m : "0"+m;
      if(sentText.replace(/<([^>]+)>/ig, '').indexOf('/me') == 0)
         rcvdBox.innerHTML = rcvdBox.innerHTML + "<b class=\"userA\">[" + h + ":" + m + "] <i>" + user + ' ' + sentText.replace(/<([^>]+)>/ig, '').replace(/\/me/, '') + "</i></b><br>\n";
      else
         rcvdBox.innerHTML = rcvdBox.innerHTML + "<b class=\"userA\">[" + h + ":" + m + "] " + user + ":</b> <span style=\"font-family:" + fontName + ",sans-serif;font-size:" + fontSize + "px;color:" + fontColor + ";\">" + (isBold == 'true' ? "<b>" : "") + (isItalic == 'true' ? "<i>" : "") + (isUnderline == 'true' ? "<u>" : "") + sentText + (isBold == 'true' ? "</b>" : "") + (isItalic == 'true' ? "</i>" : "") + (isUnderline == 'true' ? "</u>" : "") + "</span><br>\n";
      scrollToBottom(winName+"_rcvd");
      if(audioNotify == true) soundManager.play('msg_out', 1, true);
   }
}

function emoteReplace(str, itemsList) {
   var r;
   for(var i=0; i<itemsList.length; i++) {
      r = itemsList[i].split('~');
      if(str.indexOf(r[0]) > -1)
         str = str.replace(new RegExp(regExpEscape(r[0]), 'g'), '<img src="images/emoticons/' + r[1] + '" alt="' + r[1] + '" title="' + r[0] + '" />');
   }
   return str;
}

function regExpEscape(text) {
  if (!arguments.callee.sRE) {
    var specials = [
      '/', '.', '*', '+', '?', '|',
      '(', ')', '[', ']', '{', '}', '\\'
    ];
    arguments.callee.sRE = new RegExp(
      '(\\' + specials.join('|\\') + ')', 'g'
    );
  }
  return text.replace(arguments.callee.sRE, '\\$1');
}

function newIMWindow() {
   if($('sendto').value.replace(/^\s*|\s*$/g,"").length > 0) {
      var toWhom = $('sendto').value;

      if(!$(toWhom + '_im')) {
         createIMWindow(toWhom, toWhom);
      } else {
         if(!IMWindows[toWhom].isVisible()) {
            IMWindows[toWhom].show();
            setTimeout("scrollToBottom('" + toWhom + "_rcvd')", 125);
         }
      }
      
      Windows.close('newIM');
      IMWindows[toWhom].toFront();
      setTimeout("$('"+toWhom+"_sendBox').focus()", 125);
   } else {
      $('newim_error_msg').innerHTML = 'Please enter a proper username!';
   }
}

function createIMWindow(name, imTitle) {
   var imLeft = Math.round(Math.random()*(browserWidth()-360))+'px';
   var imTop  = Math.round(Math.random()*(browserHeight()-400))+'px';

   IMWindows[name] = new Window(name + '_im', {className: "dialog", width: 320, height: 335, top: imTop, left: imLeft,
                                               resizable: true, title: imTitle, draggable: true, detachable: imDetachable, minWidth: 320, minHeight: 150,
                                               showEffectOptions: {duration: 0}, hideEffectOptions: {duration: 0}});
   IMWindows[name].getContent().innerHTML = '<div class="rcvdMessages" id="' + name + '_rcvd"></div>' + "\n" +
                                            '<div class="imToolbar" id="' + name + '_toolbar" onmousemove="return false;" onselectstart="return false;"><img src="images/'+windowCSS+'/bold_off.png" onmouseover="buttonHover(this);" onmouseout="buttonNormal(this);" onclick="toggleBold(\'' + name + '\');" onmousedown="return false;" alt="Bold" id="' + name + '_bold" /> ' +
                                            '<img src="images/'+windowCSS+'/italic_off.png" onmouseover="buttonHover(this);" onmouseout="buttonNormal(this);" onclick="toggleItalic(\'' + name + '\');" onmousedown="return false;" alt="Italic" id="' + name + '_italic" /> '+
                                            '<img src="images/'+windowCSS+'/underline_off.png" onmouseover="buttonHover(this);" onmouseout="buttonNormal(this);" onclick="toggleUnderline(\'' + name + '\');" onmousedown="return false;" alt="Underline" id="' + name + '_underline" /></div>' +
                                            ' <a href="#" class="setFontLink" id="' + name + '_setFont" onclick="toggleFontList(\'' + name + '\');return false;" onselectstart="return false;">Tahoma</a>' +
                                            ' <a href="#" class="setFontSizeLink" id="' + name + '_setFontSize" onclick="toggleFontSizeList(\'' + name + '\');return false;" onselectstart="return false;">12</a>' +
                                            ' <a href="#" class="setFontColorLink" id="' + name + '_setFontColor" onclick="toggleFontColorList(\'' + name + '\');return false;" onselectstart="return false;"><div id="' + name + '_setFontColorColor" style="width:14px;height:14px;display:block;"></div></a>' +
                                            ' <a href="#" class="insertEmoticonLink" id="' + name + '_insertEmoticon" onclick="toggleEmoticonList(\'' + name + '\');return false;" onselectstart="return false;"><img src="images/emoticons/mini_smile.gif" width="14" height="14" style="border:0;" /></a>' +
                                            "\n" + '<div style="overflow:auto;"><textarea class="inputText" id="'+name+'_sendBox" onfocus="blinkerOn(false);" onkeypress="return keyHandler(event,'+"'"+name+"'"+');"></textarea></div>';
   $(name + '_rcvd').style.height = (IMWindows[name].getSize().height - 103) + 'px';
   $(name + '_rcvd').style.width = (IMWindows[name].getSize().width - 10) + 'px';

   $(name + '_toolbar').style.top = (IMWindows[name].getSize().height - 73) + 'px';
   $(name + '_toolbar').style.width = (IMWindows[name].getSize().width - 10) + 'px';
   
   $(name + '_setFont').style.top = (IMWindows[name].getSize().height - 65) + 'px';
   
   $(name + '_setFontSize').style.top = (IMWindows[name].getSize().height - 65) + 'px';
   
   $(name + '_setFontColor').style.top = (IMWindows[name].getSize().height - 65) + 'px';
   $(name + '_setFontColorColor').style.backgroundColor = '#000';
   
   $(name + '_insertEmoticon').style.top = (IMWindows[name].getSize().height - 65) + 'px';

   $(name + '_sendBox').style.top = (IMWindows[name].getSize().height - 45) + 'px';
   $(name + '_sendBox').style.left = '2px';
   $(name + '_sendBox').style.width = (IMWindows[name].getSize().width - 16) + 'px';
   $(name + '_sendBox').style.fontWeight = '400';
   $(name + '_sendBox').style.fontStyle = 'normal';
   $(name + '_sendBox').style.textDecoration = 'none';

   IMWindows[name].show();
   IMWindows[name].toFront();
   setTimeout("$('"+name+"_sendBox').focus();", 250);
}

function detachIMWindow(name) {
   newWin = name;
   newWinRcvd = $(name + '_rcvd').innerHTML;
   IMWindows[name].hide();
   var temp = IMWindows[name];
   var popupWin = window.open('./popup.html', name + '_im', 'left='+IMWindows[name].getLocation()['left']+',top='+IMWindows[name].getLocation()['top']+',width=320,height=335,toolbar=0,location=1,status=0,menubar=0,resizable=1,scrollbars=0');
   IMWindows[name] = {};
   IMWindows[name].popup = popupWin;
   IMWindows[name].isVisible = function() { return true; };
   IMWindows[name].show = function() { return true; };
   IMWindows[name].detached = true;
   IMWindows[name].old = temp;
}

function joinRoom(room) {
 var xhConn = new XHConn();
   xhConn.connect(pingTo, "POST", "call=joinroom&from="+user+"&pwd="+pass+"&room="+room,
      function(xh) {
         if(xh.responseText.indexOf('"') == -1) {
            switch(xh.responseText) {
               case 'already_joined':
                  $('newroom_error_msg').innerHTML = 'You are already in "' + room + '".';
                  break;
               case 'room_is_user':
                  $('newroom_error_msg').innerHTML = 'The chosen room name is invalid.';
                  break;
               case 'invalid_chars':
                  $('newroom_error_msg').innerHTML = 'Room name contains invalid characters!';
                  break;
            }
         } else {
            if(!$(room + '_im')) {