如何在 Web 应用程序中实现实时预览功能？

Question

基本上，我们使用无头 CMS 来编辑网站 A 上的内容。我们正在基于无头 CMS API（称为网站 CMS）构建我们自己的 CMS UI。

现在，我们在网站 CMS 中有这个页面，您可以在其中编辑左侧面板上的内容，并在右侧面板（移动视图）上预览网站 A。

我以前没有做过这样的事情，我想知道实现这一点的最佳方法是什么，是否有任何库可以帮助实现此功能。

一些想法：

1. 在网站 CMS 中嵌入网站 A 并且在左侧面板上所做的任何更改基本上只是刷新网站 A（它只是嵌入到页面中）。

2. 将网站 A 重新创建为网站 CMS 中的一个页面并调用相同的 API，以便更改同时发生在网站 CMS 的网站 A 和实际的网站 A 上。（虽然我不知道这会有什么好处，并且会创建 2 个单独的代码库对于完全相同的页面）。

3. 其他？？？

我们使用的主要框架是用于此 CMS UI 的 ReactJs。

Answer 1

选项 2 是我会做的，不一定是重复的。您希望用户无需发布即可预览更改。因此，移植真实网站与该目标不兼容。代码重复可能最少。它将共享大部分相同的代码，并且传播速度也会更快。

Answer 2

您可以在 CMS 和网站 A 之间建立通信链接以交换数据。选项您可以使用 iframe 将网站 A 嵌入网站 CMS，然后您可以使用postMessage在 CMS 和网站 A 之间交换数据。或者，您可以使用 WebSockets，其中网站 A 将侦听在 CMS 左侧面板上所做的更改。