前言
实时应用在现代 Web 开发中变得越来越普遍，WebSockets 是构建实时通讯最常用的技术之一。然而，在某些情况下，WebSockets 并不是最优选择。某些情况下，你可能需要与服务器进行一次通信，并在关键时刻接收更新，例如：交易所显示股票价格。在这种情况下，服务器将更新推送给您，你不需要与服务器进行交互数据，并在关键时刻少量的接收即可。这时，“Server-Sent Events”(服务器发送事件，简称 “SSE”) 就成为一种非常有趣的解决方案。
SSE 是什么？
SSE 是一种服务器向客户端单向发送事件流的通讯模式。它使用一个标准的 HTTP 连接，发送文本数据。使用 SSE，客户端向服务器建立一次长连接，然后可以从服务器获得连续的更新。SSE 的使用方法与 AJAX 非常相似，但有几个关键区别：
- 客户端只需要建立一次连接，以后将会持久联接，这意味着不需要在客户端和服务器之间交换大量的流量。
- 实时信息逐步推送到客户端。这意味着，如果您的 Web 应用程序需要发送大量更新如聊天应用程序或电子邮件应用程序，这可能会更有效。
- SSE 的使用相对简单，而且比 WebSockets 更好地与服务器集成。
实现 SSE
要将 SSE 用于你的应用程序，你需要完成一些基本步骤。
- 在服务器上，你需要在实现 SSE 的 web 页面上添加以下的请求标头：
------------- ----------------- -------------- -------- ----------- ----------
第一个头告诉浏览器，这是像 text/event-stream 这样的 MIME 类型，这将触发 SSE。第二个标头告诉浏览器不要将响应缓存，而是每次都从服务器下载它。第三个标头告诉浏览器保持连接打开，这意味着当服务器有事件更新时浏览器不会关闭连接。
服务器需要发送 状态码 200 OK 给客户端，以确保 SSE 正确工作。
向应用程序中添加 SSE 代码。SSE 将打开一个长持续连接，以便在服务器侧有事件发生时，将该事件发送到客户端。以下是如何建立 SSE 连接的 JavaScript 代码：
--- ----------- - --- --------------------------------
--------------------- - --------------- -
------------------------
-上面的代码将创建一个 EventSource 对象，并将目标地址设置为 "event_stream.php"。通过在 "event_stream.php" 页面上发送 SSE 信息，将触发 "eventSource.onmessage" 事件。对于上述代码的结果，将在控制台中 log 出所有从 SSE 服务端收到的消息。
一个 SSE 的简单示例
下面是一个简单的示例程序，显示如何通过 SSE 实现实时更新。该示例使用 PHP 语言实现 SSE 连接，来推送服务器时间（及其他可用更新）。
服务器端 PHP 代码
----- --------------------- -------------------- ---------------------- ----------- ------------------- ------------- -------- ------------ ----- - ---- ---- ------- ---- ------ ---------- ----------- -------- - ----------- - ------- -------------------- ------- ----- - - ------------- ---------
该代码片段展示了我们通常在 SSE 内部使用的一些属性和函数。第一个函数，在此示例中命名为 sendMsg($id, $msg)，是将删除每个事件，并使用格式设置 SSE消息。发送时必须在每个消息之后发送两个换行符，以便客户端知道该消息已经传输完毕。
客户端 JavaScript 代码
--- ----------- - --- ----------------------- --------------------- - --------------- - ------------------------ -
上面的代码创建了一个 EventSource 对象，并将目标地址设置为 "sse.php"。每次服务器向客户端推送事件时 "eventSource.onmessage" 事件将被触发，并将信息传递给代表该事件的 event 变量。
结论
SSE 是一项非常有用的技术，它让我们更轻松地从服务器向客户端发送实时数据。通过 SSE，我们可以在不断开连接的同时提供简便又高效的推送。这种技术很容易学习，也很容易实现，希望这篇文章对你有帮助。
提示
- 事件消息被当作纯文本，而不是 XML 或 JSON，轻松编码和简洁的数据格式可助于提高性能。
- 除非您只需要发送一次事件，否则请始终保持 SSE 连接打开，以避免多次开/关连接。
- SSE 不应该用于所有方案，如果您的应用程序需要“心跳”发送的请使用 WebSockets。 WebSockets 使得良好的道德方式易于立即推送大量数据，并可以缩减“WebSocket ping”请求以便减小数据传输负荷，并确保连接可靠。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671dcebf9babaf620fb83ec3