PHP jquery ajax实现即时聊天功能

WBOY

發布： 2016-06-02 09:13:54

原創

1566 人瀏覽過

这是一个简单的利用jquery与php做的一个聊天室的源码,我们这里定时利用ajax读取数据库并进行刷新了,下面直接参上源码,实例代码如下:

//index.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script>
var chat = {
    init : function () {
        chat.first();
        $(&#39;#chat_btn&#39;).unbind(&#39;click&#39;).click(function () {
            chat.send();
        });
        $(&#39;#my_chat&#39;).keyup(function () {
            if (event.keyCode == 13) {
                chat.send();
            }
        });
        www.111cn.net
    },
    first : function () {
        $.getJSON(&#39;data.php&#39;, {
            action : &#39;first&#39;,
            type : &#39;l&#39;
        }, function (data) {
            chat.btn_status._true();
            $(&#39;#mwebtime&#39;).html(data.time);
            $(&#39;#chat textarea&#39;).val(data.chat);
            $(&#39;#chat textarea&#39;).stop(true, true).animate({
                scrollTop : 9999
            }, 1);
            chat.socket();
        });
    },
    send : function () {
        chat.btn_status._false();
        $.getJSON(&#39;send.php&#39;, {
            txt : $(&#39;#my_chat&#39;).val(),
            type : &#39;l&#39;
        }, function (data) {
            if (data.status == 200) {
                chat.btn_status._false();
                $(&#39;#my_chat&#39;).val(&#39;&#39;);
                setTimeout(function () {
                    chat.btn_status._true();
                }, 2000);
            }
        });
    },
    socket : function () {
        $.getJSON(&#39;data.php&#39;, {
            action : &#39;while&#39;,
            type : &#39;l&#39;
        }, function (data) {
            $(&#39;#mwebtime&#39;).html(data.time);
            $(&#39;#chat textarea&#39;).val(data.chat);
            $(&#39;#chat textarea&#39;).stop(true, true).animate({
                scrollTop : 9999
            }, 1);
            chat.socket();
        });
    },
    btn_status : {
        _false : function () {
            $(&#39;#chat_btn&#39;).html(&#39;等待&#39;).attr(&#39;disabled&#39;, true);
        },
        _true : function () {
            $(&#39;#chat_btn&#39;).html(&#39;发言&#39;).attr(&#39;disabled&#39;, false);
        }
    }
}
chat.init();
</script> 
</head> 
  
<body> 
<div id="chat"> 
 <textarea wrap="physical" style="line-height:20px;font-size:12px;height:100px;width:200px;"></textarea> 
 <BR /> 
 <input id="my_chat" type="text" /> 
 <button id="chat_btn" disabled="disabled">发言</button> 
</div> 
<div id="mwebtime"></div> 
</body> 
</html>

登入後複製

data.php

<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pramga: no-cache");
set_time_limit(0);
$get = $_GET[&#39;action&#39;];
$type = $_GET[&#39;type&#39;];
$file = $type . &#39;.txt&#39;;
if (isset($get) && isset($type) && file_exists($file)) {
    switch ($get) {
        case &#39;first&#39;:
            $chat = file_get_contents($file);
            $json = array(
                &#39;status&#39; => 200,
                &#39;time&#39; => gmdate("s") ,
                &#39;chat&#39; => $chat,
            );
            echo json_encode($json);
            break;
            www . phprm . com
        case &#39;while&#39;:
            $oldsize = filesize($file);
            $newsize = filesize($file);
            while (true) {
                if ($oldsize != $newsize) {
                    $chat = file_get_contents($file);
                    $json = array(
                        &#39;status&#39; => 200,
                        &#39;time&#39; => gmdate("s") ,
                        &#39;chat&#39; => $chat,
                    );
                    echo json_encode($json);
                    exit;
                }
                clearstatcache();
                $newsize = filesize($file);
                usleep(10000);
            }
            break;
    }
}

登入後複製

send. php

<?php
$json = array();
$txt = isset($_GET[&#39;txt&#39;]) ? $_GET[&#39;txt&#39;] : &#39;&#39;;
$type = isset($_GET[&#39;type&#39;]) ? $_GET[&#39;type&#39;] : &#39;&#39;;
if ($txt != &#39;&#39;) {
    $file = $type . ".txt";
    if (file_exists($file)) {
        $fp = fopen($file, "a");
        $str = "rn" . &#39;Admin：&#39; . $txt;
        //$str = $txt."n"//linux;
        fwrite($fp, $str);
        fclose($fp);
        $json[&#39;status&#39;] = 200;
        echo json_encode($json);
        exit;
    }
}

登入後複製