<?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" 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) {
//當按下Enter鍵後,發送資訊
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'> "+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'>: "+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>