我们目前面临一些棘手的架构问题，即在一个复合 Web UI 中将多个Web 组件与单个后端服务集成到一个流畅的 Web 应用程序中。
（可协商的）设计决策有一些限制：
- 微服务应该服务于它自己的前端（WebComponent），我们希望使用 HTML Imports 来允许将这样的 WebComponent 包含到复合 UI
- 前端 WebComponent 需要能够从其后端微服务接收实时更新/事件
- 页面（复合 UI 中使用的 Web 组件的总和）应仅使用一个连接/永久占用的端口与后端通信
我做了一个草图来代表我们的抽象/非技术要求以供进一步讨论：
据我了解，问题可以改写为：我们如何
a) 集中沟通进入
b) 在退出时分发通信
两端的单一传输路径。
这两个任务需要在传输路径的两侧解决，例如。后端和前端。
对于后端，我非常希望采用不仅由 Sam Newman 描述的 BFF 模式能够满足我们的需求。上述草图的右半部分（后端）可能与此类似：
传输路径可能最好使用标准化的网络技术，例如。https和websocket (wss)用于最需要的双向通信。我很想了解在网络技术领域具有同等高采用率的替代方案。
对于前端，我们目前缺乏关于先前描述的模式或框架的想法和知识。
棘手的是，多个基本独立的 Web 组件需要一起找到才能使用 ONE 中央通信路径。例如，如果前端将通过实现一个（大）Angular 应用程序来实现，我们将实现并注入一个“BackendConnectorService”（待讨论的名称）并注入到我们的各种组件中。
但是由于我们希望使用解耦的 Web 组件，因此不存在用于共享业务逻辑和依赖注入的此类背景层。我们是否应该编写一个专有的 JS 库，如果尚未从我们的每个组件中加载到窗口上下文中，并将用于（按照约定）与后端通信？
这将大致整合到如下草图中：
我们是否在思考/设计我们的应用程序错误？
我感谢每一个合理的想法或提示，以证明一个经过验证的模式/框架。
此外，您对问题和架构的看法可能有助于解决我们目前面临的问题。