Welcome Guest, Not a member yet? Register   Sign In
Long-Polling AJAX requests
#7

[eluser]slowgary[/eluser]
It works, but definitely needs tweaking. If there's no new data for a while, eventually the script hits the max_execution_time. I'd probably just get that time limit at the top and check it on each loop, throwing a "request for new request" (if that makes sense) if the max execution has been reached. Although it would have to be before the max time, so I'm not sure how to handle that

Something I've also come across is that new data cannot be tracked by time. I put together a basic chat room to test this, but if I send 3 inputs really quickly, they all go into the database with the same timestamp, which means that clients only get 1 of them.

My current attempt is below, I haven't had a lot of time to play with it. It works, but somehow still manages to fill my error log extremely quickly. It needs work.

HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

&lt;html &gt;

&lt;head&gt;
    &lt;title&gt;Testing&lt;/title&gt;
    &lt;meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' /&gt;
    &lt;style type='text/css'&gt;
    body {
        background: #CF9;
    }

    #chat {
        position: relative;
        width: 400px;
        height: 400px;
        background: #F6F6F6;
        border: 1px solid #693;
    }

    #update {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 32px;
        width: 400px;
        overflow-y: scroll;
    }

    #handle {
        display: none;
        position: absolute;
        width: 94px;
        left: 0;
        bottom: 0;
        height: 24px;
        line-height: 24px;
        padding: 3px;
        font-size: 18px;
        outline: none;
        border: none;
        border-top: 1px solid #999;
        background: #EEE;
    }

    #input {
        position: absolute;
        width: 394px;
        left: 0;
        right: 0;
        bottom: 0;
        height: 24px;
        line-height: 24px;
        padding: 3px;
        font-size: 18px;
        outline: none;
        border: none;
        border-top: 1px solid #999;
        background: #FFF;
    }

    #chat_form {
        width: 400px;
        margin: 0;
        padding: 0;
    }

    #chat_form input[type=submit] {
        display: none;
    }

    .text {
        display: none;
        padding: 5px;
        font-size: 12px;
        font-family: sans-serif;
        line-height: 1em;
    }

    .handle {
        color: #090;
        font-weight: bold;
    }
    &lt;/style&gt;
    [removed][removed]
    [removed]
        $(function(){
            var $update = $('#update');
            var $input = $('#input');
            var $handle = $('#handle');

            $input.focus();

            $(document).bind('focus, click', function(){
                $input.focus();
            });

            $('#chat_form').bind('submit', function(event){
                event.preventDefault();
                $.post(
                        '/input.php',
                        { text : $input.val(), handle: $handle }
                    );
                $input.val('');
            });

            var poll = function(){
                $.post(
                        '/output.php',
                        { user_id : 1 },
                        function(data){
                            if(data.status == 'success')
                            {
                                $("<div class='text'><span class='handle'>" + data.handle + ": </span>" + data.text + '</div>')
                                    .appendTo($update)
                                    .fadeIn('fast');
                            }
                            poll();
                        },
                        'json'
                    );
            };

            setTimeout(function(){poll();}, 1);
        });
    [removed]
&lt;/head&gt;

&lt;body&gt;

<div id='chat'>
    <div id='update'>
    </div>

    &lt;form action='#' method='post' id='chat_form'&gt;
        <div>
            &lt;input type='text' id='handle'/&gt;
            &lt;input type='text' id='input'/&gt;
            &lt;input type='submit'/&gt;
        </div>
    &lt;/form&gt;
</div>

&lt;/body&gt;

&lt;/html&gt;

INPUT:
Code:
&lt;?php
    if(isset($_POST['text']))
    {
        mysql_connect('localhost', 'username', 'password');
        mysql_select_db('databasename');
        mysql_query("INSERT INTO data VALUES(DEFAULT, '".mysql_real_escape_string($_POST['text'])."', '".time()."')");
    }
?&gt;


Messages In This Thread
Long-Polling AJAX requests - by El Forum - 09-10-2009, 11:31 PM
Long-Polling AJAX requests - by El Forum - 09-10-2009, 11:57 PM
Long-Polling AJAX requests - by El Forum - 09-11-2009, 07:36 PM
Long-Polling AJAX requests - by El Forum - 09-11-2009, 07:53 PM
Long-Polling AJAX requests - by El Forum - 09-16-2009, 12:55 AM
Long-Polling AJAX requests - by El Forum - 09-16-2009, 01:11 AM
Long-Polling AJAX requests - by El Forum - 09-16-2009, 04:29 PM
Long-Polling AJAX requests - by El Forum - 09-16-2009, 04:30 PM
Long-Polling AJAX requests - by El Forum - 09-16-2009, 05:56 PM
Long-Polling AJAX requests - by El Forum - 09-16-2009, 07:55 PM
Long-Polling AJAX requests - by El Forum - 09-16-2009, 09:01 PM



Theme © iAndrew 2016 - Forum software by © MyBB