在现代 Web 应用中，用户期望能够获得即使且快速的响应，这就要求开发者采用一些优化技术来实现这个目标。而 Server-Sent Events (SSE) 是一种优化技术，它能够让开发者实现实时通信并提高 Web 应用的速度和响应时间。
什么是 Server-Sent Events？
Server-Sent Events (SSE) 是一种使用简单的浏览器端 API，它使得浏览器可以从服务器接收即时更新的数据。使用 SSE，服务器可以向客户端发送事件流（event stream），而客户端只需通过相应的 JavaScript API 即可轻松地接收这些事件流。
与传统的 AJAX 或 WebSocket 相比，SSE 是一种轻量级协议，因为它只需使用 HTTP 协议并遵循一些特定的响应格式即可实现。这就使得 SSE 更加容易实现和部署，并且可以与现有的 Web 技术（如 PHP、Node.js 和 Ruby on Rails）无缝集成。
如何使用 Server-Sent Events？
在服务器端，实现 SSE 大体分为两个步骤：
- 为客户端建立一个 SSE 连接
- 向客户端发送事件流
建立 SSE 连接
建立 SSE 连接很简单，只需返回一个特殊的响应头即可：
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');这些响应头告诉浏览器，返回的是一种事件流，并请求浏览器不要缓存响应并保持连接处于打开状态（不要关闭连接）。
发送事件流
发送事件流需要遵循一定的格式，它由类似以下格式的多行文本组成：
event: <event name> data: <event data> id: <event id> retry: <retry time>
其中每行文本以换行符 \n 结尾。可以包含以下属性：
event: 表示事件名称，可以为空。data: 表示发送的数据。id: 表示事件的 ID，可以为空。retry: 表示在发送失败后，客户端多长时间后重新发起连接，单位为毫秒，默认为 3 秒。
以下是一个简单的示例，假设我们需要向客户端每隔 5 秒钟发送一条时间事件：
-- -------------------- ---- -------
--------------------- --------------------
---------------------- -----------
------------------- -------------
----------- -
----- - ----------
---- ------- --------
---- ------ -------------
--------
---------
-在客户端，使用 SSE 也非常简单。只需使用以下 JavaScript 代码：
var eventSource = new EventSource("/sse.php");
eventSource.onmessage = function(event) {
console.log(event.data);
};这样就完成了 SSE 的基本应用。客户端会不断地接收来自服务器发送的事件流，然后在控制台输出事件数据。此时，当服务器 sleep 5 秒之后，就会向客户端发送一次时间事件。
SSE 的优点和局限
SSE 有很多优点，其中最明显的就是它的简单性。SSE 不需要任何额外的软件或库，也不需要被动地轮询服务器以检查是否有新的数据可用。这使得 SSE 更容易实现和部署，并且可以轻松地与现有的 Web 技术无缝集成。此外，由于 SSE 仅使用常规的 HTTP 连接，因此可以通过任何网络防火墙和代理服务器传输。
另一个 SSE 的优点是它的实时性。因为 SSE 使用基于事件的模型，客户端可以立即收到事件，而不必等待服务器响应。这可以大大降低应用程序的延迟，并提高用户体验。
然而，SSE 的局限也是明显的。虽然 SSE 对发送短期实时消息很有效，但对于需要大量技术计算或复杂计算的应用程序而言，SSE 的性能可能会受到限制。因为 SSE 是使用 HTTP 协议实现的，所以它无法支持双向通信或以流式传输大量数据的应用程序，这些功能通常需要使用 WebSocket 或其他类似的技术来实现。
总结
Server-Sent Events 是一种轻量级、易于实现和部署的优化技术，它使得浏览器可以从服务器接收即时更新的数据。SSE 非常适用于需要短期实时消息的应用程序，并可以提高用户体验和应用程序的响应速度。然而，由于 SSE 的局限性，对于需要大量技术计算或复杂计算的应用程序而言，WebSocket 等技术可能更为合适。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c4c26968c7c53b0b4dcda