在前端开发中，我们经常需要通过 AJAX 或 WebSocket 等方式与服务器进行通信，实时地获取数据。不过，随着技术的不断发展，现在还有一种新的方式可以实现实时数据的获取，那就是 SSE（Server-Sent Events，服务器推送事件）。
SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端发送事件流，客户端通过 EventSource API 来接收事件流，从而实现实时数据的获取。与 WebSocket 相比，SSE 更加轻量级，不需要建立全双工的连接，也不需要像 WebSocket 一样进行握手等复杂的操作，因此更加适合于一些简单的实时数据获取场景。
接下来，我们就来详细介绍一下如何使用 SSE 在网页中实时地获取服务器数据。
1. 基本使用
使用 SSE，需要先在服务器端设置事件流，然后在客户端通过 EventSource API 来接收事件流。下面是一个简单的示例代码：
1.1 服务器端代码
----- ---- - ----------------
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----------------- ----------
---------------- ----- -----------------------------------
-- ------
----------------上面的代码创建了一个 HTTP 服务器，当客户端连接到服务器时，会向客户端发送一个事件流，每秒钟发送一个事件。事件的类型为 hello，事件的数据为当前时间的字符串表示。
1.2 客户端代码
----- ------ - --- ------------------------------------- -------------------------------- --------------- - ------------------------ ---
上面的代码创建了一个 EventSource 对象，指定了服务器的地址。然后通过 addEventListener 方法来监听事件流中的 hello 事件，当事件发生时，会执行回调函数，打印事件的数据。
2. 事件类型和数据格式
在服务器端发送事件流时，需要指定事件的类型和数据格式。事件的类型可以是任意字符串，但是以 : 开头的字符串是保留的，不应该用作事件类型。
事件的数据格式有两种，一种是纯文本格式，另一种是 JSON 格式。纯文本格式的数据可以直接写在 data 字段中，JSON 格式的数据需要先将其转换为字符串，然后写在 data 字段中。
下面是一个示例代码，演示了如何发送 JSON 格式的事件：
----------------- ----------- ---------------- ------------------ ----- -------- ---- -- ----------
3. 事件流的控制
在 SSE 中，事件流是一种持久的连接，客户端可以随时关闭连接，也可以重新建立连接。事件流的控制可以通过以下两种方式来实现：
3.1 重连机制
当客户端与服务器的连接断开时，可以通过设置 retry 字段来实现自动重连。retry 字段表示客户端重连的时间间隔，单位为毫秒。如果不设置 retry 字段，客户端会立即尝试重新连接。
下面是一个示例代码，演示了如何设置 retry 字段：
----------------- ----------
上面的代码设置了客户端重连的时间间隔为 10 秒。
3.2 事件流的关闭
当事件流不再需要发送事件时，可以通过调用 response.end() 方法来关闭事件流。关闭事件流后，客户端会自动断开连接。
下面是一个示例代码，演示了如何关闭事件流：
-------------- -- - ----------------- ---------- ---------------- ----- ----------------------------------- -- ------ ------------- -- - ---------- -- -------
上面的代码创建了一个事件流，每秒钟发送一个事件，持续 10 秒钟。在 10 秒钟后，调用 res.end() 方法来关闭事件流。
4. 兼容性问题
SSE 是 HTML5 中新增的技术，因此在一些老的浏览器中可能不支持 SSE。不过，大部分现代浏览器都已经支持 SSE，包括 Chrome、Firefox、Safari、Edge 等。在使用 SSE 时，需要注意以下几点：
- IE 不支持 SSE，需要使用 polyfill 库来实现 SSE 的功能。
- 在 Safari 中，如果服务器返回的 Content-Type 不是
text/event-stream，则会导致 SSE 失败。 - 在 Chrome 和 Firefox 中，如果服务器返回的 Content-Type 不是
text/event-stream，则会将 SSE 视为普通的 AJAX 请求，而不是 SSE 请求。
5. 总结
SSE 是一种轻量级的服务器推送技术，可以实现实时数据的获取。使用 SSE，需要先在服务器端设置事件流，然后在客户端通过 EventSource API 来接收事件流。在使用 SSE 时，需要注意事件类型和数据格式的设置，以及事件流的控制等问题。同时，还需要注意 SSE 的兼容性问题，以便在不同的浏览器中能够正常地使用 SSE。
以上就是使用 SSE 在网页中实时地获取服务器数据的详细介绍，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663c2057d3423812e4a00907