php即时聊天(反ajax)

最新推荐文章于 2024-04-13 21:51:55 发布

会飞的皮卡丘

最新推荐文章于 2024-04-13 21:51:55 发布

阅读量548

点赞数

分类专栏： javascript

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用Ajax实现的反向推送技术，通过客户端定时请求服务器的方式获取最新的消息更新。文章详细展示了从HTML页面布局到JavaScript交互逻辑，再到PHP后台处理的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.入口文件index.html

    <!DOCTYPE HTML>    
    <html>    
    <head>    
        <title>反ajax推送</title>    
        <style>    
            .send{color:#555;text-align: left;}    
            .require{color:blue;text-align: right;}    
            .content_box{text-align: center;margin: 20px;    
                        border: 1px solid #ddd;padding: 20px;}    
        </style>    
        <script src="http://code.jQuery.com/jquery-1.11.2.min.js"></script>    
    </head>    
    <body>    
        <div class="content_box" id="content_box_title" style="border: none;">消息框</div>    
        <div class="content_box" id="content_box">    
        </div>    
        <div style="width: 450px;margin: 0 auto;">    
            <select id="username" style="font-size: 20px;">    
                <option value="1" selected="selected">1</option>    
                <option value="2">2</option>    
            </select>    
            <input type="text" style="font-size: 20px;" value="" id="send_text">    
            <button id="btn_send" style="font-size: 20px;">发送</button>    
            <button id="btn_link" style="font-size: 20px">连接</button>    
        </div>    
        <div class="error_tip" id="error_tip" style="color: red;">    
        </div>    
        <script>    
            $(function(){    
                //发送消息    
                $('#btn_send').click(function(){    
                    var send_text = $('#send_text').val();    
                    if(send_text.length <= 0){    
                        $('#error_tip').html('不能输入空值');    
                    }else{    
                        send(send_text);    
                    }    
                });    
                //按回车键发送消息    
                $('#send_text').on('keyup',function(e){    
                    if(e.keyCode == 13){    
                        $('#btn_send').trigger('click');    
                    }    
                });    
                //建立通讯链接    
                $('#btn_link').click(function(){    
                    connect();    
                    var _this = $(this);    
                    _this.attr('disabled',true);    
                    _this.html('已连接');    
                });    
        
        
            });    
            //建立通讯连接函数    
            function connect(){    
                $('#content_box_title').html($('#username').val()+'的消息窗口');    
                $.ajax({    
                    data:{'user':$('#username').val()},    
                    url:'ajaxPush.PHP',    
                    type:'get',    
                    timeout:0,    
                    dataType:'json',    
                    success:function(data){    
                        $('#content_box').append('<div class="require">'+data.msg+'</div>');    
                        connect();    
                    }    
                });    
            }    
            //发送消息函数    
            function send(massege){    
                var user =$('#username').val();    
                $.getJSON('write.php',{'msg':massege,'user':user},function(data){    
                    if(data.sf){    
                        $('#content_box').append('<div class="send">'+massege+'</div>');    
                        $('#send_text').val('');    
                    }else{    
                        $('#error_tip').html('输入保存错误！');    
                    }    
                });    
            }    
        </script>    
    </body>    
    </html>

2.ajax处理输入 write.php

    <?php    
    /**  
     * Created by TXM.  
     * Time: 2015/4/18 13:13  
     * function:  
     */    
        
        
    $filename  = dirname(__FILE__).'/data.txt';    
    $isread_file = dirname(__FILE__).'/isread.txt';    
    $user = dirname(__FILE__).'/user.txt';    
        
        
    //写入消息，消息未读，谁发送的消息    
    file_put_contents($filename,$_GET['msg']);    
    file_put_contents($isread_file,'0');    
    file_put_contents($user,$_GET['user']);    
        
        
    echo json_encode(array('sf'=>true));

3.长轮询推送 ajaxPush.php

    <?php    
    /**  
     * Created by TXM.  
     * Time: 2015/4/18 13:12  
     * function:  
     */    
    $filename  = dirname(__FILE__).'/data.txt';    
    $isread_file = dirname(__FILE__).'/isread.txt';    
    $userfile = dirname(__FILE__).'/user.txt';    
    $get_user = $_GET['user'] == '1'?'2':'1';    
    $msg='';    
        
        
    while(1){    
        $msg = file_get_contents($filename);    
        $isread = file_get_contents($isread_file);    
        $user = file_get_contents($userfile);    
        
        
        //是对方发送的消息，设置消息已读，退出循环。    
        if($isread == '0' && $get_user == $user){    
            file_put_contents($isread_file,'1');    
            break;    
        }    
        sleep(1);    
    }    
        
        
    echo json_encode(array('msg'=>$msg));