我会如何更新一个html元素?

问题描述:

*!我会如何更新一个html元素?

我目前正在研究一个项目,您可以通过网页申请音乐,并通过主持人播放音乐。例如,如果您的项目在Raspberry Pi上运行,那么您将通过其Web界面请求音乐,并将其添加到请求列表中。我打算使用Bottle模块在python中创建它。考虑到这一点,我想要一个显示当前歌曲标题的现场“正在播放”元素。另外,如果用户可以看到下一首歌曲,并且该列表将实时更新,那么我希望它。例如,当下一首歌曲开始播放播放列表中的首歌曲时,将成为“正在播放”区域中的内容,整个播放列表将在浏览器中生效。或者,如果用户请求新歌曲,它会实时添加到播放列表的底部。这样,用户不必刷新页面即可查看更新。

我在线阅读了关于使用彗星的内容,但是无法找到关于如何使用Bottle和python来做这件事。有没有办法做到这一点?如果是这样的话,有人能带我以某种方式使用这个例子吗?我没有太多使用JavaScript的经验(或者一般的网页开发),但是我在Python中感觉更舒适。我很好用html,并可以创建一些基本的网页。我之前做过网络界面,但没有任何实时统计数据(如播放列表和“正在播放”字段)。所以如果有一个可以用Python轻松完成的答案,我很乐意!

谢谢!

+0

有任何代码?如果是这样,请张贴在你的问题上。如果没有,请尝试一些代码,然后发布这个问题。 – Adi219

+1

一旦页面加载python不能帮你很多。您可能需要使用ajax来打开您的服务器以获取可通过python提供的更新信息,但会通过ajax获取它。不积极,但至少追求那条大道。 (在某些时候需要js) –

+0

@OP你需要一个在你的前端的监听器来寻找你决定更新的任何变化,这里有很多不同的工具/技术可用于这个 –

你在这里找的是WebSockets! :)在这种情况下,他们会工作得很好。有一个用于瓶子的websocket服务器包,它叫做gevent-websocket,你可以在bottle文档中找到一个简单的教程,用于使用瓶子here。在js中写几行websocket客户端应该很简单(我已经在我之前完成了这个)。你也可以在这里找到一个mdn tutorial

+0

,我将让网络套接字服务器作为路由在我的程序中运行(如“/ ws”),并在主页上放置我想要的播放列表,然后播放视图显示并使用web套接字将当前正在播放的曲目和播放列表发送给客户端,然后将其显示在html列表中? –

+0

@GamingWithAltitude你拥有它完全正确! :)我提到的mdn文章是[here](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)。希望有所帮助。 – MustacheMoses