HTML - 服务器发送事件

你好，有抱负的网页开发者们！今天，我们将深入探讨服务器发送事件（Server-Sent Events，简称SSE）的精彩世界。如果你是编程新手，不用担心；我会一步一步地引导你了解这个主题，就像我多年来为无数学生所做的那样。那么，拿起一杯咖啡，让我们开始吧！

HTML - Server Sent Events

服务器发送事件是什么？

在我们跳进代码之前，先来了解一下服务器发送事件是什么。想象你在网上观看一场直播体育比赛。你希望看到分数更新，而且不需要刷新页面就能实时看到。这就是SSE派上用场的地方！

服务器发送事件允许网页自动从服务器接收更新。这就像有一条直通服务器的电话线，服务器可以随时给你发消息，而不需要你不断地询问。

在Web应用程序中如何使用SSE？

现在我们理解了这个概念，来看看如何在我们的Web应用程序中实现SSE。我们将从客户端代码开始，这部分代码是用HTML和JavaScript编写的。

第一步：创建EventSource对象

首先，我们需要在JavaScript代码中创建一个EventSource对象。这个对象将建立与服务器的连接。

<h1>实时体育比分</h1>
<div id="score"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("score_updates.php");
source.onmessage = function(event) {
document.getElementById("score").innerHTML = event.data;
};
} else {
document.getElementById("score").innerHTML = "抱歉，您的浏览器不支持服务器发送事件...";
}
</script>

让我们分解一下：

我们创建了一个标题和一个div元素，用于显示分数。
在脚本中，我们首先检查浏览器是否支持EventSource。
如果支持，我们创建一个新的EventSource对象，指定我们的服务器端脚本的URL。
然后我们设置了一个onmessage事件处理器。这个函数将在我们每次从服务器接收到消息时被调用。
在函数内部，我们使用从服务器接收到的数据更新我们的"score" div的内容。
如果浏览器不支持SSE，我们显示一条消息通知用户。

服务器端脚本用于SSE

现在，让我们看看如何设置服务器端脚本来发送事件。我们将使用PHP作为示例，但其他服务器端语言的概念是相似的。

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendUpdate($score) {
echo "data: $score\n\n";
ob_flush();
flush();
}

$score = 0;
while (true) {
$score++;
sendUpdate("当前分数: $score");
sleep(5);  // 在发送下一个更新前等待5秒
}
?>

让我们分析一下这个脚本：

我们设置了适合SSE的适当头部。
我们定义了一个sendUpdate函数，用于以正确的格式发送数据。
我们开始了一个无限循环（在真实应用中，你会有一个条件来停止这个循环）。
在每次迭代中，我们递增分数并发送一个更新。
然后我们等待5秒再发送下一个更新。

处理服务器发送事件

现在我们有了客户端和服务器端代码，来看看我们如何处理不同类型的事件。

<h1>实时体育更新</h1>
<div id="score"></div>
<div id="commentary"></div>

<script>
var source = new EventSource("sports_updates.php");

source.addEventListener('score', function(e) {
document.getElementById('score').innerHTML = e.data;
}, false);

source.addEventListener('commentary', function(e) {
document.getElementById('commentary').innerHTML = e.data;
}, false);

source.onerror = function(e) {
console.log("错误: " + e);
};
</script>

在这个示例中：

我们创建了两个div元素，分别用于分数和评论。
我们为两种类型的事件设置事件监听器：'score'和'commentary'。
每个事件更新页面上不同的元素。
我们还添加了一个错误处理程序来记录任何错误。

相应的服务器端脚本可能看起来像这样：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendEvent($event, $data) {
echo "event: $event\n";
echo "data: $data\n\n";
ob_flush();
flush();
}

$score = 0;
$commentary = ["精彩的扑救！", "接近的射门！", "黄牌！"];

while (true) {
$score++;
sendEvent('score', "当前分数: $score");

if ($score % 3 == 0) {
$randomComment = $commentary[array_rand($commentary)];
sendEvent('commentary', $randomComment);
}

sleep(5);
}
?>

这个脚本每5秒发送一个'score'事件，每当分数是3的倍数时发送一个'commentary'事件。

方法表格

这里是一个总结我们使用的关键方法的表格：

方法	描述
`new EventSource(url)`	创建到服务器的新连接
`EventSource.onmessage`	处理没有特定事件名的消息
`EventSource.addEventListener(event, callback)`	处理有特定事件名的消息
`EventSource.onerror`	处理连接中的任何错误

结论

就这样！我们已经涵盖了服务器发送事件的基础，从设置客户端代码到创建发送更新的服务器。记住，SSE是创建实时Web应用程序的强大工具，但它只是单向通信。如果你需要双向通信，将来可以考虑使用WebSockets。

和任何编程概念一样，最好的学习方法是实践。尝试创建你自己的SSE应用程序——也许是一个实时聊天系统或者股票行情系统。可能性是无穷无尽的！

快乐编码，未来的Web开发者们！记住，每个专家都曾经是新手，所以如果一开始事情不顺利，不要气馁。继续练习，你很快就会成为专家！

Credits: Image by storyset