Phil Leggetter - Real-Time Web Software and Technology Evangelist » C#

Adding a real-time "Who’s shopping?" widget to an ASP.NET Web App

Phil Leggetter — Thu, 04 Aug 2011 00:00:00 +0000

In our last ASP.NET post, The easiest way to add real-time functionality to an ASP.NET e-commerce application, I demonstrated how to add realtime stock level updates and notifications to an ASP.NET e-commerce application. In this post I’m going to show how to add a “Who’s shopping?” widget to the same application. The purpose of this widget is to show other users that interest in the product they are viewing is high and that, in combination with the realtime stock levels, will encourage them to make a purchase before the product sells out.

In this tutorial I’ll show how to:

subscribe to a presence channel
authenticate a subscription to a channel
provide Pusher with additional information about a user
display presence information on a product page for the “Who’s shopping?” widget

If you are desperate to see the demo in action you can see the Real-Time Web Store demo here.

Pusher Presence

To achieve the “Who’s shopping?” functionality I’m going to be using a feature in Pusher called presence. Presence provides you with additional information about a channel you are subscribed to so that you know:

who is subscribed to that channel
when new users subscribe
when existing users unsubscribe (by either actually unsubscribing or navigating away from the page).

We are going to have a presence channel per product so that we know who is viewing each product.

User Info & Authentication

Subscribing to a presence channel

You subscribe to a presence channel in the same way that you do to any other channel but the name of the channel must have a presence- prefix. Presence channels are normal channels with two additions; authentication and presence information. With this in mind we are just going to update our application to use a presence channel.

The JavaScript that makes the subscription in our Razor view looks like this:

var productId = "@Model.ProductId";
var pusher = new Pusher("APP_KEY");
var channel = pusher.subscribe("presence-" + productId);

We also need to update the code in our StoreController to publish our stock events on the new presence channel:

var stockEvent = new StockUpdatedEvent(model, socketId);
ObjectPusherRequest request = new ObjectPusherRequest("presence-" + stockEvent.ProductId, "stockUpdated", stockEvent);
_provider.Trigger(request);

Note: If you are continuing where we left off in our last blog post there are a final couple of updates that are required to change the app to use the latest version of the Pusher JavaScript API. We recently released version 1.9 which introduced new connection state functionality and also a new connection object. So, update your Pusher script tag as follows:

And you’ll also need to update any pieces of code that access the socket_id via the Pusher instance. It should now be accessed via the new connection object as follows:

var socketId = pusher.connection.socket_id;

Getting User information

If Pusher is to send events about users subscribing to and unsubscribing from presence channels it needs information about the users. It gets this information from your application when the subscription request to the channel is made (pusher.subscribe('presence-channel')). Since we can’t really trust the web browser/client (it’s so easy to hack JavaScript running in a web browser) the Pusher library requests this information from your web server by making an AJAX call. By default this call goes to /pusher/auth and passes two parameters; channel_name, which is the name of the channel being subscribed to, and socket_id, which is a unique identifier for the current user’s connection to Pusher.

/pusher/auth/?channel_name=presence-pusher-tshirt&socket_id=

When our application responds to this request we must provide an authentication signature to confirm that the user can subscribe to the channel and, importantly for our “Who’s shopping?” widget, information about the current user. The way we’ll handle this within our ASP.NET MVC application is by creating a PusherController with an Auth(string socket_id, string channel_name) action, and by using the authentication functionality within the PusherRESTDotNet library. This library is also available as a NuGet package.

Note: If you got the NuGet package as part of the last tutorial you’ll need to update it since the authentication functionality has just been added. You should also check that the .NET 3.5 runtime version of Newtonsoft.Json is added.

Handling the authentication request

As mentioned above, the Pusher JavaScript library will make a request to /pusher/auth when making the authentication request. Our new PusherController with Auth action does the following:

Fetches our Pusher credentials from the Web.config file.
Creates a new PusherProvider using the Pusher credentials
Creates a unique user_id for the presence channel
Creates an authentication string and returns that string as the Content of a ContentResult' with theContentTypeset toapplication/json` in response to the AJAX request.

For the moment this code doesn’t do any user authentication or provide any additional information about the current user.

using System;
using System.Configuration;
using System.Web.Mvc;
using PusherRESTDotNet;
using PusherRESTDotNet.Authentication;

