jQuery无刷新聊天室一例[分析]

最新推荐文章于 2021-08-06 14:26:59 发布

wust_star

最新推荐文章于 2021-08-06 14:26:59 发布

阅读量3.6k

点赞数 1

分类专栏： PHP基础技术 Ajax JQuery 文章标签：聊天 jquery mysql function string xml

PHP基础技术同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

JQuery

12 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

Wust_star说：

这是个很简单的聊天室，两个页面就搞定了，可以参考！毕竟我刚开始学Ajax;

还要要包含一个jquery.js文件，不然运行不出来。

我先说一下实现的整体思路，然后是详细的源代码----

首先客户端是两处Ajax请求---

(1)是发生在客户点击"发送"后的，把聊天信息提交到后台处理
(2)是没4s就自动请求一下后台，并看有没有新的内容，如有就更新聊天框

然后介绍一下后台，很简单，就不多说了.....

下面看下源代码吧，我都加了详细注释了--------

sql代码：

CREATE TABLE `messages` (
  `id` int(7) NOT NULL auto_increment,
  `user` varchar(255) NOT NULL,
  `msg` text NOT NULL,
  `time` int(9) NOT NULL,
  PRIMARY KEY  (`id`)
);

index代码：

<html>
<head>
    <title>AJAX with jQuery Example</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            timestamp = 0;
            updateMsg();
            $("form#chatform").submit(function(){
                $.post("backend.php",{                               //jQuery的post函数，是不是使AJAX变得如此简单了？？
                            message: $("#msg").val(),
                            name: $("#author").val(),
                            action: "postmsg",
                            time: timestamp
                        }, function(xml) {
                    $("#msg").attr("value","");     //清空信息框
                    addMessages(xml);
                });
                return false;
            });
        });
        function addMessages(xml) {
            if($("status",xml).text() == "2") return;
            timestamp = $("time",xml).text();       //当返回信息后，设置时间戳，请求的时候带着这个时间戳请求
                                        //这样通过服务器端的比较可以知道是否需要更新聊天框！
            $("message",xml).each(function(id) {
                message = $("message",xml).get(id);
                $("#messagewindow").prepend("<b>"+$("author",message).text()+
                                            "</b>: "+$("text",message).text()+
                                            "<br />");
            });
        }
        function updateMsg() {
             //   alert(timestamp);
            $.post("backend.php",{ time: timestamp }, function(xml) {
                $("#loading").remove();            //取出load
                addMessages(xml);                  //在聊天框中增加聊天记录
            });
            setTimeout('updateMsg()', 4000);      //在没有提交的情况下，是自动4s查询一下，如果有新的就更新聊天框
        }
    </script>
    <style type="text/css">
        #messagewindow {}{
            height: 500px;
            border: 1px solid;
            padding: 5px;
            overflow: auto;
        }
        #wrapper {}{
            margin: 35px auto;
            width: 438px;
        }
    </style>
</head>
<body>
    <div  align="center">
    <div id="wrapper" align="left">
    <p id="messagewindow"><span id="loading">Loading</span></p>
    <form id="chatform">
    姓名:
    <input type="text" id="author" size="6" />
    信息: <input type="text" id="msg" size="30" />
    <input type="submit" value="发送" /><br />
    </form>
    </ div>
</div>
</body>
</html>

backend.php

<?php
// Configuration
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "7897896";
$dbname = "jqchat";
$store_num = 10;
$display_num = 10;

// Script
error_reporting(E_ALL);       //开启PHP的错误和警告检测，关闭用error_reporting(0);

header("Content-type: text/xml");    //因为是输出xml格式
header("Cache-Control: no-cache");   //为了防止IE缓存，经测试，这句的确不能少！！

$dbconn = mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db($dbname,$dbconn);

foreach($_POST as $key => $value)
{
    $$key = mysql_real_escape_string($value, $dbconn);

    //明白了！！！---$($key)----$key依次遍历为anction,所以就得到了下面的$action

    //注意：mysql_real_escape_string — 转义 SQL 语句中使用的字符串中的特殊字符，并考虑到连接的当前字符集
    //看个例子就明白了：
    //$item = "Zak's and Derick's Laptop";
    // $escaped_item = mysql_real_escape_string($item);
    //printf ("Escaped string: %s\n", $escaped_item);
    //----输出：Escaped string: Zak\'s and Derick\'s Laptop

    //另外:mysql_escape_string------>和 mysql_real_escape_string() 完全一样，除了 mysql_real_escape_string() 接受的是//一个连接句柄并根据当前字符集转移字符串之外
}

if(@$action == "postmsg")         //index中有两处ajax的地方，其中之一是-----提交按钮，然后提交到这里
{
    mysql_query("INSERT INTO messages (`user`,`msg`,`time`)
                VALUES ('$name','$message',".time().")",$dbconn);   //插入新的
    mysql_query("DELETE FROM messages WHERE id <= ".
                (mysql_insert_id($dbconn)-$store_num),$dbconn);   //删除10条的那些
}

//不管是哪个ajax请求，都会执行下面这个！---注意其中的time>$time,是指比起已经发回客户端的信息新增的数据
$messages = mysql_query("SELECT user,msg
                         FROM messages
                         WHERE time>$time
                         ORDER BY id ASC
                         LIMIT $display_num",$dbconn);

if(mysql_num_rows($messages) == 0) $status_code = 2;  //如果没有一条新增的(包括自己和别人的)也没有
                                                      //那就标记一下，返回客户端后就不更新聊天框了
else $status_code = 1;

echo "<?xml version=\"1.0\"?>\n";
echo "<response>\n";
echo "\t<status>$status_code</status>\n";
echo "\t<time>".time()."</time>\n";
if($status_code == 1)
{
    while($message = mysql_fetch_array($messages))
    {
        $message['msg'] = htmlspecialchars(stripslashes($message['msg']));

        //（1）stripslashes()可去掉字符串中的反斜线字符。若是连续二个反斜线，则去掉一个，留下一个。
        //若只有一个反斜线，就直接去掉。(即：将用addslashes()函数处理后的字符串返回原样。)

        //（2）htmlspecialchar---->将特殊字符转成 HTML 的字符串格式 ( &.; )。最常用到的场合可能就是处理客户留言的留言版了。
        //& (和) 转成 &
        //" (双引号) 转成 "
        //< (小于) 转成 <
        //> (大于) 转成 >
        //此函数只转换上面的特殊字符，并不会全部转换成 HTML 所定的 ASCII 转换。

        //这样之后，输入<a href=#><font color=red>ggsdg</font></a> 就直接输出原样了，而返回到客户端就可以看到效// 果了

        echo "\t<message>\n";
        echo "\t\t<author>$message[user]</author>\n";
        echo "\t\t<text>$message[msg]</text>\n";
        echo "\t</message>\n";
    }
}
echo "</response>";
?>

wust_star

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery无刷新聊天室一例[分析]

Wust_star说：这是个很简单的聊天室，两个页面就搞定了，可以参考！毕竟我刚开始学Ajax; 还要要包含一个jquery.js文件，不然运行不出来。我先说一下实现的整体思路，然后是详细的源代码----首先客户端是两处Ajax请求---(1)是发生在客户点击"发送"后的，把聊天信息提交到后台处理(2)是没4s就自动请求一下后台，并看有没有新的内容，如有就更新聊天框
复制链接

扫一扫

专栏目录