使用 Server-sent Events(SSE) 实现实时通信
简介
Server-sent Events，简写为 SSE，是一种 Web API，用于在服务器和客户端之间建立实时、持久的单向连接，使得服务器可以向客户端推送数据。与 WebSocket 相比，SSE 更适用于一些简单、小规模的实时通信，且无需建立双向连接。
SSE 的优点在于它不需要建立额外的端口或协议，可以基于标准的 HTTP 来传输数据，因此可以在不同的 Web 服务器上使用。而且，对于大多数的 Web 开发者来说，它更简单易用，不需要使用专门的库或框架。
实现原理
SSE 建立单向、持久的连接的基础是 EventSource 接口。它允许使用 JavaScript 创建到服务器的连接，并能够监听一个或多个事件。
SSE 支持以下三个事件：
- open：建立连接成功后触发
- message：服务器将数据传输到客户端时触发
- error：连接出现错误时触发
当客户端请求 SSE 时，服务器应该返回一个 MIME 类型为 text/event-stream 的文件。文件内容应该以以下格式返回：
-- -------------------- ---- ------- ------ ------ ----- ----- ------ --- ---- ------ ------ ----- ----- ------ --- ---- ------ ------ ----- ----- ------ --- ---- ---
其中：
- event：表示自定义事件的名称，可选
- data：表示传输的数据，必选
- id：表示上一次传输的最后一条消息的 ID，可选
上面的文件内容定义了多个事件，每个事件可以包含一个 event 字段和一个 data 字段，并以空行结束。如果指定了 ID，那么服务端应该从这个 ID 开始向客户端推送下一条消息。
运用场景
SSE 在实时通信方面非常有用，并且在以下几个方面也有着广泛的应用：
- 数据流：SSE 可以用于传输任意数量的事件，这些事件包含有关流数据的状态更新和有关用户活动的信息。
- 竞价和拍卖：SSE 可以实现实时更新拍卖和竞价赢家，而无需客户端页面的刷新。
- 网格更新：SSE 可以在数据源更新时自动更新网格数据。
- 文本域：SSE 可以用于多个用户同时编辑的文本。
示例代码
下面是一个使用 Express 框架实现 SSE 的简单示例代码：
- 安装 express 和 cors 模块（跨域访问，可选）：
npm install express cors
- 新建一个 index.js 文件并添加以下内容：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
-- ---------
----------------
-- --- --
--------------- ----- ---- -- -
-- ----------- -----------------
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- ----------- -- - --- ---
-------------- ----------
-- -----------
----- ----- - -------------- -- -
----- ------- - ------ ----- -------------------------
-------------------
-- ------
-- ------ --- ---------
--------------- -- -- -
---------------------
---
---
----- ---- - ---------------- -- -----
---------------- -- -- -
---------------- -- ------- -- ---- ----------
---- 启动应用并访问 SSE 连接地址：
node index.js
访问 http://localhost:3000/sse 就可以看到每秒钟更新一次的时间戳。
总结
SSE 为简单、小规模的实时通信提供了一种可选方案。它使用标准的 HTTP 协议传输数据，比起 WebSocket 而言更加简单易用，适用于前端开发、普通网站和小型应用场景。SSE 的实现需要了解其基本的 API 接口和服务端推送数据的协议，掌握其使用方法后，就可以轻松实现 SSE 并应用于实时通信中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f4018cf6b2d6eab3d321b2