聊天室完善

 

<?php
 session_start();
 //引入验证防跳墙
 include("checkUser.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="ajax.js" type="text/javascript"></script>
<script src="./fckeditor.js" type="text/javascript"></script>
<style>
 body{
  margin:0px;
  padding:0px;
  }

 #chartcon{
  width:600px;
  height:310px;
  background-color:#FC6; 
  overflow:auto;
  }
  
 #send_btn{
  width:170px;
  height:150px;
  font-size:64px;
  color:black;
  }
  
 #sendMsg{
  color:#C6C; 
  }
  
 /*屏蔽按钮*/
 #img1{
  width:15px;
  height:15px;
  }
</style>
</head>
<body>
<table width="784" border="1" align="center" bgcolor="gray">
  <tr>
    <td width="600" style="text-align:center;">欢迎<?php echo $_SESSION["username"]; ?>进入聊天室</td>
    <td width="185">在线用户列表</td>
  </tr>
  <tr>
    <td height="317">
    <div id="chartcon"></div></td>
    <td >
    <select size="20" style="width:170px; float:right;" id="sel">
     <option>所有人</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>
    <input type="button" value="清屏" class="button" οnclick="clearScreen()"/>
    </td>
    <td id="status"><font color='red'>
    快捷键发送:<input type="radio" id="isenter"/>
    </font></td>
  </tr>
  <tr>
    <td height="84">
     <?php
    //引用FCKeditor.php这个文件,基本的类和数据结构都在这里
include ("./Fckeditor/fckeditor/fckeditor.php");
//创建FCKeditor对象的实例。myFCKeditor即提交后,接收数据页面 _POST['myFCKeditor']使用
$FCKeditor = new FCKeditor("sendMsg");
//FCKeditor所在的位置,这里它的位置就是'FCKeditor' 文件夹
$FCKeditor -> BasePath='./Fckeditor/fckeditor/';
//工具按钮设置
$FCKeditor -> ToolbarSet="";
//设置它的宽度
$FCKeditor -> Width='600px';
//设置它的高度
$FCKeditor -> Height='150px';
//生成
$FCKeditor -> Create();
?>
   
    </td>
    <td><input type="button" value="发送" id="send_btn" οnclick="send()" /></td>
  </tr>
</table>
<script>
 var flag=true;
 var xhr = new Ajax("html");
//------------------------------发送信息-------------------
 function send(){ 
   //接收fckeditor中的值
   var content = getEditorContent('sendMsg',true);
   var speaker = "<?php echo $_SESSION["username"];?>";
   var url = "charting.php?r="+Math.random()+"&speaker="+encodeURI(speaker)+"&msg="+encodeURI(content)+"&lis="+encodeURI($("sel").value);
   xhr.get(url,function returnValue(revalue){
    if(revalue){
     //清空发送信息框
     setEditorContent('sendMsg','')
     //发送状态信息
     $("status").innerHTML="<font color='#3F0'>信息发送完成</font>";
     }else{
      $("status").innerHTML="<font color='#3F0'>信息发送失败</font>";
      }
     setTimeout("statu()",1000);
    });
  }
  
function statu(){
 $('status').innerHTML="<font color='red'>快捷键发送:</font><input type=radio id='isenter'/>";
 }
  
//fck的自动事件监听方法
function FCKeditor_OnComplete( editorInstance ) {
   
    var o=editorInstance.EditorDocument;
 if(o.attachEvent){
 o.attachEvent("onkeypress",editor_keypress);
 }else{
 o.addEventListener("keypress",editor_keypress,false);
 }

}

function editor_keypress(e) {
 //判断用户是否允许使用快捷键
   if($("send_btn").checked){   
//var oEditor = FCKeditorAPI.GetInstance('sendMsg');
    var keycode = e.keyCode//oEditor.EditorWindow.event.keyCode;
    if(keycode == 13) {   
    //当按下回车键后,发送信息
       send();
     }
 
   }
}
  
function $(id){
  return document.getElementById(id);
 }
 
//------------------清屏-------------------
function clearScreen(){
  //获取内容节点
  var child = $("chartcon");
  for(var i=child.childNodes.length-1; i>=0; i--){
    child.removeChild(child.childNodes[i]);
   }
 }


//-------------------获取聊天内容,并显示出来-------------------
var maxid = 0;
function getContent(){ 
   var url = "getContent.php?r="+Math.random()+"&maxid="+maxid;
   xhr.get(url,function returnValue(revalue){   //alert(revalue);
     //将json格式的字符串转换成对象
     var objs = eval("("+revalue+")");
//------------------得到聊天的记录信息并信誓-------------------------
     var obj = objs.Msg;
     //循环的得到数据
     var conStr = $("chartcon").innerHTML;
     for(var i=0; i<obj.length; i++){                                    conStr += "<font color='blue'>&nbsp;"+obj[i].speaker+"[ "+obj[i].send_ip+" ][<a href='javascript:if(flag){shield(\""+obj[i].send_ip+"\")'>屏蔽此人</a>]} else{ shield(\""+obj[i].send_ip+"\")'>取消屏蔽</a>]} 在"+obj[i].c_time+"时间对<b>"+obj[i].listener+"</b>说:</font><br><font color='green'>:&nbsp;"+obj[i].content+"</font><br><br>";     
      //保存最大的id  
      maxid = parseInt(obj[i].id); 
      }
     //将数据显示到屏幕
     $("chartcon").innerHTML=conStr; 
    // alert(obj);
     if(obj){
      $("chartcon").scrollTop=$("chartcon").scrollHeight;
     }
     
     
//------------------得到在线的人数------------------------     
     var objuser = objs.User; // alert(objuser);
     //获取select节点
     var sel = $("sel");
     //清空上次的用户在线信息人数
     sel.options.length=1;
     //循环的添加option
     for(var j=0; j<objuser.length; j++){
       var option = new Option(objuser[j].username+"@"+objuser[j].ip,objuser[j].id);
       //在option中添加子节点
       var img = document.createElement("input");
       option.appendChild(img);
       img.setAttribute("id","img1");
       img.setAttribute("type","image");
       img.setAttribute("src","image/bg6.jpg");
       sel.add(option);
      }
     
   });
  }

//------------------定时读取-------------------
setInterval("getContent()",2000);

//----------------处理屏蔽某个ip地址------------------------
function shield(ip){
  var url = "shieldUser.php?ip="+ip;
  xhr.get(url,function pingbi(res){
    if(res){
     alert("屏蔽成功!");
     }else{
     alert("屏蔽失败!"); 
      }
   });
   if(flag){
     flag=false;
    }else{
      flag=true;
     }
 }
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值