HTML 伺服器傳送事件是 HTML API 中包含的場景之一，用於使用網頁自動從伺服器取得更新。這個概念包括一種在 Web 伺服器和 Web 瀏覽器之間工作的事件，稱為伺服器發送事件。
我們首先要添加一些程式碼來檢查我們的瀏覽器是否支援伺服器發送的事件；之後，我們將處理其他程式碼以獲得準確的輸出。與 WebSocket 不同，開發使用伺服器發送事件的 Web 應用程式總是更容易。
之前，我們討論了EventSource屬性；它也與其物件一起使用來接收伺服器事件通知。
EventSource屬性的實際使用如下範例：
代碼：
<!DOCTYPE html>
<html>
<body>
<h1>Receive Sever-sent Event</h1>
<div id="demo"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ssedemo.html");
source.onmessage = function(event) {
document.getElementById("demo").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("demo").innerHTML = "Oops, your browser is not going to support Secure-sent event";
}
</script>
</body>
</html>文法：
if(typeof(EventSource) !== "undefined") {
// Server-sent event supported code
// Program code
}
else {
//Oops! Server-sent event is not supported code
}文法：
if(typeof(EventSource) !== "undefined") {
var object = new EventSource("File_URL");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}html 伺服器傳送事件的範例如下：
在第一個範例中，我們將檢查我們的瀏覽器是否支援伺服器發送事件。如果一切正常，它將在輸出視窗中顯示時間，如果不支援瀏覽器，它將在瀏覽器視窗上列印錯誤訊息。 代碼：
<!DOCTYPE html>
<html>
<head>
<title>HTML Server-sent Event</title>
</head>
<body>
<div id="sse_demo">
</div>
<script type="text/javascript">
if(typeof(EventSource)!=="undefined")
{
alert("Yes Your browser is going to support Server-Sent Event");
}
else
{
alert("Sorry! Yes Your browser is not going to support Server-
Sent Event");
}
</script>
</body>
</html><strong> </strong>輸出：
我們在輸出畫面上看到數位時間，這表示我們的瀏覽器將支援 HTML 伺服器發送事件。
此範例針對伺服器傳送事件，我們計算在瀏覽器上載入伺服器傳送事件所需的時間。此時間戳以秒為單位。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML API _ Server-Sent Events</title>
<script>
window.onload = function()
{
var path = new EventSource("server_time.html");
path.onmessage = function(event)
{
document.getElementById("sse_output").innerHTML += "Required
timestamp received from web server: " + event.data + "<br>";
};
};
</script>
</head>
<body>
<div id="sse_output">
<!--This will display required time of server to load contents-->
</div>
</body>
</html>輸出：
如下面的輸出畫面所示，載入時間顯示為 1 秒。
這是我們嘗試顯示連線建立的範例。讓我們運行程式碼，看看輸出是什麼：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height" />
<title> Server-Sent Events </title>
<style type="text/css">
font-family: ‘Times new Roman’;
</style>
</head>
<body>
<h4> Server-Sent Events Example </h4>
<ul></ul>
<script>
(function()
{ "use strict";
var ev_check = document.querySelector('ul');
var ssl = new EventSource('/events');
function li(text) {
var li = document.createElement('li');
li.innerText = text;
ev_check.appendChild(li);
}
ssl.addEventListener('open', function()
{
li('Server connection done succussfully.');
});
ssl.addEventListener('my-custom-event', function(event)
{
li(event.data);
});
ssl.addEventListener('error', function()
{
li('Server connection failed.');
});
})();
</script>
</body>
</html>輸出：
上述程式碼在瀏覽器視窗上運行後，它將在伺服器連線失敗時產生輸出。
從以上所有資訊來看，HTML Server-send Event 是一個新的 API，用作單向事件流程，使用者可以在其中建立從 Web 伺服器到 Web 瀏覽器的事件。它使用屬性EventSource。使用它可以看到事件載入時間。這用於 Facebook、新聞提要、股票價格更新等
以上是HTML 伺服器傳送的事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
