Ajax post comment like StackOverflow [closed]

Question

My question is, what is better way to do comments system like on StackOverflow, I mean I send request from my browser and everybody will see this comment (or in other browser) without refreshing page like some chat.

My solution was to use setInterval, but I think there must be another way

$(document).ready(function() {
get();
$('#send').click(function() {
    $.post('http://localhost/mvc.com/comment/post', {
        n_id: parseInt(newsId),
        user_id: $('#uid').val(),
        text: $('#content').val(),
        token: $('#token').val()
    }, function (ret) {
        if (ret.comm.err) {
            $('.f').empty().prepend('<li id=e><h3 style="color: red">ERROR</h3></li>');
            return false;
        }
        get();
    });
    setInterval(get,3000);
});

$('#content').keypress(function(e){
    var key = e.which;
    var cnt=$(this).val().length;
    var max=100;
    var tot=parseInt(max-cnt);
    if(key >= 33 || key == 13 || key == 32) {
        if (parseInt(tot) <= 0) {
            e.preventDefault();
        }
    }
});

function get() {
    $.post('http://localhost/mvc.com/comment', {get: parseInt(newsId)}, function (ret) {
        $('.f').empty();
        for (var key in ret.comm) {
            $('.f').append('<li class=c id=' + ret.comm[key].id +
            '><span>' + ret.comm[key].name + '</span><hr><br>' + ret.comm[key].text + '</li>');
        }
    });
}

Answer 1

Though I have seen your aforementioned approach being used for real time updates but it is not the correct way to do it.

You will need to use web sockets which are the de facto for real time web applications.

Web sockets are a subject in itself and I can keep going but here is a link to get you started on them: http://socketo.me

Answer 2

You don't need setInterval. What you can do is so called long polling:

Javascript: you define ajax function that is calling itself on complete:

function poll(){
    $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: function(msg){
            update_poll(msg);//here you update your span, div, whatever what contains this comment
        },
        dataType: "text",
        complete: function(){
            poll();//here you call it again
        }
    });
}
$(document).ready(function(){
    poll();//call it just once
});

PHP: you start a one minute loop, which checks every 3 seconds for the new entry in your database:

if(isset($_POST['n_id'])){
    $n_id = (int) $_POST['n_id'];
    $time = time();
    while((time() - $time) < 60) {
       $last entry = get_last_entry($n_id);
       if($last entry){
           echo $last_entry;//if found new entry, echo it out and break the loop
           break;
       }
        sleep(3);//wait 3 seconds
    }
}