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, May 26 '15 at 12:15
You have to use web socket to achieve this. Check out ratchet or similar — Vikas Arora, May 26 '15 at 12:16
[php-websocket](https://github.com/nicokaiser/php-websocket) and [hoa-project](https://github.com/hoaproject/Websocket) both are websocket libraries for PHP , and easy to implement. — shyammakwana.me, May 26 '15 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, May 26 '15 at 12:29

score 2 · Accepted Answer · answered May 26 '15 at 12:18

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.

score 0 · Answer 2 · answered May 26 '15 at 12:20

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 '15 at 12:20

num8er

18,604
3
43
57

score 0 · Answer 3 · answered May 26 '15 at 12:30

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.

PUSH using PHP, Ajax and Javascript/jQuery?

3 Answers3

Linked