在前端开发中，实现实时在线交互式文档是一项非常有挑战性的任务。传统的实现方式是使用 WebSocket，但是这种方式需要在服务器端和客户端都实现相应的协议，而且还需要考虑跨域问题。另一种更简单的实现方式是使用 Server-Sent Events（SSE），SSE 是一种基于 HTTP 的协议，它可以让服务器向客户端推送数据，而客户端则可以通过事件监听的方式获取数据，从而实现实时在线交互式文档。
SSE 的基本原理
SSE 的基本原理是，客户端通过 HTTP 请求向服务器发送一个特殊的请求头 Accept: text/event-stream，服务器收到请求后会将数据以 text/event-stream 格式返回给客户端，并且保持连接不断开。客户端可以通过 EventSource 对象监听服务器推送的数据，当服务器有新的数据推送过来时，EventSource 对象会触发 message 事件，从而让客户端获取到新的数据。
SSE 的优点
相比于 WebSocket，SSE 有以下几个优点：
更简单的实现方式：SSE 不需要在服务器端和客户端都实现相应的协议，而且不需要考虑跨域问题，所以实现起来更简单。
更好的兼容性：SSE 是基于 HTTP 的协议，所以可以兼容大多数浏览器，而且不需要特殊的插件或者库。
更高效的性能：SSE 只需要发送一次 HTTP 请求就可以保持连接，而且服务器只需要推送数据，不需要接收客户端的数据，所以相比于 WebSocket，SSE 的性能更高。
使用 SSE 实现实时在线交互式文档的示例
下面我们来看一个使用 SSE 实现实时在线交互式文档的示例。假设我们有一个在线编辑器，用户可以在编辑器中输入代码并且实时预览效果。为了实现实时预览效果，我们可以使用 SSE 技术，让服务器将用户输入的代码实时推送给客户端，从而实现实时预览效果。
服务器端代码
首先，我们需要在服务器端实现一个 SSE 接口，让客户端可以通过该接口获取实时数据。以下是一个使用 Node.js 实现 SSE 接口的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - ------ ----- ------------------------------
----------------
-- ------
- ---- -
------------------ - --------------- ----------- ---
---------
------
------
---------- ---------------
-------
------
------- ------------
---- ------------------
--------
----- ------ - ----------------------------------
----- ------ - --- --------------------
---------------- - ------- -- -
---------------- -- ---------- - -------
--
---------
-------
-------
---
-
---
------------------- -- -- -
------------------- -- ------- -- ---- -------
---在上面的代码中，我们创建了一个 HTTP 服务器，并且实现了两个路由：/ 和 /sse。当客户端请求 / 路由时，服务器返回一个包含 SSE 示例代码的 HTML 页面；当客户端请求 /sse 路由时，服务器返回一个 Content-Type 为 text/event-stream 的响应，并且每隔一秒钟向客户端推送一个包含当前时间的数据。
客户端代码
客户端代码非常简单，只需要使用 EventSource 对象监听服务器推送的数据即可。以下是一个使用 HTML 和 JavaScript 实现客户端 SSE 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------------
-------
------
------- ------------
---- ------------------
--------
----- ------ - ----------------------------------
----- ------ - --- --------------------
---------------- - ------- -- -
---------------- -- ---------- - -------
--
---------
-------
-------在上面的代码中，我们创建了一个包含一个 div 元素和一个 script 元素的 HTML 页面。div 元素用来显示服务器推送的数据，script 元素用来创建一个 EventSource 对象，并且监听 message 事件。当服务器有新的数据推送过来时，EventSource 对象会触发 message 事件，从而让客户端获取到新的数据，并且将数据显示在 div 元素中。
使用 SSE 实现实时在线交互式文档的指导意义
使用 SSE 实现实时在线交互式文档可以让我们更加方便地实现实时在线交互式文档功能。相比于传统的 WebSocket 方式，SSE 更加简单、兼容性更好、性能更高。因此，在实现实时在线交互式文档时，我们可以优先考虑使用 SSE 技术。
当然，SSE 也有一些局限性，例如无法实现双向通信、只能使用 text/event-stream 格式等。但是，对于一些简单的实时在线交互式文档场景，SSE 是一种非常好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c90f8ce46428fe9e007908
