微前端到微服务后端通过单通道/websocket的通信模式

我们目前面临一些棘手的体系结构问题，即如何将复合web UI中的多个后端服务与单个后端服务集成到一个平滑的web应用程序中

（可协商的）设计决策有一些约束：

微服务应该服务于它自己的前端（WebComponent），我们希望使用HTML导入来允许将这样的WebComponent包含到复合UI中

前端网络组件需要能够从其后端微服务接收实时更新/事件

页面（复合UI中使用的Web组件的总和）应仅使用一个连接/永久占用端口与后端通信

我画了一张草图，代表我们的抽象/非技术要求，以供进一步讨论：

根据我的理解，这个问题可以重新表述为：我们如何做

a） 集中沟通进入

b） 退出时分发通信

两端的单一传输路径

这两个任务需要在传输路径的两侧解决，例如后端和前端

对于后端，我非常希望采用BFF模式能够满足我们的需求。上述草图的右半部分（后端）可能与此类似：

传输路径最好使用标准化的web技术，例如https和websocket（wss）来满足大多数需要的双向通信。我渴望了解网络技术领域中采用率相当高的替代方案

对于前端我们目前缺乏关于先前描述的模式或框架的想法和知识

棘手的是，多个基本上独立的网络组件需要找到一起使用一个中央通信路径。例如，如果前端是通过实现一个（大的）Angle应用程序来实现的，那么我们将实现并注入一个“BackendConnectorService”（名称待定），并注入到我们的各个组件中

但由于我们希望使用解耦的Web组件，因此不存在用于共享业务逻辑和依赖项注入的后台层。我们是否应该编写一个专有的JS库，如果我们的每个组件都不存在，它将加载到窗口上下文中，并（按照约定）用于与后端通信

这将大致整合到草图中，如下所示：

我们是否认为/设计我们的应用程序是错误的

对于每一个合理的想法或提示，对于一个经过验证的模式/框架，我都表示感谢

---

此外，您对问题和体系结构的看法可能有助于我们绕过当前面临的问题。

我将采用您在后端对前端使用的相同方法。

---

创建一个HTTP或WS网关，前端组件将通过请求轮询该网关。它将连接到后端BFF，在那里你解决了所有问题。只要您想交换组件、传输或体系结构，其中一个不依赖于另一个。

您是否阅读过Microsoft的eShopOnContainers？对我来说，这就是你的目标，因为你是一名.net开发人员。@MatheusValienteSouza是的，我之前看过这个演示，但它使用一个SPA作为前端，因此没有遇到我们特别遇到的问题。它表明它是BFF模式的实现，因为eShopContainers还处理不同的前端设备，请注意。@MatheusValienteSouza正如我在问题中提到的，我对事物后端的BFF模式表示同情。但让我们头痛的是，在前端集中/分配来自解耦Web组件的流量，而不是使用（单片）SPA的适当策略。据我所知，使用Web组件的功能非常有限，因为它只能加载HTML片段和一些简单的JS，由于它不是一个完整的页面加载，我不认为你可以加载一个完整的js包到它（很高兴在这个问题上得到纠正）。iFrame是一种可能的解决方案，但它们也有自己的问题-如果您希望解耦组件之间的完全交互，它不会是100%——你需要考虑你的用例来确保事情在浏览器历史和后退按钮上能正常工作，但是你如何使前端组件共享一个单一的WebSoCK连接？你需要有一个连接到前端网关，另一个连接到后端网关。因此，解决方案是使用redis messenger在前端组件之间进行通信，其中一个组件是使用WSW的后端网关，您可以使用Web Worker或服务Worker@Supersharp您能否提供有关使用webworkers的更多详细信息？@Mikkel您可以查看本页末尾的Jack Archibald简介或其他资源，或MDN文档：