在前端开发中，经常需要实现跨域通信。传统的跨域通信方式有很多，比如 JSONP、CORS、iframe 等。但是这些方式都有一些局限性，比如 JSONP 只支持 GET 请求，CORS 需要服务器端配合设置等等。这时候，Server-Sent Events（SSE）就成了一个很好的选择。
什么是 Server-Sent Events
Server-Sent Events 是 HTML5 中的一个新特性，它允许服务器向客户端推送事件流，而无需客户端不断地向服务器发起请求。SSE 的优点在于它非常简单易用，而且支持跨域通信。
如何使用 Server-Sent Events
使用 SSE，需要在客户端通过 JavaScript 创建一个 EventSource 对象，然后指定服务器端的 URL。服务器端需要实现一个 HTTP 接口，该接口会返回一个事件流。客户端通过 EventSource 对象监听服务器端的事件流，当服务器端有新的事件发生时，客户端就会收到通知。
下面是一个简单的示例代码：
-- -------------------- ---- ------- -- ----- ----- ----------- - --- ----------------------------------------- --------------------------------------- ------- -- - ------------------------ --- ------------------------------------- ------- -- - -------------------------- -------- ------- ---展开代码
-- -------------------- ---- ------- -- -------------- - -------- ------------------ ----- ---- -- - --------- --------------- -------------------- ---------------- ----------- ------------- ------------- --- -------------- -- - ---------------- ----- ---------------------------- -- ------ ---展开代码
客户端代码中，我们创建了一个 EventSource 对象，并指定了服务器端的 URL。然后，我们监听了 message 和 error 事件。当服务器端有新的事件发生时，message 事件会被触发，我们可以通过 event.data 获取事件的数据。当连接出错时，error 事件会被触发。
服务器端代码中，我们使用 Express 实现了一个 HTTP 接口。该接口返回的 Content-Type 是 text/event-stream，这是 SSE 的标准 MIME 类型。Cache-Control 设置为 no-cache，这是为了避免缓存。Connection 设置为 keep-alive，这是为了保持长连接。然后，我们使用 setInterval 定时向客户端推送事件流。每隔 1 秒钟，我们就向客户端发送一个事件，事件的数据是当前时间的 ISO 字符串表示。
SSE 的优点和局限性
SSE 的优点在于它非常简单易用，而且支持跨域通信。与传统的 AJAX 请求相比，SSE 可以实现实时推送数据，而且不需要客户端不断地向服务器发起请求，减少了服务器的压力。此外，SSE 还支持断线重连，即使客户端和服务器端的连接中断，客户端也可以自动重连，继续接收事件流。
SSE 的局限性在于它不支持双向通信。也就是说，客户端只能接收服务器端推送的事件，而不能向服务器端发送请求。此外，SSE 也不支持跨域的 cookie 和 HTTP 认证，这可能会影响某些应用程序的实现。
总结
使用 Server-Sent Events 可以实现跨域通信，而且非常简单易用。通过 EventSource 对象和服务器端的 HTTP 接口，可以实现实时推送数据，而且不需要客户端不断地向服务器发起请求，减少了服务器的压力。但是，SSE 也有一些局限性，比如不支持双向通信和跨域的 cookie 和 HTTP 认证。在实际应用中，需要根据具体的场景选择合适的跨域通信方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fbcc33d10417a22275cab3
