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 服务器发送的事件