DR:serversentedevents（SSE）是一个标准，它使Web服务器能够将数据实时推送到客户端。在本文中，我们将通过使用React和节点.js. 但是，您将在本教程中学习的概念适用于任何编程语言和技术。您可以在这个GitHub存储库中找到应用程序的最终代码。"了解如何使用服务器发送事件协议构建实时web应用程序。"在推特上留言介绍服务器上发送的事件浏览器和服务器之间的典型交互包括请求资源的浏览器和提供响应的服务器。但是，我们能否让我们的服务器在没有明确请求的情况下随时向客户发送数据？答案是肯定的！我们可以通过使用服务器发送的事件（也称为SSE或Event Source）来实现这一点，W3C标准允许服务器异步地将数据推送到客户端。这可能建议使用我们将实现的烦人的轮询来从长时间的服务器处理中获取进度状态，但是，多亏了SSE，我们不必实现轮询来等待服务器的响应。我们甚至不需要任何复杂和奇怪的协议。也就是说，我们可以继续使用标准的HTTP协议。所以，让我们看看如何在实际应用程序中使用服务器发送的事件。使用服务器发送的事件构建实时应用程序为了学习如何使用服务器发送的事件，我们将开发一个简单的航班时刻表应用程序（类似于在任何机场都可以找到的航班跟踪器）。时刻表应用程序将包含一个简单的网页，显示如下图所示的航班列表：通过这个实时应用程序，我们可以找到航班到达时刻表，并且在实现服务器发送的事件之后，当航班状态发生变化时，我们将看到自动更新。在我们的演示应用程序中，我们将使用预定事件来模拟飞行状态的变化。但是，在准备生产的应用程序上，可以很容易地用更实际的机制来代替这种机制。所以，让我们开始编写代码并了解服务器发送事件标准是如何工作的。搭建React应用程序作为第一步，让我们构建React客户机应用程序。为了简单起见，我们将使用createreact app来设置基于react的客户端。所以，让我们确保节点.js安装在我们的机器上，让我们在终端窗口中键入以下命令：#正在全局安装create react appnpm安装-g创建react应用程序在我们的开发机器中安装create react app之后，让我们通过键入以下内容来创建react应用程序的基本模板：创建react app real time sse app几秒钟后，我们将得到一个名为real-timesse-app的新目录，其中包含我们需要的所有文件。特别是src子目录包含我们全新的React应用程序的源代码。我们的目标是更改这个基本React应用程序的代码，并将其替换为我们的航班时刻表前端应用程序。由于我们的应用程序将以表格形式显示数据，所以我们将安装一个React组件，它简化了将数据呈现到表中的任务：React Table。要将此组件添加到应用程序中，我们将在终端中键入以下命令：#确保我们在React app project根目录上cd实时sse应用程序#然后安装React表依赖项npm安装反应表现在，我们准备开始更改应用程序代码。所以，让我们打开应用程序js文件（位于src目录中）并将其内容替换为以下内容：//src公司/应用程序js从"React"导入React，{Component}；从"react table"导入reactable；导入"react table/react-表格.css";从"./DataProvider"导入{getInitialFlightData}"；类应用程序扩展组件{建造师（道具）{超级（道具）；这个州= {数据：getInitialFlightData（）};this.列= [{Header:"原点"，访问器："来源"},{Header:"航班"，访问者："航班"},{Header:"到达"，访问器："到达"},{Header:"状态"，访问器："状态"}];}渲染（）{返回(

);}}导出默认应用程序；在这里，我们正在导入设置航班时刻表所需的资料。特别是，除了标准的React basic元素之外，我们还从一个名为DataProvider的模块导入带有其基本样式表和名为getInitialFlightData的方法的ReactTable组件。我们还没有定义这个模块，但是我们很快就会定义的。此函数的目标是向应用程序提供飞行数据，用于初始化应用程序组件的状态。在构造函数中，我们还通过将flight属性映射到表列来定义表的结构。如我们所见，此映射由如下对象组成的数组：this.列= [{Header:"原点"，访问器："来源"},{Header:"航班"，访问者："航班"},{Header:"到达"，访问器："到达"},{Header:"状态"，访问器："状态"}];如上所述，每个flight对象都包含一个Header属性（表示列的头）和一个accessor属性（表示flight属性，其值将显示在该列中）。React Table有许多其他选项来定义表的结构，但是Header和accessor对于我们的目标来说已经足够了。最后，在App组件的render方法中，我们包含了reactable元素，并将飞行数据和列作为道具传递给它。现在，在src文件夹中，创建一个名为数据提供者.js并用以下代码填充它：//src公司/数据提供者.js导出函数getInitialFlightData（）{返回[{起源："伦敦"，航班："A123"，抵达："08:15"，状态："},{起源："柏林"，航班："D654"，抵达："08:45"，状态："},{起源："纽约"，航班："U213"，抵达："09:05"，状态："},{起源："布宜诺斯艾利斯"，航班："A987"，抵达："09:30"，状态："},{起源："罗马"，航班："I768"，抵达："10:10"，状态："},{起源："东京"，航班："G119"，抵达："10:35"，状态："}];}上面的模块导出getInitialFlightData函数，该函数只返回飞行数据的静态数组。在实际应用程序中，该函数将从服务器请求数据。但是，就本文而言，目前的实现已经足够了。到目前为止，我们的应用程序以表格形式显示飞行数据。让我们用网络浏览器来看看吧！要运行应用程序，请在终端中键入以下命令：#从实时sse应用程序启动React应用程序npm启动几秒钟后，我们将在浏览器中看到如上图所示的航班列表。如果浏览器无法自动打开，请打开并转到：3000。注意：由于某些未知原因，应用程序无法启动，从real-timesse-app目录发出npmi可能会解决问题。使用React使用服务器发送的事件在使React应用程序呈现一些静态数据之后，让我们添加它使用服务器端生成的事件所需的功能。为此，我们将使用eventsourceapi，这是一个标准接口，用于与服务器发送事件协议进行交互。正如MDN文档所说，"EventSource实例打开到HTTP服务器的持久连接，HTTP服务器以文本/事件流格式发送事件。连接保持打开状态，直到通过调用关闭事件源.close()"因此，作为第一步，让我们将eventSource属性添加到App组件并为其分配一个eventSource实例。下面的代码显示了我们如何实现这一点：//src公司/应用程序js// ... 导入语句。。。类应用程序扩展组件{建造师（道具）{// ... 超级、状态和列。。。this.eventSource=新事件源（"events"）；}// ... 提供。。。}导出默认应用程序；EventSource（）构造函数创建一个对象，用于初始化客户端和服务器之间的通信通道。这个通道是单向的，这意味着事件从服务器流向客户端，而不是相反的方向。要创建一个新实例，我们将一个URL作为参数传递给它，该URL表示要从中接收事件的端点。因为我们可以使用任何HTTP地址，也可以使用任何HTTP地址。在我们的例子中，客户端期望来自客户端同一域内事件端点的事件流。也就是说，如果客户端URL是，如我们的示例中所示，：3000则推送数据的服务器端点将位于：3000/事件。现在，让我们通过添加几行代码来捕获服务器发送的事件。我们将向App组件添加一个名为updateFlightState的新方法。每当我们从服务器接收到消息时，就会调用这个方法，并用消息数据更新组件状态。以下代码片段显示了我们需要在应用程序组件中进行哪些更改才能处理服务器发送的事件：//src公司/应用程序js// ... 导入语句。。。类应用程序扩展组件{// ... 构造函数。。。组件didmount（）{this.eventSource.onmessage=e=>this.updateFlightState(JSON.parse（e.数据）；}更新flightState（flightState）{让新数据=this.state.data.map（项=>{如果(项目.航班=== 飞行状态。飞行) {项目状态= flightState.state.状态;}退货项目；});此设置状态(对象.分配（{}，{data:newData}））；}// ... 提供。。。}导出默认应用程序；如我们所见，我们向eventSource对象的onmessage属性添加了一个事件处理程序