Search code examples
pythonhtmlbottlecomet

How would I update an html element live?


StackOverflow!

I am currently working on a project where you can request music through a webpage, and have the music played through the host. For example if you had the project running on a Raspberry Pi then you would request music through it's web interface, and it would be added to a list of requests. I plan to make this in python using the Bottle module. With this in mind, I would like a live "Now playing" element that displays the title of the current song. Also, I would like it if the user could see the songs coming up next and that this list would update live. For example, when the next song starts playing the top song on the playlist then becomes the content in the "Now Playing" area and the whole playlist changes live in the browser. Or if a user requests a new song it is added to the bottom of the playlist in real time. This way, the user doesn't have to refresh the page to see the updates.

I read online about using comet, but couldn't find much about doing this with Bottle and python. Is there a way to do this? If so, can someone lead me to an example of this being used in some way? I don't have much experience using JavaScript (Or web development in general) but I am more than comfortable in python. I am fine with html and can create some basic webpages. I have done web interfaces before, but none with live statistics (Like the playlist and "Now playing" fields.) So if there is an answer that can be easily done with Python, I'd love that!

Thanks!


Solution

  • What you are looking for here is WebSockets! :) They would work very well in this situation. There is a websocket server package for bottle, it's called gevent-websocket you can find a simple tutorial for using this with bottle here at the bottle docs. It should be very simple to write a websocket client in js in a few lines (I've done this before myself.) You can find an mdn tutorial on this as well.