HTML 伺服器傳送的事件-html教學-PHP中文網

HTML 伺服器傳送事件是 HTML API 中包含的場景之一，用於使用網頁自動從伺服器取得更新。這個概念包括一種在 Web 伺服器和 Web 瀏覽器之間工作的事件，稱為伺服器發送事件。

我們首先要添加一些程式碼來檢查我們的瀏覽器是否支援伺服器發送的事件；之後，我們將處理其他程式碼以獲得準確的輸出。與 WebSocket 不同，開發使用伺服器發送事件的 Web 應用程式總是更容易。

伺服器發送的事件如何在 HTML 中運作？

作為用戶，當我們嘗試執行某些事件並將其傳遞到伺服器時，例如點擊登入按鈕，登入詳細資訊將被傳送到伺服器。因此，在執行從 Web 瀏覽器傳遞到 Web 伺服器的此類事件時，該事件稱為用戶端事件。
但是我們正在執行與上述過程相反的操作，這意味著從伺服器向 Web 瀏覽器發送資料或事件稱為伺服器發送事件。因此，當瀏覽器從伺服器自動更新時，系統中就會發生此類事件。
伺服器發送的事件始終被視為單向的，因為它只在一個方向上處理，即從伺服器到客戶端。因此，此過程的主要屬性之一是 EventSource 屬性及其物件。
因此該物件附加了 url、請求、重新連接時間和最後事件 ID 字串等術語。那麼讓我們一一看看。
- 網址：這將在建置過程中設定。
- 請求：我們必須先將其初始化為 null。
- 重新連接時間：這是以毫秒為單位的時間戳。
- 最後一個事件 ID 字串： 我們也必須將字串值初始化為空字串。

接收伺服器發送的事件通知

之前，我們討論了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>

登入後複製

在上面的範例中，我們定義了 EventSource 屬性的對象，包括我們發送更新的頁面的 url；所有更新都是透過訊息呼叫的事件接收的，這有助於定義名為 demo 的 id。

文法：

第一步是檢查我們的瀏覽器是否支援伺服器發送的事件。所以我們會在程式中放入一小段程式碼來檢查其瀏覽器是否支援。

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>";
}

登入後複製

如上面的語法所示，首先，我們必須建立一個 EventSource 屬性的新對象，同時定義檔案的 url。這將幫助我們向網頁瀏覽器發送更新。
因此，每當伺服器有任何更新時，訊息上都會發生該事件，並且它將在 Web 文件上列印所需的訊息。

HTML 伺服器傳送事件的範例

html 伺服器傳送事件的範例如下：

範例#1

在第一個範例中，我們將檢查我們的瀏覽器是否支援伺服器發送事件。如果一切正常，它將在輸出視窗中顯示時間，如果不支援瀏覽器，它將在瀏覽器視窗上列印錯誤訊息。 代碼：

<!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 伺服器發送事件。

HTML 伺服器傳送的事件

範例#2

此範例針對伺服器傳送事件，我們計算在瀏覽器上載入伺服器傳送事件所需的時間。此時間戳以秒為單位。

代碼：

<!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 秒。

HTML 伺服器傳送的事件

範例#3

這是我們嘗試顯示連線建立的範例。讓我們運行程式碼，看看輸出是什麼：

代碼：

<!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 伺服器傳送的事件