PUSH using PHP, Ajax and Javascript/jQuery?

Question

I have a Chat webapp as part of a project for a client.

To store data, every line is logged in a .txt file and a Javascript/jQuery function that uses Ajax to retrieve data is called every 1000ms.

To prevent the function being called every second, is there a way for the page to be alerted to new data and only call the function when new data exists?

Here is my current function:

setInterval (loadLog, 1000);

function loadLog(){
    var chatCode = $('input#chatCode').val();
    var oldscrollHeight = $("#chatContent").innerHeight();
    var oldNum = $('#chatContent>div').length;

    $.ajax({
        url: "sessions/chats/log_"+chatCode+".html",
        cache: false,
        success: function(html){
            $('#chatContent').html(makePretty(html));
        }

            //Auto-scroll           
            var newscrollHeight = $("#chatContent").innerHeight(); //Scroll height after the request
            if(newscrollHeight > oldscrollHeight){
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal');
            }
        }
    })
}

And to send data:

$('form#chatSubmit').submit(function(e){
    var chatCode = $('input#chatName').val();                               
    $('#chatContent').append('<span id="sending">Sending...</span>');
    var newscrollHeight = $("#chatContent").innerHeight();
    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal');

    var clientmsg = $("#usermsg").val();
    var chatName = "<?php echo $_SESSION['code']; ?>";
    var chatData = [clientmsg,chatName,chatCode];
    var jsonChatData = JSON.stringify(chatData);
    $.post("inc/chatpost.php", { text: clientmsg, name: chatName, code: chatCode })
        .done(function(data){
            //console.log(data);
        });
    $("#usermsg").val('');
    return false;
    e.preventDefault();
});

for that you have to use event driven architecture, like node.js with socket.io — shyammakwana.me
– shyammakwana.me, Commented May 26, 2015 at 12:15
You have to use web socket to achieve this. Check out ratchet or similar — Vikas Arora
– Vikas Arora, Commented May 26, 2015 at 12:16
php-websocket and hoa-project both are websocket libraries for PHP , and easy to implement. — shyammakwana.me
– shyammakwana.me, Commented May 26, 2015 at 12:23
Thank you for your help. I understand that Websockets and frameworks for JS that can utilise them (like Node.js) is the way to go. I thought perhaps I was overlooking something more straightforward - like an eventListener for changes on an external page! — Ben
– Ben, Commented May 26, 2015 at 12:29

Hugo Zonderland · Accepted Answer · 2015-05-26 12:18:25Z

2

There is a way but that would require you to rewrite the application. There is this protocol called Websockets (see 1, 2, 3). If you are using a Javascript library like Node.js, they have support for this.

What you'll need is a Websocket server (something that actually pushes). There are Websocket servers for PHP (see 1, 2, 3). And the Websocket client (Javascript that receives the "push" and processes it). Please check out the links I've included for further research.

answered May 26, 2015 at 12:18

Hugo Zonderland

927 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

num8er · Accepted Answer · 2015-05-26 12:20:13Z

0

use ReactPHP and write Your own async application if You don't want use nodejs

here is example nice quickstart: https://www.youtube.com/watch?v=s6xrnYae1FU

answered May 26, 2015 at 12:20

num8er

19.5k4 gold badges50 silver badges61 bronze badges

Comments

Phil · Accepted Answer · 2015-05-26 12:30:46Z

0

Another way is to use a blocking ajax function which only returns when changes are detected or a timeout occurs. I have seen this idea referred to as "pseudo push" or "long polling". However you would still need to do the regular polling thing on the server side. Its not perfect but much better than making a client request every second. AFAIK Facebook still uses this method for its chat because websockets are not yet widely supported.

answered May 26, 2015 at 12:30

Phil

2,3411 gold badge23 silver badges27 bronze badges

Collectives™ on Stack Overflow

PUSH using PHP, Ajax and Javascript/jQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related