(Originally posted July 21, 2013)
Last time we added a database you the app for persistance, and we added very primitive url testing.
Now we want to go ahead and allow for automatic updating of the list of the queue of youtube links. One way to implement this is by using something called web sockets. Looking around, we can see that there are a few python libraries where we might be able to perform this task. That being said, it would be way more complicated than the method we’ll be using and when starting out, there’s no reason to go overly complicated.
The method that we want to use is called long polling. Basically, we use a client side ajax call to get the updated list. This function will then be called at set intervals so that everyone on the page has the same results.
The first thing we’re going to do is write the route that returns a json list of the queue. At the top of the views.py file, we need to add an import to the flask line — jsonify. It should now look like
|
1
|
from flask import Flask, render_template, url_for, request, redirect, jsonify |
Jsonify is a function from flask that does the heavy lifting and makes it easier to return json with the correct headers so we don’t have to deal with that. Then we want to add the route to the bottom of the file.
|
1
2
3
4
5
|
@app.route('/update')def update():queue = db.session.query(YTUrl) queue_list = [str(q) for q in queue.all()]return jsonify(queue=queue_list) |
When we loop over the list from the database, we need to cast the results to string since they are of a type defined by sqlalchemy. If we don’t, jsonify will raise a type error since it doesn’t know how to serialize the link. After this, we can go to /update and hopefully see the json returned for all the links that had been uploaded.
With that complete, we now want to go and add the javascript to the client. Before we write the code, we need to add a few links to javascript files in the templates. These links should go at the end of the body tag in layout.html.
|
1
2
|
<script src="static/js/ytp.js"></script> |
The first is a link to jquery file, the javascript library we’re going to use for the ajax call. It’s extremely prevalent and widely used. The second is for the js file that we’re about to write. Open up a file called ytp.js in static/js directory and put the following code inside.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(document).ready(function() {(function update() { setInterval(function(){ $.ajax({ url:'/update', type:"get", dataType: "json", success: function(response) { $('.queue-list').children().remove(); for (q in response['queue']) { var item = '<div class="row">' + response['queue'][q] + '</div>'; $('.queue-list').append(item); } }, }); }, 8000);})();}); |
This code waits for the document to load completely, and then, at the interval set by the number (in milliseconds) at the bottom of function, performs the function. The function itself is an ajax call to /update. When the data returns, it clears the queue list, which is now wrapped in a div with class “queue-list”, and for each of the returned links, appends it.
If you fire up the server now, and you should see that nothing changed, but if you keep an eye on the terminal which logs the requests, we can see that every 8 seconds, there is a get request for the updated list. To test it out, you can open another tab at localhost:5000 and input a url in that tab, then quickly switch to the original one and watch as the list is now updated with the new link!
Next time we’re going to start working on using the youtube api to get titles and other info about the links since we want to see information about what is coming next, not just a link.
Jack Schultz 