Before we can begin writing code, we have to start the project, iteration zero . We start by creating a new ASP.NET MVC 4 project, as shown in the following screenshot. In this example, I am using Visual Studio 2012 Express for Web, though of course the full version of Visual Studio 2012 will work as well.

Once you have chosen the MVC 4 project, you are presented with a dialog of several different kinds of project templates. As we want our web application to be accessible from a mobile phone, we choose one of the new project templates included in Visual Studio 2012, Mobile Application. This template comes preloaded with a number of helpful JavaScript libraries listed as follows:

We will not be using all of these libraries, and of course you could use different JavaScript libraries if you so choose. But these provide a convenient starting point. You should take some time to get familiar with the files created by the project template.

The first thing you should look at is the main HomeController class, as this is (by default) the entry point of your application. There is some placeholder text included by default; you can easily change this to suit the application you are building. For our purposes we just change some of the text to act as simple information, and a call to action for the user to sign up.

Modify the Views/Home/Index.cshtml file as follows:

<h2>@ViewBag.Message</h2>
<p>
    Find like-minded individuals with JoinUp
</p>

Note the @ViewBag.Message header, you can change this particular value in the Index action method of the HomeController class as follows:

public ActionResult Index()
{
    ViewBag.Message = "MeetUp. TalkUp. JoinUp";

    return View();
}

There are other views which you can change to add your own information, such as the about and contact pages, but they are not critical for the purposes of this particular demonstration.

One of the most powerful additions to this latest version of ASP.NET MVC is the ability to use new async and await keywords in C# 5 to write asynchronous action methods. To be clear, you have had the ability to create asynchronous action methods since ASP.NET MVC 2, but they were rather ungainly and difficult to use.

You had to manually keep track of the number of asynchronous operations that were going on, and then let the asynchronous controller know when they were complete so that it could finalize the response. In ASP.NET MVC 4 this is no longer necessary.

As an example, we can rewrite the Index method that we went over in the previous section, to be asynchronous. Let's say that we wanted the message that we print in the title of the landing page to come from a database. Because that would likely be communicating with a database server on another machine, it is a perfect candidate for an asynchronous method.

First, create an awaitable method that will serve as a placeholder for retrieving the message from the database as follows:

private async Task<string> GetSiteMessage()
{
    await Task.Delay(1);
    return "MeetUp. TalkUp. JoinUp";
}

Of course in your actual code, this would connect to a database, as an example, it simply introduces a very small delay before returning the string. Now you can rewrite the Index method as follows:

public async Task<ActionResult> Index()
{
    ViewBag.Message = await GetSiteMessage();

    return View();
}

You can see the changes to the method highlighted in the previous code, all you have to do is add the async keyword to the method, make the return value a Task<ActionResult> class, and then use await in the method body somewhere. And that's it! Your method will now let the ASP.NET runtime optimize its resources as best as possible by processing other requests while it is waiting for your method to finish processing.

With the user's location established, the next part of the process will involve using SignalR to broadcast everybody's location to every other user that is connected.

The first thing we can do is add script references for SignalR by adding the following two lines to the script references in Views/Map/Index.cshtml:

<ul id="messages"></ul>

@section scripts {
    @Scripts.Render("~/Scripts/jquery.signalR-0.5.3.min.js")
    @Scripts.Render("~/signalr/hubs")
    @Scripts.Render("~/Scripts/map.js")
}

This initializes the SignalR infrastructure and allows us to build out the client side of the application before we implement the server.

Next, erase all of the previous contents of the map.js class. To keep things organized, we begin by declaring a JavaScript class with a few methods, as follows:

var app = {
    geoAccepted: function(pos) {
        var coord = JSON.stringify(pos.coords);
        app.server.notifyNewPosition(coord);
    },

    initializeLocation: function() {
        var geo = navigator.geolocation;

        if (geo) {
            geo.getCurrentPosition(this.geoAccepted);
        } else {
            error('not supported'),
        }
    },

    onNewPosition: function(name, coord) {
        var pos = JSON.parse(coord);
        $('#messages').append('<li>' + name + ', at '+ pos.latitude +', '+ pos.longitude +'</li>'),
    }
};

You will recognize the initializeLocation method as the same code we had in there previously to initialize the geolocation API. In this version, the initialization function passes another function, geoAccepted, as the callback that executes when the user accepts the location prompt. The final function, onNewPosition, is meant to execute when somebody notifies the server of a new position. SignalR will broadcast the location and execute this function to let this script know the name of the user, and their new coordinate.

When the page loads, we want to initialize the connection to SignalR, and in the process use the object that we just created in the variable named app, and this can be done as follows:

$(function () {
    var server = $.connection.serverHub;

    server.onNewPosition = app.onNewPosition;

    app.server = server;

    $.connection.hub.start()
        .done(function () {
            app.initializeLocation();
        });
});

