如何构建基于 Server-Sent Events 的实时网站
在现代 Web 应用程序中，实时性变得越来越重要。用户已经习以为常地期望能够在任何时候看到数据的变化。使用 Server-Sent Events（SSE）可以轻松地构建实时 Web 应用程序，避免轮询和 WebSocket 的复杂性。
本文将深入介绍 Server-Sent Events，介绍如何使用 SSE 构建实时网站。
什么是 Server-Sent Events？
Server-Sent Events 是一种 HTML5 API，它允许 Web 服务器向客户端推送实时数据，其中服务器始终保持活动连接。这使得 SSE 比轮询或 WebSocket 更容易实现和开发。与 WebSocket 不同，SSE 基于 HTTP 协议，因此可以使用传统的 Web 服务器，而不需要进行升级或使用新的端口。
Server-Sent Events 的核心部分是使用 EventSource 类。该类包含以下三种事件：
- onopen - 当连接打开时触发。
- onmessage - 当接收到消息时触发。
- onerror - 当连接发生错误时触发。
下面是一个简单的 SSE 例子：
const eventSource = new EventSource('/stream');
eventSource.onmessage = event => {
console.log('Received message:', event.data);
}在该示例中，我们使用 EventSource 类创建连接到“/stream”端点的 SSE。每当服务器推送数据时，我们将收到一个 onmessage 事件，并将其打印到控制台中。
在服务器端，可以使用许多不同的语言和框架来生成 SSE。在本文中，我们将使用 Node.js 和 Express 框架。
在服务器端生成 Server-Sent Events
使用 Node.js 和 Express，我们可以轻松地配置 SSE 端点。首先，我们需要安装 express 和 cors 库：
npm install express cors
然后，我们可以使用以下示例代码创建 SSE 端点：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----------------
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- -- -
----- ---- - --- ----------------------------
---------------- --------------
-- ------
---
---------------- -- -- -
---------------- ------ --------- -- ------------------------
---该代码首先启动一个 Express 应用程序，使用 CORS 中间件允许跨域请求。然后我们定义了一个 GET 端点“/stream”来生成 SSE。
在该端点中，我们设置了一些必需的 HTTP 标头。'Content-Type' 设置为 'text/event-stream' 来告诉浏览器该请求返回 SSE。'Cache-Control' 设置为 'no-cache' 来确保浏览器不缓存 SSE 数据。'Connection' 设置为 'keep-alive' 以确保连接保持活动状态。
然后我们使用 setInterval 函数将一条消息写入连接。在该示例中，消息包含当前时间值。请注意，每条消息必须以“data:”开头，以便浏览器能正确解析 SSE。
最后，我们启动该应用程序，并将 SSE 服务器绑定到端口“3000”。
使用 Server-Sent Events 构建实时网站
使用 SSE，我们可以轻松地将实时数据推送到浏览器。下面是一个简单的实时网站示例，它随着时间的推移更新页面标题：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---------------
-------
------
------------- ------------
------ ------- ---- --- ----- ---------------------
--------
----- ----------- - --------------------------------
----- ----------- - --- -----------------------
--------------------- - ----- -- -
----------------------- - -----------
-------------- - ---------- ------- -----------------
-
---------
-------
-------该代码向指向 SSE 服务器的“/stream”端点建立连接。每当服务器推送消息时，它将更新页面上的当前时间和页面标题。
结论
使用 Server-Sent Events，我们可以轻松地构建实时 Web 应用程序，避免轮询和 WebSocket 的复杂性。在本文中，我们深入介绍了如何使用 SSE 构建实时网站，并提供了服务器和客户端示例代码。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703a369d91dce0dc84bca2d