namespace RealTimeWebStore.Controllers
{
    public class PusherController : Controller
    {
        public ActionResult Auth(string channel_name, string socket_id)
        {
            var applicationId = ConfigurationManager.AppSettings["application_id"];
            var applicationKey = ConfigurationManager.AppSettings["application_key"];
            var applicationSecret = ConfigurationManager.AppSettings["application_secret"];

            var channelData = new PresenceChannelData()
            {
                user_id = Guid.NewGuid().ToString()
            };

            var provider = new PusherProvider(applicationId, applicationKey, applicationSecret);
            string authJson = provider.Authenticate(channel_name, socket_id, channelData);

            return new ContentResult { Content = authJson, ContentType = "application/json" };
        }
    }
}

If we use one of the many web browser development tools available to us to inspect the authentication call within the browser we’ll see the JSON response coming back.

You’ll see the response contains a channel_data property which itself has a user_id with a unique Guid value and a user_info property with a null value. Pusher uses this user_id value to uniquely identify the user subscription to the presence channel. So it’s very important to make sure that each user has a unique ID.

Adding authentication

We’ve mentioned authentication a few times but as yet we haven’t authenticated the user. If the user has already logged (our app doesn’t have this functionality, but most do) in we can use the existing User.Identity or else we can just assign a guest identity to the user. Once we have a unique ID for the user we’ll also add some additional user_info to the channelData. The value of user_info can be anything you like from a simple string to a complex object. This gives you the ability to push as much additional information through Pusher and to the web page as you like. In our case we’ll just send through a timestamp which identifies how long the user has been on the site.

public ActionResult Auth(string channel_name, string socket_id)
{
    var channelData = new PresenceChannelData();
    if (User.Identity.IsAuthenticated)
    {
        channelData.user_id = User.Identity.Name;
    }
    else
    {
        channelData.user_id = GetUniqueUserId();
    }
    channelData.user_info = GetUserInfo();

    var provider = new PusherProvider(applicationId, applicationKey, applicationSecret);
    string authJson = provider.Authenticate(channel_name, socket_id, channelData);

    return new ContentResult { Content = authJson, ContentType = "application/json" };
}

Note: In our case we don’t really need to authorise a user but in other situations where the user needs to be logged in we can return a 401 HttpStatusCodeResult.

Who’s Shopping?

Now that we’ve got a PusherController that gives Pusher information about the user, we can start showing information about the user on the product page. You can get information about the users subscribed to presence channels by binding to the pusher:subscription_succeeded event on the presence channel object. The callback method for this event receives a members parameter which contains all the information about users subscribed to the channel.

First we’ll create some HTML within our web page where we are going to show “Who’s shopping?”. Then we’ll add the users to the HTML when pusher notifies us of them.

HTML


    Who's shopping?

JavaScript

var pusher = new Pusher("006c79b1fe1700c6c10d");
var channel = pusher.subscribe("presence-" + productId);
channel.bind("pusher:subscription_succeeded", function(members) {

    members.each(function(member) {
        addMember(member);
    });

});

function addMember(member) {
    var enteredSite = new Date(member.info.timestamp);
    var now = new Date();
    var timeOnSite = (now - enteredSite);
    var li = $("" +
                    member.id + " here for " +
                    toReadableTime(timeOnSite) +
               "");
    $(".whos-shopping ul").append(li);
};

Note: The members object comes with a handy each method to make iterating the members collection really easy.

Of course new users can navigate to the page and existing users can leave it so the Pusher JavaScript library also exposes pusher:member_added and pusher:member_removed events on the presence channel object. When these events fire we should add or remove the user as required.

channel.bind("pusher:member_added", function(member) {
    addMember(member);
});
channel.bind("pusher:member_removed", function(member) {
    removeMember(member);
});

function addMember(member) {
    /* as before */
};

function removeMember(member) {
    $(".whos-shopping ul li[data-user-id='" + member.id + "']").remove();
};

With this in place we now have a fully functioning “Who’s shopping?” widget that shows the current user who else is viewing the same product as they are.

As mentioned in the opening paragraph, the theory here is that if shoppers can see that others users are viewing the same product it might give them that little push they need to take the plunge and make that purchase “while stocks last”.

There are a few refinements and enhancements that could be made to this widget such as filtering out the current user from the “Who’s shopping?” list or possibly showing them which one they are. You could also use the notification system from last time to notify the shopper when another shopper joins or leaves the product page. And, of course, you could add some user chat functionality to get the users discussing the product and really engaging. You could also have a staff member user who could answer any questions that the shoppers may have.

