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

Posted 2023-02-19

【中文标题】如何在 Web 应用中实现实时预览功能？

【英文标题】：How to accomplish live preview feature in a web app?

【发布时间】：2020-01-30 10:11:07

【问题描述】：

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

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

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

一些想法：

在网站 CMS 中嵌入网站 A 以及在左侧面板上所做的任何更改基本上只会刷新网站 A（它只是嵌入到页面中）。 将网站 A 重新创建为网站 CMS 中的一个页面，并调用相同的 API，以便在网站 CMS 的网站 A 和实际的网站 A 上都发生更改。（尽管我不认为这会更有益并且会创建完全相同的页面有 2 个独立的代码库）。 其他？？？

我们使用的主要框架是这个 CMS UI 的 ReactJs。

【参考方案1】：

您可以在 CMS 和网站 A 之间建立通信链接以交换数据。

选项

您可以使用 iframe 将网站 A 嵌入网站 CMS 中，然后您可以使用 postMessage 在 CMS 和网站 A 之间交换数据。 否则，您可以使用 WebSockets，网站 A 将在 CMS 左侧面板上侦听所做的更改。

【参考方案2】：

选项 2 是我会做的，不一定是重复的。

您希望用户能够在不发布更改的情况下预览更改。因此，移植真实网站与该目标不兼容。

代码重复可能很少。它将共享大部分相同的代码，并且传播速度也会更快。