⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 chat.js

📁 用struts,ajax实现的聊天室
💻 JS
📖 第 1 页 / 共 3 页
字号:
   //查看输入的信息是否和上条一样,如一样则返回
   params="message.context="+context+"&message.color="+color+"&message.receiveUser="+receiveUser+"&message.type="+type;
   if(msg==params){
      window.alert("请不要刷屏!");
      return;
   }
   msg=params;  //保存该条信息
   //发送服务器
   var url="sendMessage.do"; 
   var myAjax=new Ajax.Request(url,{method:"post",parameters:params,onComplete:showMsg});
   $("context").value=""; //清空输入内容
}


/**********显示聊天信息**********
   解析服务器返回的xml文档为HTML,显示聊天信息
   
   用户信息结构为:
     <messages user="userName">
      <message sayUser="sayUser" receiveUser="receiveUser" type="type" time="time" color="color">context</message>
     </messages>
   系统消息结构为: 
     <messages user="userName">
      <message type="type">non</message>
     </messages>	
********************************/

function showMsg(request){
  //获得XML文档内容
   var messages=request.responseXML.getElementsByTagName("messages");
   var message=messages[0].getElementsByTagName("message"); //得到信息数组
   var user=messages[0].getAttribute("user");
   var msgHTML="";              //公开的信息
   var personalMsgShow="";      //个人的信息
   var flag=true;               //判断是否被屏蔽标志
   
   //如果用户已经被请出了房间则退出房间,否则显示聊天信息      
   if(message[0].firstChild.data=="non"){
      window.alert("你被请出了该房间.");
      window.location.href="index.jsp"
   }
   else { //显示聊天记录
       //将获得的信息数组循环显示
	   for(var i=0;i<message.length;i++){
	      var msg="";
		  var newHTML="";          //一条信息
	      var type=message[i].getAttribute("type");//获取类型
	      var context=message[i].firstChild.data;//获取讲话的内容
	      //如果是系统消息,则以系统消息的格式显示
	      if(type=="sys"){
	          msgHTML+="<font color='gray'>[系统消息]"+context+"</font><br>"
	      }
	      else{//用户消息
	         //获取组成信息的各元素
		      var color=message[i].getAttribute("color");
		      var sayUser=message[i].getAttribute("sayUser");
		      var receiveUser=message[i].getAttribute("receiveUser");
		      var time=message[i].getAttribute("time");
		       //判断信息是否是被屏蔽者的话,如果是则标志flag设置为false
              for(var j=1;j<=count;j++){
                 if(separentUsers[j]==sayUser){
                   flag=false;
                }
              }
              //未屏蔽则显示信息     
              if(flag){  
                 /****解析“{}”中的表情和图片 ***
                    如果信息中有"{}"符号则解析
                    其中"{[http...  ]}"符号中内容为网络音乐地址
                     "{http... }"中内容为网络图片地址
                     "{ }" 中为本地地址即表情图片地址 
                 ********************************/
		        while(context.indexOf("{",0)!=-1){
		          var low=context.indexOf("{"); //第一组{}
		          var high=context.indexOf("}");
		          var addr=context.substring(low+1,high);//获取第一组"{}"的内容
		          if(addr.indexOf("http")!=-1){  //判断是否是网址,其中"{ }"中为网络图片地址,"{[ ]}"中网络音乐地址
		            if(addr.indexOf("[")!=-1){   //判断是否包含"[]",有则为音乐地址
		              var musicAddr=context.substring(low+2,high-1); //获取"[]"中内容
		              msg+=context.substring(0,low)+"<embed src='"+musicAddr+"' autostart=true width=145 height=60>"; //将"{}"信息前的内容和"{[http...]}"中解析出来的音乐地址相加
		            }else{
		              msg+=context.substring(0,low)+"<img src='"+addr+"'></img>"; //将"{}"信息前的内容和"{http...}"中解析出来的图片地址相加
		            }
		          }else
		           msg+=context.substring(0,low)+"<img src='face/"+addr+".gif'></img>";////将"{}"信息前的内容和"{}"中解析出来的本地地址(表情)相加
		         context=context.substring(high+1,context.length);
		         }
		        msg+=context;
		       //将解析出来的元素最后组成组成一条信完整的信息
		       if(receiveUser=="所有人"){
		         newHTML="<font color='blue'><a href=\"javascript:talkTo('"+sayUser+"')\">"+sayUser+"</a></font>("+time+")说:<font color='"+color+"'>"+msg+"</font><br>"
		       }else
		         newHTML="<font color='blue'><a href=\"javascript:talkTo('"+sayUser+"')\">"+sayUser+"</a></font>对<font color='blue'><a href=\"javascript:talkTo('"+receiveUser+"')\">"+receiveUser+"</a></font>("+time+")说:<font color='"+color+"'>"+msg+"</font><br>"
		       //除别人讲的悄悄话且说话者和接受者都不是自己外的信息,显示到公共聊天窗口中
		       if(!(type=="private"&&sayUser!=user&&receiveUser!=user)){
		         if(type=="private")//如是"悄悄话"则加"悄悄话"字
		           msgHTML+="<font color='red'>*悄悄话*</font>"+newHTML;
		         else
		           msgHTML+=newHTML;
		       }
		      //将与自己有关的信息(说话者或接受者是自己)显示在个人聊天窗口中
		      if(sayUser==user||receiveUser==user){
		        if(type=="private")//如是"悄悄话"则加"悄悄话"字
		          personalMsgShow+="<font color='red'>*悄悄话*</font>"+newHTML;
		        else
		          personalMsgShow+=newHTML;
		      }
		   }
		  }
        }
        
     $("msgShow").innerHTML+=msgHTML; //添加到公共聊天窗口中
     $("personalMsgShow").innerHTML+=personalMsgShow; //添加到个人聊天窗口中
     $("msgShow").scrollTop=2000;   //滚动条自动到底
     $("personalMsgShow").scrollTop=2000;//滚动条自动到底
   }   
}

