本页主题: PHP+AJAX+HTML打造无刷新聊天室{老技术新用} 打印 | 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题

jacking

该用户目前不在线
级别: 论坛版主
精华: 2
发帖: 294
威望: 299 点
金钱: 2980 RMB
贡献值: 0 点
注册时间:2007-05-17
最后登录:2008-08-07

PHP+AJAX+HTML打造无刷新聊天室{老技术新用}


又是工作需要,算是再次的学习ajax吧,作为一个web程序员,这个技术是必须懂的.因为好多地方都会用到.....
========================================================================

记得在很早上网的时候,还没有什么流行的即时通讯软件,更多的人是用WEB程序编写的聊天室来进行网上交流。每次页面刷新的“嗒嗒”声似乎还在耳边回响。

时过境迁,现在很少有人会提到聊天室程序了,但有了AJAX,似乎不需要iframe和meta的帮助也能实现即时信息的刷新,我们何不动手做一套属于自己的聊天室呢?^_^

准备活动
在开始前,检查下自己是否满足下面这些基本条件

有PHP语言方面的基础 
有javascript方面的知识 
HTML语言基础 
如果您对以上三个知识点都有所了解,那么相信下面的内容应该难不倒您。我们推荐刚接触这方面知识的朋友先去我们的知识库充充电,了解之后回头这些内容会对您更有帮助。好了,现在开始切入正题。

查看效果,了解大概的功能
在看过具体的效果后,大家可以先自己思考下。

我把程序所用到的文件和大概的用途,给大家指明一下:

-
|-文件夹:data
    | yy-m-d.html  每天会建立以日期命名的hmtl文件,记录聊天的内容
|-文件夹:inc
    | ja.js        里面存放着AJAX核心函数
| default.php      显示聊天记录,输入聊天内容的主页面
| hello.php        处理新来用户的呢称存储
| save.php        保存用户的聊天内容
| read.php        读取聊天内容

好了,就这么点,当然了你可以发挥自己的想象力把它弄的更完美一些。

第一步:判断是否需要建立新的html
如果你想让程序每天自动创建一个新的HTML文件来记录聊天信息的话,这步就少不了了。

提示:先检查data文件夹下今天的文件是否存在,不存在则建立一个空的文件。

所要用到的函数有:file_exists()和file_put_contents()

Copy code
<?php
//在default.php的顶部
$tfile= 'data/'.date('y-m-d').'.html'; //今天文件的位置
if(!file_exists($tfile))                    //判断是否存在
file_put_contents($tfile,'');              //不存在则建立一个内容为空的文件
?>

顶端 Posted: 2007-12-23 12:34 | [楼 主]
jacking

该用户目前不在线
级别: 论坛版主
精华: 2
发帖: 294
威望: 299 点
金钱: 2980 RMB
贡献值: 0 点
注册时间:2007-05-17
最后登录:2008-08-07

第二步:判断是否是新来的用户
我们使用了cookie,当然session也是可行的

过程:在default.php页判断当前用户是否是第一次来访,是的话要求其输入昵称,昵称发送到hello.php生成一个10小时有效的cookie。然后返回到default.php页,此时可以进行信息的输入

Copy code
<?php
if(!$_COOKIE['user'])
//当COOKIE不存在↓
echo <<<_html
<form action="hello.php" method="post">
<input type="text" name="user" value="输入昵称->提交->聊天" onclick="this.value=''" />
<input type="submit" value="提交" />
</form>
_html;
else
//存在就显示聊天信息输入的区域↓
echo <<<_html
<textarea name="nmsg" id="nmsg" onkeydown="ctrl_enter(event)"></textarea>
<button onclick="save()" id="update">Ctrl+回车</button>
_html;
?>


完成hello.php对新来用户昵称的cookie写入
在default.php页得到一个来自新用户的昵称post之后,页面会转向hello.php

处理cookie的方法是使用setcookie('cookie名称','cookie值',过期时间)

注意 处理cookie必须在html标签之前(在有任何信息输出之前)



程序代码
Copy code
<?php
if($_POST['user']){                      //判断是否获取到了post数据
$name = urlencode($_POST['user']);        //对内容进行url加密
setcookie('user',$name,time()+36000);    //当前时间再加上36000毫秒的有效时间(10小时后过期)
}
header("location: default.php");            //返回到default.php
?>
顶端 Posted: 2007-12-24 09:48 | 1 楼
jacking

该用户目前不在线
级别: 论坛版主
精华: 2
发帖: 294
威望: 299 点
金钱: 2980 RMB
贡献值: 0 点
注册时间:2007-05-17
最后登录:2008-08-07

