在前端开发中，我们经常需要向服务器发送请求并接收响应。常见的方式有 Ajax 和 WebSocket，它们都可以通过固定的端口进行通信。然而，在某些情况下，我们可能会遇到端口限制的问题，这时候 Server-sent Events 就可以派上用场了。
什么是 Server-sent Events
Server-sent Events（SSE）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流（event stream），并且客户端可以通过一个特殊的 EventSource 对象来接收这些事件。相比于 WebSocket，SSE 更加轻量级，可以通过普通的 HTTP 连接进行通信，不需要额外的握手协议。
如何使用 Server-sent Events
使用 SSE 的流程如下：
- 在服务器端，需要设置一个 HTTP 端点，用来接收客户端的请求，并返回事件流。
- 在客户端，需要创建一个 EventSource 对象，指定服务器端的端点 URL，然后监听 message 事件来接收事件流。
服务器端代码示例
下面是一个使用 Node.js 和 Express 框架搭建的 SSE 服务器端示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - -----
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
--- -- - --
-------------- -- -
-----
-------------- ----------
---------------- ----- -----------------------------------
-- ------
---
---------------- -- -- -
---------------- ------ --------- -- ---- ----------
---在上面的代码中，我们通过 Express 的 app.get() 方法设置了一个名为 /events 的 HTTP 端点。当客户端请求这个端点时，服务器会返回一个 Content-Type 为 text/event-stream 的响应，表示这是一个事件流。然后，我们通过 res.write() 方法向客户端发送事件流，每秒钟发送一次。每个事件都由一个 id 字段和一个 data 字段组成，中间用一个空行分隔。
客户端代码示例
下面是一个使用纯 JavaScript 创建的 SSE 客户端示例代码：
const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
console.log(event.data);
};在上面的代码中，我们通过 new EventSource() 方法创建了一个 EventSource 对象，指定了服务器端的 /events 端点 URL。然后，我们通过监听 onmessage 事件来接收事件流，并将事件数据打印到控制台中。
Server-sent Events 的优缺点
使用 SSE 有以下优点：
- 不需要额外的握手协议，可以直接使用 HTTP 进行通信。
- 可以通过普通的 HTTP 端口进行通信，不需要特殊的端口。
- 可以支持跨域访问，只需要在服务器端设置跨域头即可。
但是，SSE 也有一些缺点：
- SSE 只能由服务器端向客户端发送事件流，无法实现双向通信。
- SSE 的事件流是基于文本的，无法支持二进制数据。
- SSE 的事件流只能使用长连接（long-polling）方式实现，无法支持短连接（short-polling）方式。
总结
在某些情况下，我们可能会遇到端口限制的问题，这时候可以使用 Server-sent Events 来解决。SSE 是一种基于 HTTP 的服务器推送技术，可以通过普通的 HTTP 端口进行通信，不需要特殊的端口。使用 SSE 的流程比较简单，只需要在服务器端设置一个 HTTP 端点，用来返回事件流，然后在客户端创建一个 EventSource 对象来接收事件流即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660bcfe6d10417a222c0954e