基于 SSE 的跨域通信实现-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，跨域通信是一项常见的需求。随着技术的不断发展，越来越多的跨域通信方法得到了实现，比如 CORS、JSONP 等等。而今天我们将要探讨的是基于 SSE 的跨域通信实现。

什么是 SSE？

首先，我们需要了解 SSE（Server-Sent Events）是什么。它是一种基于 HTTP 的服务器推送技术，可以让服务器实时地向客户端推送数据，并且不需要客户端发起请求。这种技术可以用于实时更新数据、消息通知、在线聊天等场景。

SSE 的工作原理是客户端向服务器发送一个请求，请求的头部带有 Accept: text/event-stream，表示请求的数据类型是文本式的事件流。服务器会保持请求连接，然后按照一定的格式不断地向客户端发送数据，直到连接被关闭为止。

SSE 数据的格式如下：

event: <event-name>
data: <data>

event: <event-name>
data: <data>
...

其中 event 表示事件名称，data 表示事件的数据。每个事件之间用一个空行分隔。

基于 SSE 实现跨域通信

在默认情况下，SSE 只能在同域下使用。但是我们可以通过一些技巧实现跨域通信。

JSONP

我们可以在客户端通过 JSONP 的方式向服务器请求 SSE 数据。这种方法的原理是在客户端创建一个 <script> 标签，标签的 src 属性指向服务端 SSE 数据的地址。然后服务端返回一个 JavaScript 函数调用，将 SSE 数据作为参数传递给这个函数。这样客户端就可以直接通过回调函数处理 SSE 数据了。

function handleSSEData(data) {
  // 处理 SSE 数据
}

const script = document.createElement('script');
script.src = 'http://server.com/sse?jsonp=handleSSEData';
document.body.appendChild(script);

在服务端，我们可以通过 URL 参数判断是否需要返回 JSONP 格式的数据，并且在返回数据的时候包裹回调函数。

if (request.query.jsonp) {
  return response.send(
    `${request.query.jsonp}(${JSON.stringify(sseData)})`
  );
}

CORS

另一种实现方式是使用 CORS（Cross-Origin Resource Sharing）。CORS 允许浏览器原生地发送跨源的 AJAX 请求，从而让 Web 应用可以更好地与其它域的服务器进行交互。

在服务端，我们需要在响应头部返回 Access-Control-Allow-Origin 字段，表示允许的跨域域名，以及其它相关的 CORS 字段。

response.set({
  'Content-Type': 'text/event-stream',
  'Cache-Control': 'no-cache',
  'Connection': 'keep-alive',
  'Access-Control-Allow-Origin': '*'
});

在客户端，我们可以直接使用 new EventSource() 通过 SSE 获取数据。

const evtSource = new EventSource('http://server.com/sse');
evtSource.addEventListener('message', (event) => {
  // 处理 SSE 数据
});

实现一个 SSE 服务器

最后，我们来看一下如何实现一个 SSE 服务器。我们使用 Node.js 和 Express 框架来搭建一个 SSE 服务器。

-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------

----- --- - ----------
----- ---- - ---------------- -- -----

----------------

--------------- --------- --------- -- -
  --------------
    --------------- --------------------
    ---------------- -----------
    ------------- -------------
    ------------------------------ ---
  ---

  -------------- -- -
    ----- ------- - -
      ----- ----------
    --
    --------------------- ---------------------------------
  -- ------
---

---------------- -- -- -
  ---------------- ------ ------- -- ---- ----------
---

我们在 /sse 路径下返回 SSE 数据，并且每秒钟推送一次数据。在客户端的时候，我们可以通过上面提到的方式获取 Server-Sent Events 数据。

总结

基于 SSE 的跨域通信实现，可以使用 JSONP 或者 CORS 等方式，让我们的应用更加灵活和开放。在实际的应用场景中，我们需要根据具体的需求选择最适合的方式来实现跨域通信。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64d452edb5eee0b525be0071