使用SSE獲取mysql select的響應

Question

我正在嘗試使用EventSource創建一個實時連接聊天1到1.我已經設置了我的事件源，並且開發人員工具告訴我，它是打開的並且正在工作但是PHP文件中沒有顯示響應數據。

PHP：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

session_start(); // Starting Session
include 'dbconnect.php';
include 'Session.php';

$messageuserid = $_GET['messageuserid'];

$RunSqlGM = "SELECT * FROM messages WHERE (SUsername = '$Session_Username' AND RUsername = '$messageuserid') OR (SUsername = '$messageuserid' AND RUsername = '$Session_Username')";
$getmessagethread = mysqli_query($con,$RunSqlGM)or die(mysqli_error());

while($MessageRows = mysqli_fetch_array($getmessagethread)) {
    $MSUsername = $MessageRows['SUsername'];
    $MRUsername = $MessageRows['RUsername'];
    $MSender = $MessageRows['Sender'];
    $MessageContent = $MessageRows['Message'];
    $TimeStamp = date("g:ia \o\\n l jS F Y", strtotime($MessageRows["Time"]));


    if ($MSender === $Session_Username) {
        echo "<table class='messagebubbleright'>";
            echo "<tr><th></th></tr>";
            echo "<tr>";
                echo "<td class='inforight'>$MSender<br>$TimeStamp</td>";
            echo "</tr>";
            echo "<tr>";
                echo "<td class='bubbleright'>$MessageContent</td>";
            echo "</tr>";
        echo "</table>";
        flush();
    } else {
        echo "<table class='messagebubbleleft'>";
            echo "<tr><th></th></tr>";
            echo "<tr>";
                echo "<td class='infoleft'>$MSender<br>$TimeStamp</td>";
            echo "</tr>";
            echo "<tr>";
                echo "<td class='bubbleleft'>$MessageContent</td>";
            echo "</tr>";
        echo "</table>";
        flush();
    }
}
mysqli_close($con); // Connection Closed
?>

並且調用事件源的js包含在此函數中，該函數通過單擊按鈕啟動。

JS：

function GetMessages(GetMUserID) {
    if (typeof(EventSource) !== "undefined") {
        var source = new EventSource("db/getmessages.php?messageuserid=" + GetMUserID);
        source.addEventListener("open", function() {
            $("#readmessagearea").html("Getting server updates");
        });

        source.addEventListener("message", function(event) {
            $("#readmessagearea").html(event.data);
        });

    } else {
        $("#readmessagearea").html("Sorry, your browser does not support server-sent events...");
    }
}

任何幫助或指導將不勝感激。 我對SSE比較陌生，但從我看到的情況來看，這應該有用。

Answer 1

PHP代碼存在一些問題。 容易修復的是最好將flush()更改為@ob_flush();@flush() 。 ob_flush()確保PHP不會緩沖任何內容， @ signs只是確保在沒有使用緩沖時不會收到警告消息。

第二個問題是SSE協議是最小的，但不是那么小！ 您需要在消息前面加上“data：”，並在后面添加“\\ n \\ n”。 您的HTML不包含任何自己的換行符，所以我認為它會起作用。 （除非$MessageContent或任何其他動態數據中有換行符...我建議不僅使用回車符進行數據過濾，還要建議HTML標記，因為您當前的代碼容易受到嵌入式HTML攻擊。）

另一種方法：另一種方法是只發送一個JSON對象，包含$MessageRows["Time"] ， $MSender ， $MessageContent等，讓JavaScript客戶端創建HTML。 這更靈活（例如，不同國家/地區的客戶可以擁有自己的日期戳格式，可以更改布局等，而無需觸及后端），但可以將更多工作轉移到前端。