Hubs , in SignalR, is a very simple way of exposing methods that can be invoked easily by JavaScript code on the client. Add a new class to your Models folder called ServerHub as follows:

public class ServerHub : Hub
{
    public void notifyNewPosition(string coord)
    {
        string name = HttpContext.Current.User.Identity.Name;

        Clients.onNewPosition(name, coord);
    }
}

We are defining a single method in this hub, notifyNewPosition , which accepts a string. When we get the coordinates from a user, this method will broadcast it to all other connected users. To do so, the code first gets the user's name and then calls the .onNewPosition method to broadcast the name and coordinate with all connected users.

It is interesting to note that the Clients property is a dynamic type, so onNewPosition doesn't actually exist as a method on that property. The name of that method is used to automatically generate the client-side method that is called from the JavaScript code.

In order to ensure that the user is logged in when they visit the page, all we have to do is add the [Authorize] attribute to the top of the MapController class as follows:

[Authorize]
public class MapController : Controller

Press F5 to run your application and see how we are doing. If everything is in working order, you will see a screen like the one shown in the following screenshot:

As people join the site, their location is acquired and pushed to everyone else. Meanwhile, on the client side, when a new location is received, we append a new list item element detailing the name and coordinate that was just received.

We are slowly building up our features one by one, once we have verified that this works, we can start fleshing out the next piece.

With location information being pushed to everyone, we can start displaying their location on a map. For this sample, we are going to use Google Maps, but you could easily use Bing, Nokia, or OpenStreet maps. But the idea is to give you a spatial reference to see who else is viewing the same web page and where they are relative to you in the world.

Start by adding an HTML element to hold the map to Views/Map/Index.cshtml, as follows:

<div 
    id="map"
    style="width:100%; height: 200px;">
</div>

This <div> will serve as a container for the actual map, and will be managed by the Google Maps API. Next add the JavaScript to the scripts section above the map.js reference as follows:

@section scripts {
    @Scripts.Render("~/Scripts/jquery.signalR-0.5.3.min.js")
    @Scripts.Render("~/signalr/hubs")
    @Scripts.Render("http://maps.google.com/maps/api/js?sensor=false");
    @Scripts.Render("~/Scripts/map.js")
}

As with the SignalR scripts, we just need to ensure that it is referenced before our own script (map.js) so that it is available in our source. Next we add code to initialize the map as follows:

function initMap(coord) {
    var googleCoord = new google.maps.LatLng(coord.latitude, coord.longitude);
    
    if (!app.map) {
        var mapElement = document.getElementById("map");
        var map = new google.maps.Map(mapElement, {
            zoom: 15,
            center: googleCoord,
            mapTypeControl: false,
            navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        app.map = map;
    }
    else {
        app.map.setCenter(googleCoord);
    }
}

This function will be invoked when the location is obtained. It works by taking the user's initially reported location, and passing a reference to the <div> HTML element we created earlier with the map ID to a new instance of google.maps.Map object, setting the center of the map to the user's reported location. If the function is called again, it will simply set the center of the map to the user's coordinates.

To show all the locations, we will use a feature of Google Maps to be able to drop a marker onto the map. Add the following function to map.js:

function addMarker(name, coord) {
    var googleCoord = new google.maps.LatLng(coord.latitude, coord.longitude);

    if (!app.markers) app.markers = {};

    if (!app.markers[name]) {
        var marker = new google.maps.Marker({
            position: googleCoord,
            map: app.map,
            title: name
        });
        app.markers[name] = marker;
    }
    else {
        app.markers[name].setPosition(googleCoord);
    }
}

This method keeps track of the markers that have been added by using an associative JavaScript array, which is similar to a Dictionary<string, object> collection in C#. When a user reports a new position, it will take the existing marker and move it to the new position. So this means that, for every unique user that signs in, the map will display a marker and then move it every time a new location is reported.

Finally, we make three small changes to the existing functions in the app object to interact with the map. First in initializeLocation, we change from getCurrentPosition to use the watchPosition method as follows:

initializeLocation: function() {
    var geo = navigator.geolocation;

    if (geo) {
        geo.watchPosition(this.geoAccepted);
    } else {
        error('not supported'),
    }
},

The watchPosition method will update the user's location every time it changes, which should result in a real-time view of all the locations as they report it to the server.

Next, we update the geoAccepted method, which is run every time the user gets a new coordinate. We can take advantage of this event to initialize the map before we notify the server of the new position as follows:

geoAccepted: function (pos) {
    var coord = JSON.stringify(pos.coords);

    initMap(pos.coords);

    app.server.notifyNewPosition(coord);
},

Lastly, in the method that notifies our page whenever a new position is reported by a user, we add a call to the addMarker function as follows:

onNewPosition: function(name, coord) {
    var pos = JSON.parse(coord);

    addMarker(name, pos);

    $('#messages').append('<li>' + name + ', at '+ pos.latitude +', '+ pos.longitude +'</li>'),
}