📄 chat.js
字号:
//查看输入的信息是否和上条一样,如一样则返回
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 + -