Extending NerdDinner: Adding Geolocated Flair
NerdDinner is a website with the audacious goal of “Organizing the world’s nerds and helping them eat in packs.” Because nerds aren’t likely to socialize with others unless a website tells them to do it.
Scott Hanselman showed off a lot of the cool features we’ve added to NerdDinner lately during his popular talk at MIX10, Beyond File | New Company: From Cheesy Sample to Social Platform. Did you miss it? Go ahead and watch it, I’ll wait.
One of the features we wanted to add was flair. You know about flair, right? It’s a way to let folks who like your site show it off in their own site. For example, here’s my StackOverflow flair:
Great! So how could we add some of this flair stuff to NerdDinner?
What do we want to show?
If we’re going to encourage our users to give up a bit of their beautiful website to show off a bit of ours, we need to think about what they’ll want to show. For instance, my StackOverflow flair is all about me, not StackOverflow.
So how will this apply to NerdDinner?
Since NerdDinner is all about organizing local dinners, in order for the flair to be useful it needs to make sense for the person viewing the web page. If someone visits from Egypt visits my blog, they should see information about NerdDinners in Egypt. That’s geolocation – localizing site content based on where the browser’s sitting, and it makes sense for flair as well as entire websites.
So we’ll set up a simple little callout that prompts them to host a dinner in their area:
Hopefully our flair works and there is a dinner near your viewers, so they’ll see another view which lists upcoming dinners near them:
The Geolocation Part
Generally website geolocation is done by mapping the requestor’s IP address to a geographic area. It’s not an exact science, but I’ve always found it to be pretty accurate. There are (at least) three ways to handle it:
- You pay somebody like MaxMind for a database (with regular updates) that sits on your server, and you use their API to do lookups. I used this on a pretty big project a few years ago and it worked well.
- You use HTML 5 Geolocation API or Google Gears or some other browser based solution. I think those are cool (I use Google Gears a lot), but they’re both in flux right now and I don’t think either has a wide enough of an install base yet to rely on them. You might want to, but I’ve heard you do all kinds of crazy stuff, and sometimes it gets you in trouble. I don’t mean talk out of line, but we all laugh behind your back a bit. But, hey, it’s up to you. It’s your flair or whatever.
- There are some free webservices out there that will take an IP address and give you location information. Easy, and works for everyone. That’s what we’re doing.
I looked at a few different services and settled on IPInfoDB. It’s free, has a great API, and even returns JSON, which is handy for Javascript use.
The IP query is pretty simple. We hit a URL like this: http://ipinfodb.com/ip_query.php?ip=74.125.45.100&timezone=false
… and we get an XML response back like this…
<?xml version="1.0" encoding="UTF-8"?> <Response> <Ip>74.125.45.100</Ip> <Status>OK</Status> <CountryCode>US</CountryCode> <CountryName>United States</CountryName> <RegionCode>06</RegionCode> <RegionName>California</RegionName> <City>Mountain View</City> <ZipPostalCode>94043</ZipPostalCode> <Latitude>37.4192</Latitude> <Longitude>-122.057</Longitude> </Response>
So we’ll build some data transfer classes to hold the location information, like this:
public class LocationInfo
{
public string Country { get; set; }
public string RegionName { get; set; }
public string City { get; set; }
public string ZipPostalCode { get; set; }
public LatLong Position { get; set; }
}
public class LatLong
{
public float Lat { get; set; }
public float Long { get; set; }
}
And now hitting the service is pretty simple:
public static LocationInfo HostIpToPlaceName(string ip)
{
string url = "http://ipinfodb.com/ip_query.php?ip={0}&timezone=false";
url = String.Format(url, ip);
var result = XDocument.Load(url);
var location = (from x in result.Descendants("Response")
select new LocationInfo
{
City = (string)x.Element("City"),
RegionName = (string)x.Element("RegionName"),
Country = (string)x.Element("CountryName"),
ZipPostalCode = (string)x.Element("CountryName"),
Position = new LatLong
{
Lat = (float)x.Element("Latitude"),
Long = (float)x.Element("Longitude")
}
}).First();
return location;
}
Getting The User’s IP
Okay, but first we need the end user’s IP, and you’d think it would be as simple as reading the value from HttpContext:
HttpContext.Current.Request.UserHostAddress
But you’d be wrong. Sorry. UserHostAddress just wraps HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"], but that doesn’t get you the IP for users behind a proxy. That’s in another header, “HTTP_X_FORWARDED_FOR". So you can either hit a wrapper and then check a header, or just check two headers. I went for uniformity:
string SourceIP = string.IsNullOrEmpty(Request.ServerVariables["HTTP_X_FORWARDED_FOR"]) ?
Request.ServerVariables["REMOTE_ADDR"] :
Request.ServerVariables["HTTP_X_FORWARDED_FOR"];
We’re almost set to wrap this up, but first let’s talk about our views. Yes, views, because we’ll have two.
Selecting the View
We wanted to make it easy for people to include the flair in their sites, so we looked around at how other people were doing this. The StackOverflow folks have a pretty good flair system, which allows you to include the flair in your site as either an IFRAME reference or a Javascript include. We’ll do both.
We have a ServicesController to handle use of the site information outside of NerdDinner.com, so this fits in pretty well there. We’ll be displaying the same information for both HTML and Javascript flair, so we can use one Flair controller action which will return a different view depending on the requested format.
Here’s our general flow for our controller action:
- Get the user’s IP
- Translate it to a location
- Grab the top three upcoming dinners that are near that location
- Select the view based on the format (defaulted to “html”)
- Return a FlairViewModel which contains the list of dinners and the location information
public ActionResult Flair(string format = "html")
{
string SourceIP = string.IsNullOrEmpty(
Request.ServerVariables["HTTP_X_FORWARDED_FOR"]) ?
Request.ServerVariables["REMOTE_ADDR"] :
Request.ServerVariables["HTTP_X_FORWARDED_FOR"];
var location = GeolocationService.HostIpToPlaceName(SourceIP);
var dinners = dinnerRepository.
FindByLocation(location.Position.Lat, location.Position.Long).
OrderByDescending(p => p.EventDate).Take(3);
// Select the view we'll return.
// Using a switch because we'll add in JSON and other formats later.
string view;
switch (format.ToLower())
{
case "javascript":
view = "JavascriptFlair";
break;
default:
view = "Flair";
break;
}
return View(
view,
new FlairViewModel
{
Dinners = dinners.ToList(),
LocationName = string.IsNullOrEmpty(location.City) ? "you" :
String.Format("{0}, {1}", location.City, location.RegionName)
}
);
}
Note: I’m not in love with the logic here, but it seems like overkill to extract the switch statement away when we’ll probably just have two or three views. What do you think?
The HTML View
The HTML version of the view is pretty simple – the only thing of any real interest here is the use of an extension method to truncate strings that are would cause the titles to wrap.
public static string Truncate(this string s, int maxLength)
{
if (string.IsNullOrEmpty(s) || maxLength <= 0)
return string.Empty;
else if (s.Length > maxLength)
return s.Substring(0, maxLength) + "...";
else
return s;
}
So here’s how the HTML view ends up looking:
<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<FlairViewModel>" %>
<%@ Import Namespace="NerdDinner.Helpers" %>
<%@ Import Namespace="NerdDinner.Models" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nerd Dinner</title>
<link href="/Content/Flair.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nd-wrapper">
<h2 id="nd-header">NerdDinner.com</h2>
<div id="nd-outer">
<% if (Model.Dinners.Count == 0) { %>
<div id="nd-bummer">
Looks like there's no Nerd Dinners near
<%:Model.LocationName %>
in the near future. Why not <a target="_blank" href="http://www.nerddinner.com/Dinners/Create">host one</a>?</div>
<% } else { %>
<h3>
Dinners Near You</h3>
<ul>
<% foreach (var item in Model.Dinners) { %>
<li>
<%: Html.ActionLink(String.Format("{0} with {1} on {2}", item.Title.Truncate(20), item.HostedBy, item.EventDate.ToShortDateString()), "Details", "Dinners", new { id = item.DinnerID }, new { target = "_blank" })%></li>
<% } %>
</ul>
<% } %>
<div id="nd-footer">
More dinners and fun at <a target="_blank" href="http://nrddnr.com">http://nrddnr.com</a></div>
</div>
</div>
</body>
</html>
You’d include this in a page using an IFRAME, like this:
<IFRAME height=230 marginHeight=0 src="http://nerddinner.com/services/flair" frameBorder=0 width=160 marginWidth=0 scrolling=no></IFRAME>
The Javascript view
The Javascript flair is written so you can include it in a webpage with a simple script include, like this:
<script type="text/javascript" src="http://nerddinner.com/services/flair?format=javascript"></script>
The goal of this view is very similar to the HTML embed view, with a few exceptions:
- We’re creating a script element and adding it to the head of the document, which will then document.write out the content. Note that you have to consider if your users will actually have a <head> element in their documents, but for website flair use cases I think that’s a safe bet.
- Since the content is being added to the existing page rather than shown in an IFRAME, all links need to be absolute. That means we can’t use Html.ActionLink, since it generates relative routes.
- We need to escape everything since it’s being written out as strings.
- We need to set the content type to application/x-javascript. The easiest way to do that is to use the <%@ Page ContentType%> directive.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<NerdDinner.Models.FlairViewModel>" ContentType="application/x-javascript" %>
<%@ Import Namespace="NerdDinner.Helpers" %>
<%@ Import Namespace="NerdDinner.Models" %>
document.write('<script>var link = document.createElement(\"link\");link.href = \"http://nerddinner.com/content/Flair.css\";link.rel = \"stylesheet\";link.type = \"text/css\";var head = document.getElementsByTagName(\"head\")[0];head.appendChild(link);</script>');
document.write('<div id=\"nd-wrapper\"><h2 id=\"nd-header\">NerdDinner.com</h2><div id=\"nd-outer\">');
<% if (Model.Dinners.Count == 0) { %>
document.write('<div id=\"nd-bummer\">Looks like there\'s no Nerd Dinners near <%:Model.LocationName %> in the near future. Why not <a target=\"_blank\" href=\"http://www.nerddinner.com/Dinners/Create\">host one</a>?</div>');
<% } else { %>
document.write('<h3> Dinners Near You</h3><ul>');
<% foreach (var item in Model.Dinners) { %>
document.write('<li><a target=\"_blank\" href=\"http://nrddnr.com/<%: item.DinnerID %>\"><%: item.Title.Truncate(20) %> with <%: item.HostedBy %> on <%: item.EventDate.ToShortDateString() %></a></li>');
<% } %>
document.write('</ul>');
<% } %>
document.write('<div id=\"nd-footer\"> More dinners and fun at <a target=\"_blank\" href=\"http://nrddnr.com\">http://nrddnr.com</a></div></div></div>');
Getting IP’s for Testing
There are a variety of online services that will translate a location to an IP, which were handy for testing these out. I found http://www.itouchmap.com/latlong.html to be most useful, but I’m open to suggestions if you know of something better.
Next steps
I think the next step here is to minimize load – you know, in case people start actually using this flair. There are two places to think about – the NerdDinner.com servers, and the services we’re using for Geolocation.
I usually think about caching as a first attack on server load, but that’s less helpful here since every user will have a different IP. Instead, I’d look at taking advantage of Asynchronous Controller Actions, a cool new feature in ASP.NET MVC 2. Async Actions let you call a potentially long-running webservice without tying up a thread on the server while waiting for the response. There’s some good info on that in the MSDN documentation, and Dino Esposito wrote a great article on Asynchronous ASP.NET Pages in the April 2010 issue of MSDN Magazine.
But let’s think of the children, shall we? What about ipinfodb.com? Well, they don’t have specific daily limits, but they do throttle you if you put a lot of traffic on them. From their FAQ:
We do not have a specific daily limit but queries that are at a rate faster than 2 per second will be put in "queue". If you stay below 2 queries/second everything will be normal. If you go over the limit, you will still get an answer for all queries but they will be slowed down to about 1 per second. This should not affect most users but for high volume websites, you can either use our IP database on your server or we can whitelist your IP for 5$/month (simply use the donate form and leave a comment with your server IP). Good programming practices such as not querying our API for all page views (you can store the data in a cookie or a database) will also help not reaching the limit.
So the first step there is to save the geolocalization information in a time-limited cookie, which will allow us to look up the local dinners immediately without having to hit the geolocation service.