Just as last time all the code from this post is available in the real-time web store github repo. You can also see the Real-Time Web Store application up and running on AppHarbor. I’ve tried to link to relevant parts of the Pusher documentation throughout the post but if there anything that isn’t clear, if there’s anything that I’ve not provided enough detail on and it all just seems too ‘magical’, then please leave a comment or send an email to me (phil@pusher.com).

Here are some links to the key things covered in this post:

Addendum: What about WebForms?

The post above shows how to user the Pusher REST .NET library within an ASP.NET MVC application but it can just as easily be used within an ASP.NET WebForms app. The way I achieved this was by adding a new Generic HTTP Handler to our web app which will handle the authentication AJAX call.

In the code below the ProcessRequest method does the following things:

Fetches our Pusher credentials from the Web.config file.
Gets the values of the channel_name and socket_id parameters from the context.Request
Creates a new PusherProvider using the Pusher credentials
Creates a unique user_id for the presence channel
Creates an authentication string and returns that string as the response body of the AJAX request.

For the moment this code doesn’t do any user authentication or provide any additional information about the current user.

using System.Configuration;
using System.Web;
using PusherRESTDotNet;
using PusherRESTDotNet.Authentication;
using System;

namespace RealTimeWebStore
{
    public class AuthHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            var applicationId = ConfigurationManager.AppSettings["pusher-application-id"];
            var applicationKey = ConfigurationManager.AppSettings["pusher-application-key"];
            var applicationSecret = ConfigurationManager.AppSettings["pusher-application-secret"];

            var socketID = context.Request["socket_id"].ToString();
            var channelName = context.Request["channel_name"].ToString();
            var channelData = new PresenceChannelData()
            {
                user_id = Guid.NewGuid().ToString()
            };

            var provider = new PusherProvider(applicationId, applicationKey, applicationSecret);
            string authJson = provider.Authenticate(channelName, socketId,  channelData);

