In this tutorial, we'll learn how to update a web page periodically and observe our changes live in the browser. Completing this tutorial should improve your understanding of how easy it is to use Wave to publish information in realtime.
The program we'll be writing is a verse generator for the runaway mid-20th century smash hit, 99 Bottles of Beer, which looks something like this:
99 bottles of beer on the wall, 99 bottles of beer.
Take one down, pass it around, 98 bottles of beer on the wall...
98 bottles of beer on the wall, 98 bottles of beer.
Take one down, pass it around, 97 bottles of beer on the wall...
Our program will be analogous to our "Hello, World!" program, with the addition of a loop. We'll generate a verse every second, and observe the verse change in the browser in realtime. After that, we'll take a stab at making our program a bit more efficient, introducing how expressions work.
(Incidentally, Donald Knuth proved that this song has a complexity of
O(log N) in "The Complexity of Songs", but we won't let that little detail deter us for now.)
This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.
Step 1: Write your program
Our program looks like this. It's mostly similar to the one in the Hello World tutorial, with one exception: we're setting the markdown card's content inside a
Step 2: Run your program
Step 3: Watch updates live
Point your browser to http://localhost:10101/beer, and watch the verses fly by.
Step 4: Make it more efficient
Our program is accurate, but not necessarily efficient. Every second, it sends the entire verse in its entirety to the Wave server, with only minuscule changes (
i-1). You can observe this in the Wave server's log (switch to the terminal window running the Wave server to view the log):
We can do better. Instead of sending the verse over and over again, we can send the verse once with placeholders for
i-1, and then send only
i-1 during subsequent updates. That will keep network traffic down to a minimum and allow the Wave server to perform less work while sending your updates to your website's bajillion visitors.
Here's how we approach this. First, when we create our markdown card, we set the content to an expression (or formula). An expression is a string that starts with
= (similar to formulae in spreadsheet software). Our expression looks like this:
We've used a triple-quoted multi-line string here, but you can use single- or double-quoted strings as well. The tokens inside the
}} are placeholders. Note how the verse string starts with a
=, indicating that this is an expression.
Next, we create the markdown card as usual using our verse as the
content. But more importantly, we set the card's
data attribute to a Python dictionary containing values for the placeholders
Finally, instead of updating the entire verse every second, we update only the
.data.after attributes of the markdown card:
Our final program looks like the listing below. You'll notice that the size of our program is mostly unchanged from before.
Run your program again. You should see the same results in your browser as before, but you'll notice that the information flowing through the Wave server is significantly less than before:
In this tutorial, we learned how to send periodic updates to the Wave server and observe changes in realtime.
In the next tutorial, we'll put these principles to real-world use, popping up charts for a song instead of chart topping pop songs.