/**********enter发送信息**********
         响应enter键
*********************************/

function msgHandler(event){
   var keyCode=event.keyCode?event.keyCode:event.which?event.which:event.charCode;
   if(keyCode==13){
      sendMsg();
   }
}


/***********清除聊天信息窗口*************
   将公共聊天窗口和个人聊天窗口清空
****************************************/ 

function msgClean(){
   $("msgShow").innerHTML=""; //清空公共聊天窗口
   $("personalMsgShow").innerHTML="";//清空个人聊天窗口
} 



/*******************************************************************************************************
 *                                                                                                     *
 *                                     以下用户离开聊天室功能                                            *
 *                                                                                                     *
********************************************************************************************************/

/**********离开聊天室**********
  当用户点击离开时,退出聊天室,跳转到主页。
******************************/
function leaveRoom(){
   var url="leaveRoom.do";
   var myAjax=new Ajax.Request(url,{method:"post",PostBody:null,onComplete:leave});
}

//离开跳转到主页页面
function leave(){
   window.close();
}
 
  
 
/*******************************************************************************************************
 *                                                                                                     *
 *                                     以下显示在线用户列表功能                                          *
 *                                                                                                     *
 *******************************************************************************************************/

/**********刷新在线列表**********
   当进入聊天室时和定时调用刷新在线会员列表。
********************************/

function freshUserList(){
   var url="showUserList.do";
   var myAjax=new Ajax.Request(url,{method:"post",PostBody:null,onComplete:userList});
   setTimeout("freshUserList()",10000);
}

/**********显示在线会员**********
   解析服务器返回的XML文档,显示到列表中。
********************************/

function userList(request){
  var users=request.responseXML.getElementsByTagName("user");
  if(users[0].firstChild.data=="non"){      //当返回是"non"时,该用户名被请出了房间。
     window.alert("你被请出了该房间.");
     window.location.href="index.jsp"       //跳转到主页。
  }
  else{
    // if(users.length>0){             
	     $("userList").innerHTML="";         //清除列表
	     for(var i=0;i<users.length;i++){    //循环显示在线用户到列表
		     var user=users[i].firstChild.data;  
		     var option=new Option(user);    
		     option.setAttribute("value",user);
		     $("userList").add(option);
	      }
     // }
  }
}



/*******************************************************************************************************
 *                                                                                                     *
 *                                     以下新建和删除房间功能                                               *
 *                                                                                                     *
 *******************************************************************************************************/



/**********检验房间名有效性 **********
  当输入房间名文本框失去焦点时调用该函数
*************************************/
 function checkRoomName(){
   var addRoomName=$F("addRoomName");  //获取文本框值
   var addRoomClassify=$F("addRoomClassify")
   if(addRoomName==""){             //如空则提示并返回
      $("roomvalid").innerHTML="请输入房间名称!";
      $("addRoomName").focus();
      return false;
   }
   
   if(addRoomName.length>12){
      $("roomvalid").innerHTML="输入房间名输入太长.";
      return false;
   }
   
   var url="checkRoomName.do";       //通过则发送服务器验证唯一性
   var para="addRoomName="+addRoomName+"&addRoomClassify="+addRoomClassify;
   var myAjax=new Ajax.Request(url,{method:"post",parameters:para,onComplete:checkRoomNameShow});
 } 
 /**********显示房间名验证结果**********
   解析服务器返回的XML文档,并显示
 **************************************/
 
 function checkRoomNameShow(request){
   var has=request.responseXML.getElementsByTagName("roomname")[0].firstChild.data;
  // window.alert(has);
    if(has=="ok")                  //如服务器返回内容为"ok",提示可用,否则提示服务器返回的错误。
      $("roomvalid").innerHTML="名称可以使用!"; 
    else{
      $("roomvalid").innerHTML=has;
      $("addRoomName").focus();
    }
  }
  
/**********添加房间**********
  当用户名提交添加房间信息时调用
****************************/

  function addRoomValid(){  
     var addRoomName=$F("addRoomName");        //获取名称
     var addRoomMaxUser=$F("addRoomMaxUser");          //获取最大用户数
     var addRoomIntr=$F("addRoomIntr");//获取房间介绍
     var classify=$F("addRoomClassify");
     if(addRoomName==""||addRoomMaxUser==""||addRoomIntr==""){ //输入不能为空
        window.alert("请输入完整信息!");
        return false;
     }
    if(isNaN(addRoomMaxUser)){   
      window.alert("\"最多人数\"必须是数字。");  
      return false;
    }

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -