Calling Twitter with JSONP

Calling Twitter with JSONP Twitter provides a JSON API to search for recent tweets based on keywords. When you request a specific URL with a keyword Twitter will return the list of tweets as a JSON file. JSON, or JavaScript Object Notation, is a way of encoding data as light weight JavaScript arrays and hashtables. For example, a list of first and last names might look like this: [ { "first":"Jon", "last":"Stewart" }, { "first":"Jason", "last":"Jones" }, { "first":"Samantha", "last":"Bee" }, ] If you call the URL http://search.twitter.com/search.json?q=puppy you will get back a very long list that looks like this: {"completed_in":0.166,"max_id":141224447708364801, ... "results":[ {"created_at":"Mon, 28 Nov 2011 18:38:26 +0000", "from_user":"foobar","from_user_id":098709874523, "text":"I love my puppy"}, {"created_at":"Mon, 28 Nov 2011 18:38:24 +0000", "from_user":"misterman","from_user_id":445388888, "text":"My puppy rolled around on the floor. }, ... In short, you get a giant blob of structured data. I’ve trimmed it down a bit to make it easier to understand. From this blob we can easily pull out the parts we want. There’s a problem, though; we can’t actually request this API from a web page. For security reasons a web page can only make a network request to the server that the web page came from. Since our app will not live on any server, but rather on the end user’s device, we can’t make a request to anywhere! To get around this limitation enterprising developers invented something called JSONP. JSONP is the same as JSON except the server wraps the result in a call to a method that is defined in the page. This is called a callback method. Instead of loading the request directly using something like XmlHttpRequest, it will use the URL as JavaScript source code to be added to the top of the page like this: <script src="http://search.twitter.com/search.json?q=puppy&callback=mycallback"></script> This essentially tricks the browser into making the API call in the guise of loading source, which is allowed by the security model, then invoking your callback method with the resulting data. It sounds a bit tricky, and it is actually, but we don’t have to worry about it. GWT handles all of the details for us using a nice class called the JsonpRequestBuilder. You just give it a URL and a callback, GWT does the rest. Here’s what the code looks like. class TwitterHandler implements ClickHandler { public void onClick(ClickEvent event) { String url = "http://search.twitter.com/search.json?q="+queryField.getText(); JsonpRequestBuilder jsonp = new JsonpRequestBuilder(); jsonp.requestObject(url, new AsyncCallback<JavaScriptObject>() { public void onFailure(Throwable throwable) { System.out.println("Error: " + throwable); } public void onSuccess(JavaScriptObject o) { ... } }); } }; I know it looks a bit hairy but it is actually pretty straight forward. The URL is defined in url then it creates a new JsonpRequestBuilder. It calls requestObject using the URL and an anonymous AsyncCallback object. When the callback succeeds it will call onSuccess with a JavaScriptObject. With this object in hand we can start pulling out the parts we want. If you look at the raw output of the Twitter API call in your browser you can paw through it to find what you want. The raw output can be difficult to read so you might want to use a JSON formatter like: http://jsonformatter.curiousconcept.com/. The list of tweets is an array stored with the results key. Within each tweet we want the text property, which contains the actual text of the tweet. The code to process the list looks like this: JSONObject js = new JSONObject(o); JSONArray results = js.get("results").isArray(); resultsPanel.clear(); for(int i=0; i<results.size(); i++) { String text = (results.get(i).isObject()).get("text").toString(); Label label = new Label(text); resultsPanel.add(label); } For each item in the results it adds a new Label with the text to the resultsPanel. Notice the call to resultsPanel.clear() before the loop. This removes the old labels before adding new ones. This is what the final app looks like in the web browser (Figure 2-4). You can get the full source from the book’s web page. Figure 2-4. PerchSearch searching for the keyword “puppy” Not the prettiest app in the world, but it works quite well, and with very little code. Go ahead and try it. Type in puppy to see what cute things people are saying about puppies. Now type in lolcat to have more fun. Yeah, that’s better.