第三步:完成信息的写入工作
当用户的浏览器有了昵称信息,并往写了一些信息,完成后JS负责建立一条类似于后台处理的线路,将数据以post的形式发送给save.php,大家可以先看一下这个JS文件里的save函数

注意JS传递的信息的字符编码都是utf-8的,所以在save.php我们需要将得到的post信息再转换成gb2312。PHP有个非常不错的函数iconv(),可以很方便的将utf-8转成gb2312



程序代码
Copy code
<?php
//设置时区,默认时区和中国时区相差8个小时,可以在php.ini文件里设置
ini_set('date.timezone','Asia/Shanghai');

//当post有内容,并且cookie存在时
if($_POST['nmsg'] && $_COOKIE['user']){
$file_url = 'data/'.date('y-m-d').'.html'; //当日文件所在位置
$dd = date('H:i:s');                          //当前时间
$name = urldecode($_COOKIE['user']);          //将cookie里的内容解码

//祛除一些特殊标记
$new_msg = str_replace("&","&",$_POST['nmsg']);
$new_msg = str_replace("<","<",$new_msg);
$new_msg = str_replace(">",">",$new_msg);
$new_msg = str_replace("\n","<br />",$new_msg);
$new_msg = str_replace("\r","",$new_msg);
$new_msg = iconv('utf-8','gb2312',$new_msg); //字符编码转换

$fp = fopen($file_url,'a');                    //追加信息
fwrite($fp,"<p><b>$name</b><small>$dd</small><pre>$new_msg</pre></p>\n");
fclose($fp);
}
?>

提示:因为IE和FF浏览器里对回车符号这个概念不太一致,所以在将\n转成<br />后我还将\r转成了空字符。这样可以避免逐行读取的时候出现偏差

第四步:隔时刷新读取数据
主要功臣还是js,但我们这里只对read.php做一下解释,因为对于AJAX核心函数其实并没有什么可以多说的,只是几个参数的改动,大家可以前往AJAX框架了解一下,我们的AJAX教程上也有一些介绍。

read.php要得到vnum参数的值,它关系到在default.php上显示几条记录,而这个值由default.php中的下拉菜单来控制:

显示<select id="vnum" onchange="sendPostRequest(this.value)">
<option value="10" selected="selected">10条</option>
<option value="20">20条</option>
<option value="30">30条</option>
</select> 记录

当选项发生改变就将参数交给sendPostRequest(),然后显示的条目就会发生改变。

我们来看看read.php干了什么事:



程序代码
Copy code
<?php
//因为浏览器对于浏览器过的页面会有缓存,而这张页面会不时的刷出新的信息,所以我们要强制把缓存关闭
header("Cache-Control: no-cache");
header("Pragma: no-cache");

//信息文件地址
$file_url = 'data/'.date('y-m-d').'.html';

//先将文件内容以数组的形式提取出来,然后再进行方向读取(读取比较新的信息)
$msg = array_reverse(file($file_url));

//判断参数,依其做出相应处理
switch ($_GET['vnum']){
   
    case '10':
    for($num=10;$num>=0;$num--){
    echo iconv('gb2312','utf-8',$msg[$num]); //将gb2312再转成utf-8让js传送
    }
    break;
   
    case '20':
    for($num=20;$num>=0;$num--){
    echo iconv('gb2312','utf-8',$msg[$num]);
    }
    break;
   
    case '30':
    for($num=30;$num>=0;$num--){
    echo iconv('gb2312','utf-8',$msg[$num]);
    }
    break;

    default:
    echo "参数错误!";                          //无参数就显示错误
    break;
}
?>


最后一步:下载代码,自己研究 ^_^
本人只是把每个文件是做什么的做了下解释,其实这个聊天室功能非常的简单,大家可以发挥自己的才智把它弄的更好一些。这里是代码地址
顶端 Posted: 2007-12-24 09:51 | 2 楼
jacking

该用户目前不在线
级别: 论坛版主
精华: 2
发帖: 294
威望: 299 点
金钱: 2980 RMB
贡献值: 0 点
注册时间:2007-05-17
最后登录:2008-08-07

自娱自乐~ 今天再学习之.....
顶端 Posted: 2007-12-25 08:47 | 3 楼
开源嘛论坛 » php工作技术探讨

Guest cache page, Update at 2008-12-04 07:36 桂ICP备07006725号
Powered by PHPWind v6.0 Certificate Code © 2003-07 PHPWind.com Corporation