Question

基本上，我正在开发ajax聊天（php，mysql，javascript，ajax）在代码的一部分中，我使用ajax在div中获取所有聊天消息，而ajax函数每2秒运行一次。

我的主要问题是div每2秒向下滚动一次，我只需要在有新条目时向下滚动（向下滚动所有聊天用户，而不仅仅是我）

function loadLog(){     
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    $.ajax({
        url: "ajaxchat.php",
        cache: false,
        success: function(html){
            $("#chatbox").html(html); //Insert chat log into the #chatbox div               
            var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
            if(newscrollHeight > oldscrollHeight){
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //i need to scroll if only there is new entry not every 2.5 sec 
            }               
        },
    });
}
setInterval (loadLog, 2500);    //Reload file every 2.5 seconds

Answer 1

一个简单的解决方案是在更新chatbox之前检查新的HTML与旧的HTML是否不同。这样可以确保仅在从服务器获取新内容时才更新chatbox。但是，如果您回答HTML不一致，则将无法使用。

var previousChatHTML = '';
function showChatMessages(html) {
    if(previousChatHTML === html){
        return;
    }
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    $("#chatbox").html(html); //Insert chat log into the #chatbox div  
    previousChatHTML = html;   
    var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    if(newscrollHeight > oldscrollHeight){
        $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //i need to scroll if only there is new entry not every 2.5 sec 
    }               
}

function loadLog(){     
    $.ajax({
        url: "ajaxchat.php",
        cache: false,
        success: showChatMessages,
    });
}
setInterval (loadLog, 2500);    //Reload file every 2.5 seconds

另外，在JS中创建轮询器时，您可能希望使用setTimeout（https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout）而不是setInterval，因为在慢速连接上，您可能会得到奇怪的结果（如果请求花费的时间超过2.5秒，则可能以错误的顺序解析））。

Answer 2

您不能使用LAMP进行此操作您需要对服务器事件的响应。您可以使用此堆栈

NodeJS：服务器端/ https://nodejs.org/es/
Socket.IO：实时服务器/客户端通信：https://socket.io/
Firebase：用于实时通信的https://firebase.google.com/ BaaS数据库

您的服务器需要响应数据库事件。 PHP对客户端事件的响应。

如何仅在需要时而不是每秒钟处理Ajax请求

2 个答案: