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.
