我将如何实时更新 html 元素？答案

【问题标题】：How would I update an html element live?我将如何实时更新 html 元素？
【发布时间】：2017-08-24 04:42:22
【问题描述】：

堆栈溢出！

我目前正在开展一个项目，您可以通过网页请求音乐，并通过主机播放音乐。例如，如果您的项目在 Raspberry Pi 上运行，那么您将通过其 Web 界面请求音乐，并将其添加到请求列表中。我计划使用 Bottle 模块在 python 中制作这个。考虑到这一点，我想要一个显示当前歌曲标题的实时“正在播放”元素。另外，如果用户可以看到接下来出现的歌曲并且此列表将实时更新，我希望它。例如，当下一首歌曲开始播放播放列表中的第一首歌曲时，它将成为“正在播放”区域中的内容，整个播放列表在浏览器中实时更改。或者，如果用户请求一首新歌曲，它会实时添加到播放列表的底部。这样，用户无需刷新页面即可查看更新。

我在网上阅读了有关使用彗星的信息，但找不到太多关于使用 Bottle 和 python 执行此操作的信息。有没有办法做到这一点？如果是这样，有人可以带我举一个以某种方式使用它的例子吗？我没有太多使用 JavaScript（或一般的 Web 开发）的经验，但我对 python 非常熟悉。我对 html 很好，可以创建一些基本的网页。我以前做过网络界面，但是没有实时统计数据（比如播放列表和“正在播放”字段。）所以如果有一个可以用 Python 轻松完成的答案，我会喜欢的！

谢谢！

【问题讨论】：

有代码吗？？？如果是这样，请将其发布在您的问题上。如果没有，请尝试一些代码，然后发布此问题。
一旦页面被加载，python 帮不了你太多。您可能需要使用 ajax 来访问您的服务器以获取可以通过 python 提供的更新信息，但会通过 ajax 来获取它。不是积极的，但至少追求这条道路。（有时会需要 js）
@OP 你的前端需要一个监听器来寻找你决定要更新的任何东西的变化，有很多不同的工具/技术可用于此
@WilliamReed 我对 ajax 做了一些快速阅读，当新数据在服务器端可用时，如何让浏览器知道？（所以浏览器不只是向服务器发送不断的请求）
@GamingWithAltitude 我不知道如何恰当地回答这个问题，但您需要一些方法来让客户端监听请求。也许看看网络套接字或其他选项

标签： python html bottle comet

【解决方案1】：

您在这里寻找的是 WebSockets！ :) 他们会在这种情况下工作得很好。有一个用于瓶子的 websocket 服务器包，它被称为gevent-websocket，你可以在瓶子文档中找到一个简单的教程来使用瓶子here。几行用js写一个websocket客户端应该很简单（我自己之前做过）。你也可以在上面找到mdn tutorial。

【讨论】：

据我目前的理解，我会让 Web 套接字服务器作为我的程序上的路由运行（如“/ws”），并在主页上显示我想要播放列表和正在播放的视图, 并使用 web socket 将当前播放的曲目和播放列表发送给客户端，然后在 html 列表中显示？
@GamingWithAltitude 你说得对！ :) 我提到的 mdn 文章是here。希望对您有所帮助。