HTML over WebSockets：几乎不需要任何 JavaScript 的实时 SPA

构建 SPA（单页应用程序）是一个复杂的难题：绘制视图的 JavaScript 框架、服务 JSON 的 API 以及被迫通过合约相互理解的 2 个独立代码库。这是一个被接受的、专业化的场景。但成为标准并不意味着它是唯一的方法。我想向您展示另一种方法，这种方法并不新鲜，但多年来已经受到关注：HTML over WebSockets。这个想法是这样的：服务器不是发送 JSON 并在浏览器中组装 HTML，而是发送已经构建的 HTML，客户端只需将其放置在其所属的位置即可。所有渲染逻辑都以单一语言保留在后端，无需合约或 API。这种模式称为超媒体或 HTML。 HTML 传输方式的重要之处在于它决定了通信的延迟和双向性。存在三种变体： 通道非常重要，它决定了应用程序的体系结构及其通信模式。在本文中，我将讨论基于 WebSockets 的 HTML：该系列的实时和双向变体。它可以让您几乎不需要任何 JavaScript，使用单一语言构建 SPA，无需合约和单一渲染引擎。我们将了解它是什么、如何工作以及与 HTTP 或 SSE 同类产品相比何时获得回报。起源 Chris McCord，Phoenix（Elixir 生态系统中最受欢迎的框架）的创建者，在 ElixirConf 2019 上展示了一项名为 LiveView 的技术。在短短 15 分钟内，他构建了一个实时工作的 Twitter 克隆，无需添加任何渲染 JavaScript 或流行框架（React、Angular、Vue...）来管理视图，证明您可以留在后端并通过良好性能的甜蜜提示保持高效。从那时起，该解决方案变得越来越流行，激励其他开发人员用其他语言构建 HTML-over-WebSockets 实现。你可以回到后端而不放弃前端的好部分。它是如何运作的？尽管乍一看似乎并非如此，但 JavaScript 是在客户端上使用的。它的工作不是渲染，而是创建与 WebSocket 的通信通道，并将接收到的 HTML 放置在正确的位置。再加上其他辅助任务，如动画、事件处理等。McCord 的解决方案不是向前端发送 JSON，而是向前端发送不需要预处理的 HTML。这样我们就可以将渲染负载及其所有逻辑移至后端。好的，但是...我们如何让服务器立即向我们发送新内容而不发出请求？简单：使用 WebSocket。让我们从引言中回顾一下传统的系统。我从网络发出 HTTP 请求，浏览器启动操作并获取包含所有原始信息的 JSON 作为响应。下一步是解释它并构建相应的 HTML。 sequenceDiagram 参与者 C 作为浏览器参与者 S 作为服务器 C->>S: 1. HTTP 请求 (GET /api/article/2/) 以及可能的身份验证 S->>S: 2. 查询 DB S->>S: 3. 使用文章数据构建 JSON S-->>C: 4. 返回 JSON C->>C: 5. 解析 JSON C->>C: 6. 使用其渲染引擎构建 HTML 使用 HTML over WebSockets ，相同的请求通过永久通道，响应已经组装成 HTML，中间没有 JSON。由于通道永远不会关闭，服务器甚至可以在没有客户端请求的情况下提前发送更改。 WebSockets 的流程如下，忽略初始连接和身份验证，仅在通道打开时发生一次：sequenceDiagram 参与者 C 作为浏览器参与者 S 作为服务器（后端） C->>S: 1. 发送文本：“我想要 /article/2/” S->>S: 2. 查询数据库 S->>S: 3. 使用模板引擎渲染 HTML S-->>C: 4. 返回组装的 HTML/CSS/JS " ... " C->>C: 5. 将 HTML 放置在其所属的位置 简单、优雅且快速。客户端负责将 HTML 放置在其所属的位置并侦听事件。服务器处理剩下的事情。您不必担心客户端状态或渲染逻辑，因为一切都位于后端。完整、复杂的循环，包括打开连接和身份验证，如下所示：sequenceDiagram 参与者 C 作为浏览器参与者 S 作为服务器（后端）C->>S: 1. 打开 WebSocket 连接并验证 C,S 上的注释：单个持久通道 C->>S: 2. 发送文本：“我想要 /article/2/” S->>S: 3. 查询 DB S->>S: 4. 使用模板引擎渲染 HTML S-->>C: 5. 返回组装的 HTML/CSS/JS " ... " C->>C: 6. 将 HTML 放在它所属的位置 注意 S,C：服务器也可以在没有客户端询问的情况下推送更改（广播） 最重要的是，通过其架构本身，它比其他解决方案具有内在的优势。它有什么优点？只有一个渲染引擎，降低了复杂性。您不需要构建 API：服务器生成 HTML 并将其发送到客户端，无需中间人。状态存在于服务器上。它不是无记忆的请求-响应：有我