javascript - glitch.com如何更新其页面？-6ren

javascript - glitch.com如何更新其页面？

转载作者：行者123 更新时间：2023-11-30 11:01:11

Closed. This question needs to be more focused。它当前不接受答案。












                            想改善这个问题吗？更新问题，使其仅通过 editing this post专注于一个问题。

                        在4个月前关闭。



Glitch是在线的HTML / CSS / Javascript代码编辑器。在他们的编辑器中，只要更改一行代码，它就会在网站上更新。甚至无需单击“保存”按钮。而且该页面也不必刷新。它只是更新代码。每当服务器上发生任何更改时，我都希望更新我的网站。研究完之后，人们只是告诉我用ajax或node.js编写类似的东西。我不明白该怎么做。有人可以帮我指出正确的方向吗？提前致谢。

最佳答案

这里有两个不同的，完全不相关的问题。我都会回答他们。

glitch.com如何更新其页面？

这是协作编辑。在基本级别上，您需要一种定期且实时地从服务器发送/接收数据的方法。 Web Sockets是一种选择的技术，它允许您以所需的任何格式发送/接收数据包。

接下来，您需要一种在页面上更新数据的方法。这是简单的DOM操作，其中在元素上设置了innerText，innerHTML和其他属性。

现在，实际的挑战... Glitch如何处理协作。有整本关于Operational Transform主题的书。这个想法是，来自多个源的更改可以异步合并，然后在所有端进行更新。可以将其视为实时版本控制。

每当服务器上发生任何更改时，我都希望更新我的网站。

这完全不相关的原因是，不需要双向通信。无需进行业务转型。这是一个简单得多的问题。

如果需要立即实时更新页面，则需要客户端和服务器之间的持久连接。尽管您可以如上所述使用Web套接字，但实际上有一个易于实现的抽象... Server-Sent Events。您将需要构建一些服务器端组件，以在页面更改时通知客户端，以便客户端可以重新加载它。

如果不需要实时更新，并且可以延迟一两分钟而满意，则可以考虑使用Fetch API进行简单轮询。发出HTTP HEAD请求，并检查用于保持版本控制的某些标头，例如eTag。如果eTag更改，请重新加载页面。

如果您觉得花哨的话，实际上可以使用Fetch API加载页面数据并使用它来修补DOM。

如您所见，这是一个非常广泛的主题。您不仅可以使用一线魔法来为您完成所有这些任务。我建议检查所有这些概念，并对其有所了解。试试看，并在有问题时发布特定问题。