創建基於AJAX的聊天系統。如何避免頁面刷新提交的內容並顯示新的消息

Question

我正在嘗試在PhP上創建一個簡單的聊天系統。
我的想法很簡單，我有一個表單，用PHP發送文本到腳本，該腳本將var保存在數據庫中，然后另一個用戶刷新頁面以下載新消息並將其顯示在聊天框中。
問題來了，當我說刷新頁面時。
我認為這可能是一個問題，用戶每秒刷新整個頁面或更少感謝JavaScript函數。
最初的想法是使用setInterval()但知道我認為這可能是一個壞主意。
我不確定，但是當您刷新表單時從chrome中保存表單並自動填充表單，一旦完成刷新，每個瀏覽器都會這樣做嗎？
Willa用於刷新頁面的JavaScript函數對於誰擁有非常慢的連接是一個問題？

但最重要的是，要解決這個問題，實際上可以只刷新一個特定的PHP腳本，允許用戶只刷新該腳本並下載新消息，而不必每秒刷新整個頁面？

所有的幫助將不勝感激。

-注意-

說實話，那個想讓我做那個聊天系統的人讓我不要使用JavaScript，所以理論上我甚至不允許使用setInterval()

Answer 1

使用名為load（）的jQuery函數。 發布聊天頁面的基本HTML標記，我將使用特定答案進行編輯。

$("#messageboard").load("chat.php #messageboard > *");

在您的ajax請求中提交聊天之后將此代碼保存。 更改#messageboard以獲取需要刷新的留言板div的ID。 更改chat.php以顯示聊天的頁面。 為了節省加載時間，您可以將GET變量傳遞到聊天頁面，並防止完全加載頁面並僅返回消息。

您還可以使用setTimeout函數，但兩者都需要在頁面上運行，以便提交消息的用戶立即看到刷新（沒有延遲）

function startTimer() {
     $("#messageboard").load("chat.php #messageboard > *", function(){
          //repeats itself after 1 seconds
          setTimeout(startTimer, 1000);
     });
}

startTimer();

在上面，1000是毫秒，所以等於1秒。

使用setTimeout的優點是，如果連接掛起一段時間，您將無法獲得大量待處理請求，因為新的請求只會在上一個請求完成后發送。

我假設您使用ajax提交用戶消息，因此每次用戶發布內容時頁面都不會刷新。 需要一個例子嗎？

<html>
<head>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script>
    $('document').ready(function(){
        $('#submit').click(function(){
            var message = $('#message').val();
            $('#message').reset();
            $.post('chat.php',{message: message},function(response){
                $("#messageboard").load("chat.php #messageboard > *");
            });
        })
        $('#message').keypress(function(e){
            if(e.which == 13){//Enter key pressed
                var message = $('#message').val();
                $('#message').reset();
                $.post('chat.php',{message: message},function(response){
                    $("#messageboard").load("chat.php #messageboard > *");
                });
            }
        });

        function startTimer() {
          $("#messageboard").load("chat.php #messageboard > *", function(){
              //repeats itself after 1 seconds
              setTimeout(startTimer, 1000);
          });
        }

        startTimer();
    });
</script>
</head>
<body>
<div id="messageboard"></div>
<input type="text" placeholder="Message" id="message"><input value="submit" type="button" id="submit">
</body>
</html>

以上將在提交按鈕上觸發POST，但如果用戶點擊則輸入。 該腳本將自動刷新，但也會刷新新的輸入提交。 這只是一個概念。 確保創建服務器端處理程序以將消息保存到DB。

Answer 2

如果你只想使用php（服務器端），你可以使用php緩存來避免刷新頁面並處理位於服務器上的文件中的消息。 您可以在while循環中檢查某些文件內容，然后顯示然后將其擦除，直到超時為止。 提交表單可以使用php將數據寫入文件。 您可以根據需要創建XML，但這是一種原始方法：在瀏覽器中顯示/刷新數據的文件：testChat.php

<?php
$timeout=200;
set_time_limit($timeout+1);//Maximum execution time.
flushBrowser();//Print space chars to have cache flush on browsers.
$str='';
while ($timeout>0){
    //Flush data to display
    ob_flush();
    flush();
if ($str!=checkPostMsgQueued())
echo checkPostMsgQueued()."\n";
$str=checkPostMsgQueued();
    //wait...
    sleep(1);
    $timeout-=1;
}
ob_end_flush();


//Many browsers seems to receive some data before flushing.
function flushBrowser(){
if (ob_get_level() == 0) ob_start();
echo str_pad('',4096)."\n";   
}
function checkPostMsgQueued(){
        $filename="testChat.txt";
        if (file_exists($filename)){
            $stream=fopen($filename, 'r');
            $str=stream_get_line($stream,128);
            fclose($stream);
        }
        return $str;
}

testchatsubmit.php：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<form action="testChatSubmit.php" method="post">
    <input type="text" name="message" id="message">
    <input type="submit" name="submit">
</form>
</body>
</html>
<?php
if (isset($_POST['message'])){
$fp = fopen('testChat.txt', 'w');
fwrite($fp, $_POST['message']);
fclose($fp);
}
?>

順便說一句，正如我所說，這樣做可能有點苛刻...... ~~我認為你別無選擇，只能使用一些客戶端語言在同一頁面上顯示和發布數據~~ ：）祝好運！

編輯：

以下是它的方法：

制作另一個html文件，包含2個iframe：testchatframes.html：

 <iframe src="testchat.php"></iframe> 
 <iframe src="testchatsubmit.php"></iframe>

我還修改了一些初始testChat.php代碼的塊，使其可以在多個“客戶端”上工作（我在localhost上試過），使用流而不是粗暴地刪除行...我不認為這是正確的方法（也許你應該注意到“那個想要你這么做的人”），但這很有趣並且有效！ 它甚至看起來都不那么昂貴...... :)干杯！

Answer 3

對於刷新部分，您可以使用<META http-equiv="refresh" content="3; URL=truc.php">而不是setInterval（順便說一句，setTimeout就足夠了，因為它會在每次刷新頁面時發生一次）。

對於表單重新填寫，當您提交消息時，它將刷新頁面並釋放表單，這樣就可以了。 對於那些只是“閱讀”的人，如果他開始輸入內容並且頁面刷新它應該在刷新后保留它，所以il看起來也好嗎？ 但您可以添加autocomplete="off"以確保表單不會提示任何不需要的內容。

創建基於AJAX的聊天系統。如何避免頁面刷新提交的內容並顯示新的消息

問題描述

3 個解決方案

解決方案1
0 2017-07-22 14:45:43

解決方案2
0 2017-07-22 15:37:30

解決方案3
0 已采納 2017-07-22 21:43:47

創建基於AJAX的聊天系統。 如何避免頁面刷新提交的內容並顯示新的消息

問題描述

3 個解決方案

解決方案1 0 2017-07-22 14:45:43

解決方案2 0 2017-07-22 15:37:30

解決方案3 0 已采納 2017-07-22 21:43:47

創建基於AJAX的聊天系統。如何避免頁面刷新提交的內容並顯示新的消息

解決方案1
0 2017-07-22 14:45:43

解決方案2
0 2017-07-22 15:37:30

解決方案3
0 已采納 2017-07-22 21:43:47