构建单页应用（SPA）是一个复杂的难题：一个绘制视图的JavaScript框架，一个提供JSON的API，以及两个被迫通过契约相互理解的独立代码库。这是一种被广泛接受和专业化的场景。但成为标准并不意味着这是唯一的方式。我想向你展示另一种方法，这种方法并不是新的，但近年来获得了关注：通过WebSocket传输HTML。它的想法是：服务器发送已经构建好的HTML，而客户端只需将其放置在适当的位置，而不是发送JSON并在浏览器中组装HTML。所有的渲染逻辑都留在后端，使用单一的语言，无需契约或API。这个模式被称为超媒体或通过网络传输HTML。HTML传输的方式决定了通信的延迟和双向性。有三种变体：通过HTTP，逐个请求地发送，如htmx或Unicorn；通过SSE，打开一个从服务器到客户端的一条单向连续通道，如Datastar；通过WebSocket，一个持久的双向通道，如Phoenix LiveView或Django LiveView。这个通道是非常重要的，因为它决定了应用程序的架构及其通信模式。本文将讨论通过WebSocket传输HTML：这个实时和双向变体。它让你可以几乎不使用JavaScript，用单一的语言，毫无契约和单一的渲染引擎来构建SPA。我们将看到它是什么，它是如何工作的，以及与HTTP或SSE的同类相比，它何时是值得的。起源于Chris McCord，他是Phoenix（Elixir生态系统中最受欢迎的框架）的创建者，在2019年的ElixirConf上介绍了一种叫做LiveView的技术。在短短15分钟内，他构建了一个实时工作的Twitter克隆，而没有添加任何渲染JavaScript或流行框架（如React、Angular、Vue等）来管理视图，证明可以留在后端并高效地工作，且性能良好。从那时起，这种解决方案变得流行，激励其他开发者在其他语言中构建基于HTML的WebSocket实现。你可以回到后端，而不必放弃前端的好处。它是如何工作的？即使乍一看似乎并非如此，JavaScript也会在客户机上使用。它的工作不是渲染，而是创建一个与WebSocket的通信通道，并将接收到的HTML放在正确的位置。另外还包括一些次要任务，如动画、事件处理等。McCord的解决方案不是向前端发送JSON，而是发送无需预处理的HTML。通过这种方法，我们将渲染负载及其所有逻辑移到后端。好的，但我们如何让服务器立即发送新内容而不进行请求呢？很简单：使用WebSocket。让我们回顾一下引言中提到的传统系统。我从网页发起HTTP请求，浏览器开始行动，并收到包含所有原始信息的JSON作为响应。下一步是解析它并构建相应的HTML。"sequenceDiagram参与者C为浏览器参与者S为服务器C->>S: 1. HTTP请求（GET /api/article/2/）并可能包含身份验证S->>S: 2. 查询数据库S->>S: 3. 构建包含文章数据的JSONS-->>C: 4. 返回JSONC->>C: 5. 解析JSONC->>C: 6. 使用其渲染引擎构建HTML"。使用通过WebSocket传输HTML时，该请求通过一个持久的通道进行，而响应则是已经组装好的HTML，期间没有JSON。而且，由于通道从未关闭，因此服务器甚至可以主动发送更改，而无需客户端请求。使用WebSocket的流程如下，忽略初始连接和身份验证，这些在通道打开时仅发生一次："sequenceDiagram参与者C为浏览器参与者S为服务器（后端）C->>S: 1. 发送文本：“我想要/article/2/”S->>S: 2. 查询数据库S->>S: 3. 使用其模板引擎渲染HTMLS-->>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. 查询数据库S->>S: 4. 使用其模板引擎渲染HTMLS-->>C: 5. 返回组装的HTML/CSS/JS "..."C->>C: 6. 将HTML放置在适当位置"注释S,C: 服务器也可以主动推送更改，而无需客户端请求（广播）"此外，凭借其架构，它比其他解决方案具有内在优势。它的优势是什么？