我有一个聊天web应用作为客户端的项目的一部分。

要存储数据，每一行被记录在 .TXT 文件和一个Javascript / jQuery的功能，使用阿贾克斯检索数据被调用每1000毫秒。

要prevent被调用的函数每一秒，是有办法的网页要警惕新的数据，只有当新的数据存在调用函数

下面是我目前的功能：

 的setInterval（loadLog，1000）;

传播loadLog（）{
    VAR聊天code = $（'＃输入聊天code'）VAL（）。
    变种oldscrollHeight = $（＃chatContent）innerHeight（）。
    VAR oldNum = $（'＃chatContent＆GT; DIV'）。长度;

    $阿贾克斯（{
        网址：会议/聊天/日志_+聊天code +，HTML。
        缓存：假的，
        成功：函数（HTML）{
            $（'＃chatContent）HTML（使pretty的（HTML））;
        }

            //自动滚动
            变种newscrollHeight = $（＃chatContent）innerHeight（）。该要求后//滚动高度
            如果（newscrollHeight＆GT; oldscrollHeight）{
                $（＃客舱）动画（{scrollTop的：newscrollHeight}，正常）。
            }
        }
    }）
}
 

和发送数据：

  $（'＃形式chatSubmit）。递交（函数（五）{
    VAR聊天code = $（'＃输入chatName）VAL（）。
    $（'＃chatContent）追加（'＆LT;跨度ID =发送＆GT;发送...＆LT; / SPAN＆GT;'）;
    变种newscrollHeight = $（＃chatContent）innerHeight（）。
    $（＃客舱）动画（{scrollTop的：newscrollHeight}，正常）。

    。VAR clientmsg = $（＃usermsg）VAL（）;
    VAR chatName =＆LT; PHP的echo $ _SESSION [code'];＆gt;中;
    VAR chatData = [clientmsg，chatName，聊天code]。
    VAR jsonChatData = JSON.stringify（chatData）;
    $。员额（INC / chatpost.php，{文字：clientmsg，名称：chatName，code：聊天code}）
        .done（功能（数据）{
            //console.log(data）;
        }）;
    $（＃usermsg）VAL（''）。
    返回false;
    即preventDefault（）;
}）;
 

解决方案

有一种方法但这需要您重新编写应用程序。有这个协议称为WebSockets的（见 1 ，的 2 ， 3 ）。如果您使用的是JavaScript库一样Node.js的，他们有这种支持。

你需要什么是WebSocket的服务器（的东西，实际上是推）。有对PHP的WebSocket服务器（见 1 ， 2 ， 3 ）。和的WebSocket客户（的Javascript接收推和处理它）。请看看我已经包括了需要进一步研究的链接。

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();
});

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.