ajax聊天室主要功能实现了,再做一些小的添加和修改,要总结在做的过程中的要点.
做聊天室的技术要点(笔记):
一:显示聊天内容框,不让它超出范围,内容多了后,增加滚动条的实现代码:(css技术实现)
#chat-content{
width:400px;
height:400px;
border:1px solid #ff9999;
float:left;
overflow:auto;
}
二:滚动条,让它随记录的更新,显示最新一条的信息,即滚动条永远在下方,不是在上方(默认是在上方),显示代码:(javascript技术显示)
var parent = document.getElementById("chat-content");
parent.scrollTop += parent.offsetHeight;
解释(个人的理解):
offsetHeight:滚动条内的高度
clientHeight:加滚动条内的高度
document.body.offsetHeight:滚动条内的宽度
document.body.clientHeight:加滚动条的宽度
三:创建xml页面,读取xml页面,为了动态的创建聊天记录(创建xml页面),和动态的显示聊天记录(读取xml页面),实现的代码:(php DOM技术实现)
1:创建xml页面
<?php
session_start();
$mtowho = $_GET['mtowho'];//针对说话的对象-----通过js传值得到基本的信息
$mfont = $_GET['mfont'];//字体
$mfcolor = $_GET['mfcolor'];//字体颜色
$mface = $_GET['mface'];//表情
$con = $_GET['content'];//聊天内容
$username = $_SESSION[username];//当前用户的名字
$t = time()+8*3600;
$time = date("Y-m-d H:i",$t);//发送信息时的时间
$doc = new DOMDocument();//创建一个xml dom 文档对象
$doc->load('data.xml');
$data = $doc->getElementsByTagName("data")->item(0);//这个data节点是我写在xml文件里的,做根节点
$item = $doc->createElement("item");
$mtowho = $doc->createElement("mtowho",utf8_encode($mtowho));//创建元素,这时还不是节点
$item->appendChild($mtowho);//把创建的元素变成一个节点,做为item的子节点
$mfont = $doc->createElement("mfont",$mfont);
$item->appendChild($mfont);
$mfcolor = $doc->createElement("mfcolor",$mfcolor);
$item->appendChild($mfcolor);
$mface = $doc->createElement("mface",$mface);
$item->appendChild($mface);
$content = $doc->createElement("content",utf8_encode($con));
$item->appendChild($content);
$username = $doc->createElement("username",utf8_encode($username));
$item->appendChild($username);
$time = $doc->createElement("time",$time);
$item->appendChild($time);
$data->appendChild($item);
$doc->save('data.xml');//保存新建的xml文件
?>
2:显示xml文件
<?php
header("content-type:text/html;charset=gb2312");
$doc = new DOMDocument('1.0');
@$doc->load('data.xml');
$doc->formatOutput = true;//格式化输出属性,默认是false
$items = $doc->getElementsByTagName("item");
foreach ($items as $item){
$content = $item->getElementsByTagName("content");//得到标签名
//$con = $content->item(0)->nodeValue();没有括号
$con = $content->item(0)->nodeValue;//得到该标签名的值
$con = utf8_decode($con);
$time = $item->getElementsByTagName("time");
$data = $time->item(0)->nodeValue;
$username = $item->getElementsByTagName("username");
$user = $username->item(0)->nodeValue;
$user = utf8_decode($user);
$mtowho = $item->getElementsByTagName("mtowho")->item(0);
$mtowho = $mtowho->nodeValue;
$mtowho = utf8_decode($mtowho);
$mfont = $item->getElementsByTagName("mfont")->item(0);
$mfont = $mfont->nodeValue;
switch ($mfont){
case 1 : $mfont = "font-weight:bold;"; break;
case 2 : $mfont = "font-style:italic;"; break;
}
$mfcolor = $item->getElementsByTagName("mfcolor")->item(0);
$mfcolor = $mfcolor->nodeValue;
$mface = $item->getElementsByTagName("mface")->item(0);
$mface = $mface->nodeValue;
$mface ="<img src=/"face/".$mface."/"/>";
//echo "<p>[".$user."]".$con." ".$data."</p>";
echo "<p><font color=/"".$mfcolor."/" style=/"".$mfont."/">[".$user."]<font color=/"#000000/" style=/"font-style:normal;font-weight:bold;/">对</font>[".$mtowho."]<font color=/"#000000/" style=/"font-style:normal;font-weight:bold;/">说：</font>".$con.$mface.$data."</font></p>";
}
?>
3:即时刷新,一秒让它执行一次显示记录
function getMess(){
time=window.setInterval("showMess()",1000); //设置了一秒执行一次
}
html中调用此函数
<body οnlοad="showScreen();getMess();">
四:解屏和锁屏实现代码:
//锁屏
function showScreen(){
var mess = getObject("mess");
var screen = getObject("screen");
// mess.style.width = getWidth();
//screen.style.height = getHeight();
mess.style.display = 'block'; //显示用户验证框;
screen.style.display = 'block';
getObject("content").disabled = true; //并屏蔽后面的内容,注意只是disabled:true屏蔽并不是display:none不显示,注意屏蔽和不显示的区别
}
//解屏
function hideScreen(){
var mess = getObject("mess");
var screen = getObject("screen");
mess.style.display = 'none';
screen.style.display = 'none';
getObject("content").disabled = false;
}
五:用户的验证 / 注册用户(写入xml文件) / 注册用户显示(读取xml)
1:javascript 用户的验证
function checkuser(){
var user = getObject("user").value;
if(user == ""){
alert("请输入用户名！");
getObject("user").focus();
return false;
}else{
sendRequest();
url="online.php?user="+user+"&strTime="+getDateTime();
xmlobj.open("GET",url,"true");
xmlobj.onreadystatechange = function(){
if(xmlobj.readyState == 4 && xmlobj.status == 200){
if(xmlobj.responseText=="no"){
getObject("errmes").innerHTML = "此用户名已经存在！";
getObject("user").value = "";
getObject("user").focus();
return false;
}else{
hideScreen();
}
}
}
xmlobj.send(null);
}
}
2:php 注册用户(写入xml文件) / 注册用户显示(读取xml)
<?php
error_reporting(0);
session_start();
//$_GET[user] = "renxian";
$nickname = $_GET['user'];
//echo $nickname."<br>";
//$_GET[strTime]="111";
$strtime = $_GET['strTime'];
//echo $strtime."<br>";
$doc = new DOMDocument();
@$doc->load("online.xml");
$doc->formatOutput = true;
$ischeck=true;
$onlines = $doc->getElementsByTagName('online');
foreach($onlines as $online){
$username = $online->getElementsByTagName('username');
$user = $username->item(0)->nodeValue;
if($user == utf8_encode($nickname)){
echo "no";
$ischeck = false;
}
}
//这是又一个xml文件,用于记录用户名的,上面的那个是用于记录聊天的信息的
//如果xml文件已经存在,那么就把变量设置为$ischeck = false;让它不去执行下面的代码,从新创建xml节点,可能是我学的还不好,没想到去这样设置这个参数.....知道了才发现自己学的还是不够好
//如果此xml文件不存在,则$ischeck=true;执行下面的代码
if($nickname!="" && $ischeck){//这个设置的太经典了
$dataNode = $doc->getElementsByTagName('data')->item(0);
$onlineEle = $doc->createElement("online");
$onlineNode = $dataNode->appendChild($onlineEle);
$userEle = $doc->createElement("username",utf8_encode($nickname));
$userNode = $onlineNode->appendChild($userEle);
$onlinetimeEle = $doc->createElement("onlinetime",$strtime);
$onlinetimeNode = $onlineNode->appendChild($onlinetimeEle);
$_SESSION[username] = $nickname;
}
$doc->save("online.xml");
?>
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