            context.Response.Write(authJson);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Finally we need to configure our handler in the application Web.config file. We want the ProcessRequest method of our handler to be invoked for any call to /pusher/auth. To do this we just add a handler to the httpHandlers element and specify our handler, RealTimeWebStore.AuthHandler as the handler:

Looking for a C# (ASP.NET MVC), jQuery & Real-Time Web Contractor

Phil Leggetter — Wed, 23 Mar 2011 09:45:04 +0000

I’m looking for a contractor for a provisional 3 month contract with the following skills, experience and interests:

Essential

C#
jQuery
TDD/BDD
ASP.NET MVC
ADO.NET Entity Framework or other ORM

Great to have

Passionate about the real-time web and real-time data (essential for the longer term)
Knowledge of building scalable systems on Amazon Infrastructure
Experience of integrating with 3rd party payment systems and building basic ecommerce functionality
Experience of building a SaaS or IaaS offering
Interest/experience in API and Web Service development
Advanced JavaScript
CSS
Excited about HTML5
Part of a tech community

Location

The role will be primarily home-based but at times we may need to meet around 2 to 3 times a week at a location that we agree on anywhere between or around Dundee and Edinburgh.

Moving forward I’m hopeful that this could develop into a fulltime role so it would be ideal if we could get somebody who was interested in this also.

If you are interested please get in touch with your availability and your rate.

Basic Authentication against the Superfeedr HTTP PubSubHubbub API using a .NET HttpWebRequest

Phil Leggetter — Sun, 04 Jul 2010 09:58:00 +0000

It would appear that setting the Credentials property of a HttpWebRequest still leads to authentication failure against the Superfeedr HTTP PubSubHubbub API. This might be because the way the HttpWebRequest works is that it first waits to be challenged for credentials via a 401 (not authorized) and then replies with the authentication (more info include PreAuthenticate here).

So, this doesn’t work:

string username = "username";
string password = "password";
HttpWebRequest request = (HttpWebRequest)WebRequest.Create("url-here");
request.Credentials = new NetworkCredential(username, password);

To work around this you need to force the authentication to be sent. I found the details of how to do this in a blog post by Ian Dykes here:

http://devproj20.blogspot.com/2008/02/assigning-basic-authorization-http.html

But for fullness here’s the code:

string username = "username";
string password = "password";
byte[] authBytes = Encoding.UTF8.GetBytes(username + ":" + password.ToCharArray());
request.Headers["Authorization"] = "Basic " + Convert.ToBase64String(authBytes);

Permalink

| Leave a comment »

How I approach problem solving in code?

Phil Leggetter — Fri, 23 Oct 2009 17:44:57 +0000

Recently I was posed the following question:

Write a piece of code that prints all odd integer numbers between 1 and 99

This really isn’t a difficult question but it still requires some thought. When I’m posed with any question I like to break things down into their constituent parts.

Here’s the process I went through:

Okay, so I’ll define two variables for a start and end value and there’s going to have to be a loop.

int startValue = 1;
int endValue = 99;
for(int i = startValue;
     i <= endValue;
     i++)
{
   // work out if "i" is an odd number
}

Now, for the odd number detection. And… after a few umms and errrs … I’m going to have to mod 2 (%2) the current value of i to work out if the value is odd. More … umms and errs. Okay, I’ve finally worked out that if something mod 2 is not equal to 0 it’s clearly an odd number. This took me longer than it should have but never mind. Once I’ve detected if i is an odd number I’ll then put the odd number into a list for use later.

int startValue = 1;
int endValue = 99;
IList oddValues = new List<int>();
for(int i = startValue;
     i <= endValue;
     i++)
{
   if(i%2 != 0)
   {
      oddValues.Add(i);
   }
}

Those of you that are good at these little puzzles, or just think this is way too easy, might already be screaming at me about one of the following:

Why are you using a IList, why don’t you just print the value?
Odd numbers are always 2 apart so why aren’t you just increment i by 2 using i+=2?

I admit it, I missed the second point and that is a bit silly of me. However, what I have starting doing is separating the concerns of the piece of code. The code does two things; it detects the odd number and it prints the odd numbers. Those are two very distinct things. So, my code now looks like this:

int startValue = 1;
int endValue = 99;
IList oddNumbers = new List<int>();
for(int i = startValue;
     i <= endValue;
     i++)
{
   if(i%2 != 0)
   {
      oddNumbers.Add(i);
   }
}

string oddNumbersList = string.Join(",", oddNumbers.ToArray());
Console.WriteLine(oddNumbersList );

I’m now going to refactor this further so I’ll put the two different pieces of functionality into different methods. I’ll rename the i, startValue and endValue variables to be something a bit more useful; say numberToCheck, startNumber and endNumber. I’ll also create another helper for the odd number checking named IsOddNumber:

IList GetOddNumbersBetween(int startNumber, int endNumber)
{
   IList oddValues = new List<int>();
   for(int numberToCheck = startNumber;
        numberToCheck <= endNumber;
        numberToCheck++)
   {
      if(IsOddNumber(numberToCheck) == true)
      {
         oddValues.Add(numberToChecki);
      }
   }
   return oddValues;
}

bool IsOddNumber(int number)
{
   return (number % 2 == 1);
}

void PrintOddNumbersBetween(int startNumber, int endNumber)
{
   IList oddNumbers = GetOddNumbersBetween(startNumber, endNumber);
   string oddNumbersList = string.Join(",", oddNumbers.ToArray());
   Console.WriteLine(oddNumbersList);
}

Let’s say I then notice the second point you’ve been screaming at me about (Odd numbers are always 2 apart so why aren’t you just increment i by 2 using i+=2) that I mentioned above? In practice I should notice this sort of thing either when I give the code a complete review, or one of my peers spots it. When I see this problem I decide to update the for loop, as noted, and I then see that I possibly don’t need the if(IsOddNumber(i) == true) statement. Although it would pain me to do this, since it’s a lovely little method, I would need to consider deleting it. But then it strikes me, I’m no longer just solving the “odd numbers between 1 and 99 problem” so I can’t just assume that the startNumber is going to be an odd number. I need to make sure that it’s an odd number so I’ll create another small utility method for that called EnsureOddNumber which will check if the value passed is an odd number, and if not return the next odd number (I’d like to rethink the name of this method).

IList GetOddNumbersBetween(int startNumber, int endNumber)
{
   startNumber = EnsureOddNumber(startNumber);

   IList oddValues = new List<int>();
   for(int numberToCheck = startNumber;
        numberToCheck <= endNumber;
        numberToCheck+=2)
   {
      oddValues.Add(numberToCheck);
   }
   return oddValues;
}

int EnsureOddNumber(int number)
{
   if( IsOddNumber(startNumber) == false )
   {
      startNumber++;
   }
   return startNumber;
}

bool IsOddNumber(int number)
{
   return (number % 2 == 1);
}

void PrintOddNumbersBetween(int startNumber, int endNumber)
{
   IList oddNumbers = GetOddNumbersBetween(startNumber, endNumber);
   string oddNumbersList = string.Join(",", oddNumbers.ToArray());
   Console.WriteLine(oddNumbersList);
}

Now, when I look at this code I get a warm feeling because I feel that it solves the problem, it’s well engineered, the concerns are separated and the code is completely self documenting.

There are a few comments that people may have here:

The question asked specifically to print odd values between 1 and 99 and you’ve done more than was required.

Although my answer does satisfy the original question have I over engineered things? The question does specifically ask us to print odd values between 1 and 99 so maybe I should have created a function that just satisfied that requirement.

void PrintOddNumbersBetween1And99()
{
   for(int i = 1;
        i <= 99;
        i+=2)
   {
      Console.WriteLine(i + " ");
   }
}

And I’d have to admit that this very short piece of code exactly answers the question. But I’d also argue that there is very little chance of this code being reused. Don’t get me wrong, you definitely shouldn’t over engineer things but there should be some scope for code reuse.

For such a simple problem you’ve over engineered this.

There’s a better solutions that that… it’s not efficient

Is creating four methods over engieering? Does my code require any comments to provide documentation? There may well be a more performant solution to this, but that’s not my point. My point is the way of approaching a question: the thought processes involved in understanding the problem and breaking it down to separate concerns, making it easy to read, reusable and self documenting. If the code that worked out the odd numbers is not efficient it could easily be changed in one place without impacting the interface, the other methods within the class, or the overall functionality.

Some people may jump to the simplest solution but I think the way i’ve described approaching and solving the problem demonstrates good practice. If I’m completely honest I would normally approach the development of something such as this by writing a test case first since I practice TDD but that can wait for another blog post.

How to make a cross domain web request with SilverLight 2

Phil Leggetter — Fri, 24 Oct 2008 12:16:18 +0000

To make a cross domain web request with SilverLight 2 really isn’t that tough. I did have some problems with RC0 but I have no idea why. I just tried writing a little app to do this and it worked straight away.

Here’s the code. It’s obviously part of a full solution containing a Web Application and a SilverLight Application project. I’ve also uploaded it.

Useful Information:

You can not do a cross domain request over HTTPS.
You can do a cross domain request over HTTP.
To be able to make the cross domain request the server that you are making the request to needs to have either (requires clarification) crossdomain.xml and/or clientaccesspolicy.xml in the root of the webserver.

Resources/links:

SilverLight.net forum post on making a WCF cross domain request
Cross domain policy file helpers for Visual Studio – addes intellisense for the XML files
Online cross domain policy file checker
Silverlight cross domain web request example solution
Example clientpolicy.xml file
Example clientaccesspolicy.xml file

The code:

private void RequestButton_Click(object sender, RoutedEventArgs e)
{
    try
    {
        // Create and being making the request/getting the response
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(new Uri("http://www.leggetter.co.uk/"));
        request.BeginGetResponse(HandleResponse, request);
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex);
    }
}

private void HandleResponse(IAsyncResult result)
{
    try
    {
        // Finish getting the response and then read the response in chunks
        HttpWebRequest request = (HttpWebRequest)result.AsyncState;
        HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(result);

        StringBuilder readText = new StringBuilder();
        using (Stream responseStream = response.GetResponseStream())
        {
            byte[] buffer = new byte[1024];
            int read = responseStream.Read(buffer, 0, buffer.Length);
            while (read > 0)
            {
                readText.Append(Encoding.UTF8.GetString(buffer, 0, read));
                read = responseStream.Read(buffer, 0, buffer.Length);
            }
        }

        // Display the response text
        Dispatcher.BeginInvoke(delegate()
        {
            ResponseText.Text = readText.ToString();
        });
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex);
    }
}

C# – Get Windows Temporary Directory

Phil Leggetter — Fri, 02 Feb 2007 09:25:48 +0000

Once you know it you’ll probably never forget it…but wait, this is the second time I’ve googled for this. I’d best post how you “get the Windows temporary directory using C#“!