利用 SSE 进行网页间通信的架构设计-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，由于需要很好地扮演网页前端调用后端服务的角色，我们需要找到一种可靠的方式与后端进行通信。传统的方式是采用轮询或长轮询（long-polling），不过这些方式的效率不理想，同时也可能会因为过多的请求并发而导致服务器的压力过大。因此，近年来，越来越多的前端工程师选择使用 SSE（Server-Sent Events）来进行网页之间的通信。这篇文章我将探讨如何利用 SSE 进行网页间通信的架构设计。

SSE 是什么？

SSE 是一种轻量级通信协议，其通过 JavaScript 的 EventSource API 向客户端推送流式数据。这种数据格式使用了 HTTP 协议，因此 SSE 能够更好地与现有的 Web 基础设施进行集成。

SSE 的工作原理

初始化连接

客户端向服务器发送一个 HTTP 请求，请求指定 SSE 视图（SSE stream）。该请求中包含头部信息 content-type:text/event-stream，告诉服务器该请求为 SSE 视图。

建立服务端发送数据流

服务器返回一个 SSE 视图，客户端建立到服务器的连接，并开始接收由服务端传输的数据流。数据是通过一个大小未知的流，而不是通过多个请求和响应来传递。

传输数据

当数据产生了变化，服务器推送数据流给客户端，这些数据会通过特殊的消息格式传输。

断开连接

当客户端不需要接收更多数据时，它会关闭连接。

使用 SSE 进行网页间通信的架构设计

利用 SSE 进行网页间通信需要考虑很多因素，比如实现原理、数据传输过程、兼容性等等。以下，我将介绍一些使用 SSE 进行网页间通信的常见的架构设计。

1. 前端单页面应用架构（SPA）

在这种情况下，我们可以使用 SSE 来实现前端组件之间的通信。以下是一个示例代码，它通过监听来自服务器的消息，将新的数据插入当前的列表中：

const source = new EventSource('/api/data')
source.onmessage = event => {
  const data = JSON.parse(event.data)
  const newItem = document.createElement('li')
  newItem.innerHTML = data
  document.getElementById('list').appendChild(newItem)
}

2. 消息通知架构

在这种情况下，我们可以利用 SSE 来实现消息通知的功能。我们可以建立一个 SSE 连接，用来发布新消息的事件。这里是一个示例代码：

-- -------------------- ---- -------
----- ------ - --- ---------------------------
---------------------------------- ----- -- -
  ----- ---- - ----------------------
  ----- ------------------- - --- ----------------- ------- ---------- -
    ----- ---------
  --
  -- ------ ---- ----------- ---- --- ------- ------------ 
  --------------------------- - ----- -- -
    -- ----
  -
--展开代码

3. 实时日志查询架构

在这种情况下，我们可以使用 SSE 来实现实时日志查询的功能。以下是一个示例代码：

const source = new EventSource('/api/log')
source.onmessage = event => {
  const logContainer = document.getElementById('log')
  logContainer.innerHTML += '\n' + event.data
  // Automatically scroll down to the bottom of the log
  logContainer.scrollTop = logContainer.scrollHeight
}

兼容性

目前，SSE 是许多现代浏览器（包括 Chrome、Firefox、Safari 等）的标准特性，同时，SSE 在移动浏览器上的兼容性也相对较好。不过，如果你需要支持 Internet Explorer 或者 Edge，你需要使用一个 polyfill。

结语

SSE 可以帮助我们在前端中实现更好的实时通信，无需依赖复杂的框架或 DSL。同时，SSE 也不需要我们使用 WebSockets 或轮询等复杂的技术，因此，它的实现也非常容易上手。尝试使用 SSE 来改善前端通信的体验，你可能会有意想不到的发现。

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

利用 SSE 进行网页间通信的架构设计

前言