现代 Web 应用程序对实时性的要求越来越高，传统的轮询方式获取数据已经不能满足需求。Server-Sent Events 提供了一种简单的、基于 HTTP 的双向通信方式，能够实现服务器发送实时数据给客户端，而客户端也可以向服务器发送数据，从而实现实时更新。下面我们就来探讨如何使用 SSE 实现实时电子表格更新的功能。
实现思路
实现实时电子表格更新的思路是在客户端使用 JavaScript 开启 SSE 连接向服务器请求实时数据，服务器通过 SSE 发送实时数据给客户端，并由客户端使用 JavaScript 处理数据，更新 HTML 页面。这里的实时数据可以从数据库或后端接口获取，其中后端接口的实时数据可以通过 WebSocket 或 Server-sent Events 实现。
整体架构
一般来说，实现实时电子表格更新的整体架构如下：
下面我们来逐一讲解各部分的实现。
服务端实现
在服务端，我们可以使用 Node.js 并添加 express 库和 cors 中间件来实现一个 SSE 服务器。下面是一个简单的 Express Sever 程序，实现了一个 SSE 服务，该服务每隔一秒钟发送一次当前时间信息：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
--- ------- - ---
----------------
-------- ------------------- -
--------------------- -- -
---------------- - - --- --------------------- - --------
---
-
------------------ ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
----------------
------------------
--------------- -- -- -
-------------------- -------------
------- - ----------------------- -- ------ --- ----- -- -------
---
---
-------------- -- -
--------------------
-- ------
----- ---- - ---------------- -- -----
---------------- -- -- ------------------- -- --------- -- ---- -----------上面代码中的 sendTimeToClients() 方法是基于设定的时间间隔给连接的客户端发送当前时间信息。
Express 的 res.writeHead() 方法会将响应头的 Content-Type 设置为 'text/event-stream'，'Cache-Control' 设置为 'no-cache'，'Connection' 设置为 'keep-alive'。响应体内容由 data 字段和数据内容组成，其中 data 是固定字符串，数据内容是任意数据类型。需要注意的是，每行数据后面必须有一个空行，用于标记一条 SSE 事件结束。
客户端实现
在客户端，实现 SSE 客户端需要创建一个新的 EventSource 实例，其中 EventSource 对象会监听指定的 SSE 地址，并在接收到 SSE 事件后触发 message 事件。在 message 事件的回调函数中，我们可以获取到实时数据并进行页面渲染。
下面是一个简单的 SSE 客户端程序，展示了如何使用 SSE 在客户端实时渲染服务端发送的时间信息：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---------------
--------
----- --- - --- -------------------------------------------- -- -- --- --
------------- - ------- -- - -- -- ------- --
----- ---- - --------------------------------
-------------- - ----------- -- -----------
-
---------
-------
------
----------- ----------
---- ----------------
-------
-------支持跨域
实现跨域的 SSE 可以使用 cors 中间件，上面的服务端程序已经体现了这个中间件的用法。
支持断线重连
当 SSE 客户端连接断开后，客户端不能重试连接而且需要保证之前请求的数据和状态的一致性。在客户端实现断线重连时，需要在 error 事件中重新开启 SSE 连接，同时记录下当前客户端的状态信息，在重连成功后重新订阅 SSEE 事件，并将状态信息发送给后端接口。
总结
Server-Sent Events 是一种轻量级的、基于 HTTP 的服务端推送技术，适用于实时信息的传输，例如实现实时电子表格更新、即时通讯等场景。使用 SSE 需要注意的是，不同浏览器对 SSE 的支持程度不同，如果部署在生产环境中需要进行全面测试。
参考文献
- MDN "Using server-sent events"
- Web Fundamentals "Introduction to Server-Sent Events"
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e2704968c7c53b008d5d0