Web 应用的性能优化一直是开发人员关注的重点。其中一个方向是实现实时更新，即当后端数据更新时，能够即时响应到前端页面上。常见的实现方式有轮询和 WebSocket。但是，这些方式都有其局限性，比如轮询会增加服务器负担，WebSocket 需要实现自定义协议。本文将介绍另一种实现实时更新的方式：Server-sent Events。
什么是 Server-sent Events
Server-sent Events（SSE） 是一种简单的、基于 HTTP 的实时通信技术。它支持从服务器向客户端推送数据，而不需要客户端发起请求。SSE 是一种轻量级的技术，比 WebSocket 更容易实现和维护。
如何使用 Server-sent Events
在启用 SSE 之前，需要确保你的服务器支持 SSE。通常情况下，服务器使用简单的 HTTP 响应头来启用 SSE，如下所示：
Content-Type: text/event-stream Cache-Control: no-cache
在将这些响应头返回给客户端之后，服务器可以在 HTTP 连接上发送多个消息。每个消息都是以一个数据块的形式发送，数据块以“data:”作为前缀，以两个换行符作为结尾，如下所示：
data: This is my message\n\n
在上面的示例中，前缀“data:”表示这是一段数据，后面跟的是实际数据，“\n\n”表示数据块的结束。可以向同一个客户端发送多条消息，这些消息将自动一条一条地显示在客户端页面上。
客户端接收 SSE 消息需要使用 EventSource 对象，代码如下：
let source = new EventSource("/message");
source.onmessage = function(event) {
console.log(event.data);
};在上面的示例中，EventSource 对象通过后端路由 “/message” 获取 SSE 消息。每次接收到 SSE 消息时，source.onmessage 会被调用，通过 event.data 获取实际的 SSE 消息。
Server-sent Events 的优势
相比轮询和 WebSocket，Server-sent Events 有以下优势：
- 轻量级：SSE 是基于 HTTP 的，无需额外的协议，因此更加轻量级。
- 易于实现：SSE 不需要像 WebSocket 那样实现自定义协议，因此更加容易实现。
- 无需心跳：WebSocket 需要定期发送心跳保持连接，而 SSE 不需要，因为它是基于 HTTP 的长连接。
Server-sent Events 的注意事项
在使用 SSE 时，需要注意以下事项：
- 浏览器兼容：尽管 SSE 是 W3C 标准，但并不是所有浏览器都支持。IE 浏览器不支持 SSE，iOS Safari 也不支持。
- 长连接：SSE 需要维持长连接，长时间的连接可能会导致服务器资源的占用。
- 无法双向通信：SSE 是单向通信，只能从服务器到客户端发送消息，不能从客户端向服务器发送消息。
示例代码
下面是一个使用 SSE 实现实时更新的示例代码：
server.js
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- ----------
---
-------------- -- -
---------------- - - --- --------------------------- - --------
-- ------
----------------index.html
-- -------------------- ---- -------
--------- -----
------
------
--------
--- ------ - --- ---------------------
---------------- - --------------- -
----------------------------------------- - -----------
--
---------
-------
------
-------------
-- --------------
-------
-------在上面的示例中，服务器每秒钟向客户端发送一条 SSE 消息，客户端通过 EventSource 对象订阅 SSE 消息，并将消息显示在页面上。
总结
Server-sent Events 是一种轻量级的实时通信技术，相比轮询和 WebSocket 更加易于实现和维护。在实现实时更新时，可以考虑使用 Server-sent Events。需要注意的是，浏览器兼容性、长连接和单向通信是使用 SSE 时需要注意的事项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64747b78968c7c53b01d9835