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中文网其他相关文章！
