前言
当前端开发需要实现互动性较强的问答答题功能时，我们通常会考虑使用长轮询或 WebSocket。不过，这些方案都需要使用额外的库或技术，并且在某些场景下可能存在较高的负载开销。
在这种情况下，Server-sent Events (SSE) 成为了一种更加轻量级、易于使用的方案。本文将介绍如何使用 SSE 实现问答答题功能，并提供示例代码进行演示。
SSE 简介
SSE 是一种推模式的 Web 前端通信协议，它使用基于 HTTP 的长连接，从服务器向前端单向发送数据流。与 WebSocket 不同的是，SSE 不允许前端向服务器发送数据，只允许服务器发向前端。
SSE 通过 EventSource API 来实现，它允许前端通过创建 EventSource 对象，并向服务器发送一个 HTTP 请求来建立连接。一旦连接建立成功，服务器就可以向前端发送消息。
实现问答技术题
实现方式
我们将使用 SSE 来实现一个简单的问答技术题程序。具体的实现方式如下：
- 服务端监听一个 HTTP 请求路径，在有请求到达时返回一个带有
text/event-streamContent-Type 的 HTTP 响应。 - 当收到一个请求时，服务器建立一个 SSE 连接，然后向前端周期性发送数据。
- 客户端使用
EventSourceAPI 创建连接，并注册message事件监听器来接收服务器发送的数据。 - 服务器可以根据业务需要决定何时断开连接。
服务器端实现
我们使用 Node.js 作为服务器端运行环境，并使用 Express 框架来编写具体的代码。以下是简要的示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- --- - ---------------
-------------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
----- --- - --- -------- -----
-------------- -- -
----------
------ -----------
----- ----- -- --- ------- ---- -- -------
---
-- ------
---
----- ------ - ---------------- -- -- -
------------------- -- ------- -- ---- -------
---这里我们使用 express 模块来创建一个 HTTP 服务器，监听 /question 路径。当有请求到达时，我们设置响应头以表明这是一个 SSE 连接，并使用 SSE 对象向前端周期性地发送数据。在这个示例中，我们每隔 5 秒向前端发送一个 question 事件，其中包括问题的具体内容。
客户端实现
客户端使用 EventSource API 来连接服务器并接收数据。以下是简要的示例代码：
const eventSource = new EventSource('/question');
eventSource.addEventListener('question', event => {
const question = event.data;
// 在页面上展示问题
// ...
});这里我们使用 EventSource 对象来创建一个 SSE 连接，监听 /question 路径。当服务器向前端发送 question 事件时，我们就可以在 message 事件监听器中获取问题的具体内容，然后在页面上展示出来。
总结
SSE 可以作为一种轻量级、简单易用的方案来实现前端与后端的实时通信。在需要实现问答答题等互动功能时，我们可以使用 SSE 来实现。在实现的过程中，需要注意服务器端的实现逻辑以及前端的 SSE 连接逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6643bf7cd3423812e41b68ac