HTML5 伺服器傳送事件

Created: October-16, 2018

HTML5 伺服器傳送的事件允許網頁自動從 Web 伺服器獲取資訊。

什麼是伺服器傳送的事件

HTML5 伺服器傳送事件是網頁與 Web 伺服器通訊的新方式。XMLHttpRequest 物件也可以讓你的 JavaScript 程式碼向 Web 伺服器發出請求。但它是一對一的交換 - 這意味著一旦 Web 伺服器提供其響應，通訊就結束了。

但是，在某些情況下，網頁需要與 Web 伺服器建立長期連線。一個典型的例子是金融網站上的股票報價，其中價格自動更新。另一個例子是在各種媒體網站上執行的新聞自動收報機。

你可以使用 HTML5 伺服器傳送的事件功能建立此類效果。它允許網頁保持與 Web 伺服器的開放連線，以便 Web 伺服器可以隨時自動傳送新響應，並且無需重新連線，並且一遍又一遍地從頭開始執行相同的伺服器指令碼。

提示： 除了 Internet Explorer 之外，所有主要的現代瀏覽器（如 Firefox，Chrome，Safari 和 Opera）都支援 HTML5 的伺服器傳送事件功能。

使用伺服器指令碼傳送訊息

讓我們建立一個名為’server_time.php’的 PHP 檔案，並在其中鍵入以下指令碼。它將定期報告 Web 伺服器內建時鐘的當前時間。稍後我們將收到此時間並相應地更新網頁。

<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
 
// Get the current time on server
$currentTime = date("h:i:s", time());
 
// Send it in a message
echo "data: " . $currentTime . "\n\n";
flush();
?>

PHP 指令碼的前兩行設定了兩個重要的標題。首先，它將 MIME 型別設定為 text/event-stream，這是伺服器端事件標準所必需的。第二行告訴 Web 伺服器關閉快取，否則可能會快取指令碼的輸出。

通過 HTML5 伺服器傳送的事件傳送的每條訊息都必須以文字 data: 開頭，後跟實際的訊息文字和新的行字元序列（\n\n）。

最後，我們使用 PHP flush() 函式確保資料立即傳送，而不是緩衝直到 PHP 程式碼完成。

處理網頁中的訊息

EventSource 物件用於接收伺服器傳送的事件訊息。讓我們建立一個名為’demo_sse.html’的 HTML 文件，並將其放在’server_time.php’檔案所在的同一專案目錄中。此 HTML 文件只接收 Web 伺服器報告的當前時間並將其顯示給使用者。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Server-Sent Events</title>
<script type="text/javascript">
    window.onload = function(){
        var source = new EventSource("server_time.php");
        source.onmessage = function(event){
            document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>";
        };
    };
</script>
</head>
<body>
    <div id="result">
        <!--Server response will be inserted here-->
    </div>
</body>
</html>