在 Web 开发中，实时更新数据是一个非常常见的需求。其中，实时更新电子表格的数据更是一个常见的需求。传统的做法是使用 AJAX 或 WebSocket 实现实时更新，但这些方法都有一些缺点。
- 使用 AJAX 实现实时更新需要不停地发送请求，增加了服务器的压力，而且无法实时获取到服务器的数据变化。
- 使用 WebSocket 实现实时更新需要额外建立一个连接，有一定的复杂性，并且并不是所有浏览器都支持。
而今天我要介绍一种更简单、更高效的实时更新方法，即使用 Server-sent Events（SSE）。
Server-sent Events 简介
Server-sent Events 是 HTML5 新增的一种新技术，可以让服务器向客户端推送数据。与 WebSocket 不同，它只需要使用 HTTP 协议，并且数据是单向流动的，只能由服务器向客户端发送数据，客户端无法发送数据。
使用 SSE 的时候，首先需要在服务器上建立一个特殊的端点（endpoint），用于向客户端推送数据。在客户端，我们需要创建一个 EventSource 对象，通过该对象监听来自服务器端点的推送消息。
如何使用 Server-sent Events 实现实时电子表格更新
以下是使用 Server-sent Events 和 jQuery 实现实时电子表格更新的示例代码。在本示例中，我们将使用一个简单的电子表格来演示。
首先，我们需要在服务器端建立一个 SSE 端点并定义数据生成函数：
-- -------------------- ---- -------
----- ---- - ----------------
-------------------------- ----- ---- -
----- ------- - -
--------------- --------------------
---------------- -----------
------------- ------------
--
------------------ ---------
-- ----
-------------------- -- -
----- ---- - ------ - - ------------- - -------
----------------
-- ------
----------------在客户端，我们需要创建一个 EventSource 对象，并实现 onmessage 事件函数来处理接收到的数据：
-- -------------------- ---- -------
------ -----------
----
-----------
-----------
-----------
-----
--------
------- -----------------------------------------------------------
--------
-------------------------- -- -
----- ------ - --- --------------------
---------------- - -------- ------- -
----- ---- - -----------------------
----- --- - ---------------
----------------- - ------------ - ---------
----------------- - ------------ - ---------
----------------- - ------------ - ---------
------------------------
--
---
---------在这个简单的示例中，我们使用 SSE 每 1 秒钟向客户端发送一条随机数据。客户端接收到数据之后，使用 jQuery 动态生成表格行并添加到已有的表格中。
总结
使用 Server-sent Events 可以非常方便地实现实时更新电子表格的数据。与传统的 AJAX 和 WebSocket 相比，SSE 更加简单、高效，而且可以跨域使用。在实际开发中，我们可以根据自己的需要来选择合适的实时更新技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64605c25968c7c53b020fc3e