在前端开发中，经常会遇到跨域通信的需求。一般来讲，跨域通信的实现方式有如下几种：
- JSONP
- CORS
- WebSocket
今天，我们将介绍一种使用 Server-Sent-Events（SSE）技术实现跨域通信的方法。SSE 是一种基于 HTTP 的协议，允许服务器向客户端推送事件，客户端通过监听事件来接收数据。SSE 虽然不能像 WebSocket 一样实现双向通信，但它的优点在于它是 HTTP 协议的一部分，因此能够更好地与服务器进行通信。
SSE 原理
SSE 的原理是使用了一个长连接，也就是说客户端向服务器发送一个请求后，服务器会一直保持这个连接开放，发送数据直到连接关闭。客户端可以通过 JavaScript 的 EventSource 类来监听服务器发送的事件。当有事件发生时，EventSource 对象会触发 message 事件，从而执行指定的回调函数。
SSE 的数据格式非常简单，使用纯文本的方式来传递数据。以下是一个 SSE 的数据格式：
event: event-name data: {"key": "value"} event: another-event-name data: {"key": "another-value"}
在 SSE 中，每条数据由两部分组成：事件名称和数据。事件名称可以为空，表示这条数据没有对应的事件，只是普通的数据。数据可以使用任意格式，但一般来说都是使用 JSON 格式。
实现 SSE 跨域通信的步骤
要实现 SSE 跨域通信，需要完成如下的步骤：
1. 服务器端的实现
服务器端的实现需要提供一个 SSE 的路由，由客户端发起请求后，服务器返回一段 JavaScript 代码，建立 SSE 连接。
以下是一个 Express 的服务器端实现示例：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- --------------- -------- ----- ---- - ----------------------------- -------------------- ------------------------------ ----------- --------------------------- ------------- --- ----- - - ----- ---------- - -------------------- -- - -------------- ------------ ---------------- ----------- ------------ ----- ----------------- ------- -- ------ --- -- - ------------------------- --------- - -- ----- -- ---------------- -------- -- - ------------------- --------- -- ---- ------- --展开代码
在上述代码中，我们定义了一个 SSE 的路由 /sse，当客户端请求这个路由时，服务器会向客户端返回一段 JavaScript 代码，建立 SSE 连接，并且每秒钟向客户端发送一条数据。在发送数据时，我们使用了类似于 JSON 的格式来传递数据。
2. 客户端的实现
客户端的实现需要使用 EventSource 类来建立 SSE 连接，并监听服务器发送的事件。以下是一个客户端的实现示例：
-- -------------------- ---- ------- ----- --- - --- ---------------------------------------- ---------- - -------- -- - ---------------- ---------- -------------- - ----------- - -------- -- - ---------------- ----- ----------- - ------------- - -------- ------- - ----- ---- - ---------------------- --------------------- -------- ----------------- -展开代码
在上述代码中，我们使用 EventSource 类来建立 SSE 连接，并监听服务器发送的数据。在接收到数据时，我们解析 JSON 数据，并在控制台上打印出来。
指导意义
使用 SSE 进行跨域通信的方法，不仅可以实现简单的数据通信，还可以用于实现实时推送功能，例如在线聊天、新闻推送等。与 WebSocket 相比，SSE 的实现更加简单，可以在不支持 WebSocket 的浏览器中使用。因此，SSE 拥有广泛的适用性，成为 Web 开发中不可缺少的一种技术手段。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c6d40ccc0f7239cde31304
