如何每2秒刷新一次页面？

Question

我想设置一个 web 信使。 所以我想每 1 或 2 秒重新加载一次我的页面。 实际上我想要静默重新加载以从我的数据库中获取新的聊天记录。 大多数方法只是重新加载页面并清除所有输入。 请帮我。

我试过了： function loadlink(){ $('#links').load('test.php',function () { $(this).unwrap(); }); } loadlink(); setInterval(function(){ loadlink() }, 5000); function loadlink(){ $('#links').load('test.php',function () { $(this).unwrap(); }); } loadlink(); setInterval(function(){ loadlink() }, 5000);

并且： <meta http-equiv="refresh" content="2">

Answer 1

每 2 秒刷新整个页面不是一个好主意。 您应该阅读有关WebSockets的更多信息或使用ajax

Answer 2

这个标签刷新了整个页面，不太理想：

元 http-equiv="刷新" 内容="2"

在这里，我找到了一篇关于此的完整文章。

它使用 php、MySql（存储聊天和身份验证）和 vanilla js ajax 调用来刷新聊天。

正如其他人所说，每 2 秒执行一次 ajax 请求可能会降低您的服务器速度。 最好尝试 3-5 秒。

此示例使用 5 秒。 它由 setInterval() 设置，使用毫秒。 5000 毫秒 = 5 秒。

这是更新对话的 ajax 部分（从示例中复制）：

setInterval(() => {
    // If the current tab is 2
    if (currentChatTab == 2) {
        // Use AJAX to update the conversations list
        fetch('conversations.php', { cache: 'no-store' }).then(response => response.text()).then(html => {
            let doc = (new DOMParser()).parseFromString(html, 'text/html');
            document.querySelector('.chat-widget-conversations').innerHTML = doc.querySelector('.chat-widget-conversations').innerHTML;
            conversationHandler();
        }); 
    // If the current tab is 3 and the conversation ID variable is not NUll               
    } else if (currentChatTab == 3 && conversationId != null) {
        // Use AJAX to update the conversation
        fetch('conversation.php?id=' + conversationId, { cache: 'no-store' }).then(response => response.text()).then(html => {
            // The following variable will prevent the messages container from automatically scrolling to the bottom if the user previously scrolled up in the chat list
            let canScroll = true;
            if (document.querySelector('.chat-widget-messages').lastElementChild && document.querySelector('.chat-widget-messages').scrollHeight - document.querySelector('.chat-widget-messages').scrollTop != document.querySelector('.chat-widget-messages').clientHeight) {
                canScroll = false;
            }                    
            let doc = (new DOMParser()).parseFromString(html, 'text/html');
            // Update content
            document.querySelector('.chat-widget-messages').innerHTML = doc.querySelector('.chat-widget-messages').innerHTML;
            if (canScroll && document.querySelector('.chat-widget-messages').lastElementChild) {
                // Scroll to the bottom of the container
                document.querySelector('.chat-widget-messages').scrollTop = document.querySelector('.chat-widget-messages').lastElementChild.offsetTop;
            }                   
        });  
    // If the current tab is 3 and the status is Waiting           
    } else if (currentChatTab == 3 && status == 'Waiting') {
        // Attempt to find a new conversation between the user and operator (or vice-versa)
        fetch('find_conversation.php', { cache: 'no-store' }).then(response => response.text()).then(data => {
            if (data != 'error') {
                // Success! Two users are now connected! Retrieve the new conversation
                getConversation(data);
            }
        });               
    }
}, 5000); // 5 seconds (5000ms) - the lower the number, the more demanding it is on your server.

注意：它还有更多部分，ajax 调用只是蛋糕的一小部分。