Phil Leggetter - Real-Time Web Software and Technology Evangelist

Hosted realtime services – making the realtime web more accessible

Phil Leggetter — Tue, 24 Jan 2012 09:05:11 +0000

The real-time web started off by just being “cool”; a quirky and fun space to be in with lots of “cool” technology. People weren’t sure whether it was just a fad, stimulated by hype. The value it delivers in the form of customer engagement, interaction, collaboration and the opportunities it can provide by being real-time is now much clearer, and consequently the benefits of using real-time technologies are beginning to be understood.

Realtime Web Technology Accessibility

One of the problems with real-time technologies over the past 10+ years has been the accessibility. Comet servers were difficult to install, a pain to maintain and upgrade and generally difficult to use due to numerous configuration options and technology quirks, mainly exposed by different web browsers. There have been a number of very important changes have happened over the past few years that now make real-time technologies much more accessible.

Web Browser Wars

For such a long time Internet Explorer 6 was by far the best web browser available. It’s the reason that Microsoft “dropped the ball” and why Firefox and Chrome are where they are today. But now we are in a great position of having a number of actively developed web browsers being driven by real competition to offer the best browsing experience. This has lead to a general improvements in browser speed (JavaScript and rendering engines) but also improvements in web technology available to web browsers and, possibly most important of all, web standardisation. HTML5 does indeed rock!

Cloud Hosted Services

Cloud hosted services, frequently referred to as Infrastructure as a Service (IaaS). These hosted solutions take away the pain of installation, maintenance and scaling, and frequently deliver them at a fraction of the cost possible if you were self-hosting.

Better self hosted solutions

Cloud hosted services are awesome (I would say that, but they are!) but the self hosted realtime web solutions that are available and the ease of installation has massively improved. As an example, you can have a socket.io example page up and running on node.js within minutes. These improvements have been driven by an increased demand for

WebSockets

WebSockets is a standard for continuous bi-directional single-connection communication between client and server. Real-time technologies, and in particular real-time messaging within a web browser, has been possible before but not until WebSockets has there been a standard that is so likely to succeed.

Unfortunately WebSockets don’t mean that the pain has completely gone away. The technology, whilst more accessible, still isn’t as easy as it could be for developers to use. On some platforms WebSocket server installation can still take too long, maintenance is just something developers don’t really want to do, and scaling takes time, effort and lots of configuration. So, we turn to the first important change as a solution to this problem – hosted realtime services.

Hosted realtime services

Hosted realtime services, like Pusher who I work for, make it much faster and easier for developers to start adding real-time functionality (push notifications, activity streams, realtime chat, collaboration, realtime data visualisations, multiplayer games, 2nd screen/Social TV experiences etc.) to their applications within minutes. For bigger organisations, the same solution also means that you know your developers are busy adding value, not installing, configuring and maintaining. This means they are happy and productive.

The web is only around 20 years old and the real-time web is younger still. We don’t know exactly where the next few years will take the web but I’m sure that HTML5, WebSockets and real-time messaging will be a key component, and services like Pusher in a great position to help provide the infrastructure that developers need to easily use these technologies.

Where next?

If you found this interesting you might find my Realtime Web Technology Guide/List of interest. If you know of any technologies that I’ve missed, please get in touch.
Why not take a look at Pusher and the Pusher Blog

The Right Place At The Right Time: How The Real-Time Web Influences The “local” World

Phil Leggetter — Wed, 09 Nov 2011 17:09:37 +0000

A couple of hours ago I was on a on the ‘The Right Place At The Right Time: How The Real-Time Web Influences The “local” World’ panel at the Local Social Summit. The panel was organised and chaired by Sebastien Provencher and also included RyanMacJones, Dave Ambrose and Stefano Diemmi.

Here’s the information about the panel and my thoughts on the questions that were asked.

Description

The rise of the real-time Web is well documented. Propelled by both the social networking revolution and mobile device ubiquitousness, we’re seeing the birth of new user services and business opportunities. In this panel, we will explore the time element in the local/social Web and will try to discover what kind of content works well in real-time, what are the benefits for consumers and what kind of business models can be deployed to leverage the “time” dimension.

Questions

Introduce yourself, describe your business

Phil Leggetter
Developer Evangelist at Pusher
Pusher is a cloud hosted service and API that makes it really easy to add cool realtime user engaging functionality, like push notifications, activity streams and chat, to any Web, Mobile, Tablet or Desktop application.

How do you define the real-time Web? What is the importance of the time dimension on the Web today?

Firstly I think we need to define ‘realtime’. Realtime means that when information is generated following an event of some kind, that information must be available and received in a timely manner so that the context of that information is not lost; so that the information is still relevant and usable.

The realtime web, made popular by Twitter and the instant availability of information, takes this concept of timely information to the web. To me ‘the realtime web’ means that instant availability of information but also the instant distribution of that information. It means that those that have registered an interest in a pieces of information will have it pushed to them. It also means we now have the technology available for realtime (timely) bi-directional communication making realtime chat and collaboration using the Internet as the network something that is truly achievable.

How does the time dimension expresses itself in your business? or in the local/social universe, social media, daily deals, etc. (feel free to comment/provide examples outside of your business as well)

At a fundamental level Pusher is an Internet realtime messaging service. We aim to keep latency, the time between a message being sent and it being received, as low as possible so it’s a core part of our service. The value in realtime is the opportunity that receiving information as quickly as possible presents.

The technology behind this comes from a trading background where milliseconds can mean getting the best price and can make the difference between getting a great price for a commodity/stock/share or a bad one. This results in potentially millions of pounds.

Realtime in local and social also results in opportunity. The first to hear about and respond to a deal benefits. Those who are aware of the unexpected U2 concert on a near-by roof top have the opportunity to get there in time to see this one-off event. People aware of a terror threat or some other kind of emergency can act accordingly – either get the hell out of the area or head to it to cover the event or help out. It’s all about the opportunity that getting timely data presents.

What kind of content works well in real-time Web? Are there business categories that work better?

Traditionally realtime web technologies have been used in finance because that’s where the benefits have been greatest. This means that the content has been pricing information about stocks and shares along with news related to finance.

But with both realtime technology and realtime data much more accessible we are seeing other businesses using and benefiting from it. Sports and betting data is the most obvious second step for this technology. Auctions are a good use and again this is really money driven. Then there’s business categories where people just want to get the information as soon as possible. News, sport scores, disaster warning systems, disaster relief and short lived deals are examples. Then there’s information around systems that allow for realtime collaboration; where people are working together to discuss and solve problems. Chat is the first obvious example but synchronised document editing is another more complex, yet highly beneficial one.

Twitter demonstrates a form of chat but it’s only really good for broadcasting information and for one-to-one chat. If you want a multi-user experience you need to take the conversation away from Twitter. Google hangouts or apps such as !blether and Nurph are great for that.

What is the role of “mobile” in this evolution?

We’re seeing a lot of notification platforms for mobile, but that means the data is going just one way. In some cases this is all that’s needed e.g. “Daily Deal X available at Y”. But for collaborative applications you need more than just a notification infrastructure. For that we needs better mobile data infrastructure. In London it’s fine but where I live in Scotland it’s nearly non-existent. So, mobile and local is going to benefit a lot of people but not everybody. Also, mobile data plans need to be revamped to take into account we are becoming more data, and less voice focused.

What are the benefits for consumers? emergency/Short-term need vs. long term need. Real-time local news (Japan tsunami, London riots, hashtags, etc.)

I think we’ve already covered this. It’s about the opportunity that getting realtime information brings. To know something is going on and get to or away from somewhere as quickly as possible.

What are the business models (new or not) that emerge when we add the time dimension? Yield management /last-minute: real or hype? Is this real? Groupon Now disappointing?

There’s an excitement generated by having a time constraint. So I think in general we’ll see some fun ideas come out of this. I’m particularly excited to see some 2nd Screen applications that synchronise with live events or scheduled TV programmes. There’s an opportunity to add a lot more context and fun to TV beyond what we are watching and I’ve yet to see a really great example. I’m not a betting guy so I’ve not tried out PickLive but for this interested in Football and Fantasy Football I’m sure it’s a great experience. I want to see more in this space.

What’s the business model? Probably synchronised contextual advertising and also increased user engagement in a programme, and TV figures mean more advertising revenue.

Are there technologies/technology stacks that are core to real-time? How do we implement real-time technologies?

Adding realtime functionality to an application is now easier than it’s ever been. In the past few years the technologies allowing realtime communication have improved and are much more accessible. Scaling and maintain such technology stacks can still be a problem which is one of the features that Pusher offers.

For a true realtime experience the best technology in my opinion is WebSockets. They allow for low latency true bi-directional communication over the Internet. There are other HTTP-based techniques but they suffer from the overhead inherent in HTTP such as the additional load of HTTP Headers sent with each HTTP request. Browser techniques which do work have to be implemented in different ways in different web browsers. The standardised approach being taken with WebSockets means that it will become the best way of implementing realtime server to client bi-directional communication.

Technologies worth a mention include:

Pusher: a hosted realtime service with APIs that make it really easy to add realtime user engaging functionality to a web, mobile, tablet or desktop app. Have I already said that?
PubSubHubbub: provides a way to subscribe to RSS feeds so that new content is instantly pushed to you as soon as it’s available. It’s a server to server technology and has been used more recently to let you subscribe to any arbitrary data, not just RSS. Node.js is big in the tech community because JavaScript is generally big on the Web and Node let’s you code in JavaScript on the server and client.
Socket.io is frequently used to add realtime functionality to Node apps.
SocketStream: WebSocket-powered web framework dedicated to creating single-page real time websites.

What are the benefits of the real-time Web to local shops/local commerce of real-time Web? location-based, customers on the go.

The ability to let people know of short term deals or the ability to sell perishable goods at the end of the day that would otherwise be wasted. I’ve heard of a product called Foodini that might be doing something in this space. FourSquare check-in can still provide more value to encourage meetups in areas where groups of friends hang out.

Typically real time does not allow for a lot of context beyond short bits of info. How does context play a deeper role as we move forward in a real time world?

As I mentioned earlier, context is absolutely key to getting real value from realtime information. Without context the data can be worthless. When something has a time constraint then context has to be present. Applications such as FourSquare add the context which gives it real value. Who has checked-in, where have they checked-in, what type of place have they checked-in to. All this key information let’s anybody viewing the check-in decide what to do. Tweets normally rely on you knowing a user. If you’ve missed the start of a conversation thread between two users you follow then, depending on the time constraints, the opportunity could be lost.

Context is essential and as realtime web applications move forward this is most definitely the area where we need to, and will, see improvement.

The Zoom! book got me thinking about Kwwika

Phil Leggetter — Wed, 21 Sep 2011 15:50:48 +0000

I’ve just finished reading chapter 2 of Zoom! The faster way to make your business idea happen and to use one of Ian Sanders favourite words it really “resonated” with me and my experiences with Kwwika.

Chapter 2 is entitled “The trouble with too much planning. How to unplan your business”. I’ve been following Ian for probably around three years now and for around the last two he’s been talking, tweeting, blogging and vlogging about unplanning your business.

I had tried to unplan Kwwika. The fact that it was a great idea, I had real passion for it and had a lot of potential to be used in many different ways unfortunately wasn’t enough for everybody involved. There had to be more of a business plan. This meant documents and spreadsheets. These documents and spreadsheets alone didn’t clearly show a massive turnover. But the spreadsheets were full of best guess estimates and didn’t take into account all the various possibilities and things that hadn’t even been thought of yet – how could they? Kwwika didn’t need a plan beyond the basics we already had in place. We had enough information to see that it was a great idea and had lots potential. What it needed was more faith, commitment* and belief in the idea.

*It would probably be better to say that the commitment needed re-focused since there was plenty of time, effort and money spent on the project.

Chapter 2 in Zoom! talks about a business idea needing a ‘why’ and a ‘who’. Why a business is needed and Who will make it happen. The Why for Kwwika has now been justified by services like Pusher, of which I’m now part, and the competitors PubNub and Beacon Push. There is absolutely no reason why Kwwika couldn’t still be running and competing too. The problem lies in the belief in the ‘why’ and the restrictive nature of the ‘who’, where a big part of the ‘who’ was me.

One of the things that Gary Vaynerchuk talks about quite a bit is the importance of concentrating on what you are good at. If you’re not good at something, or if you know it could be done better by somebody else, then find that somebody else and get them to do it. This means you can focus on the things you are good at. We didn’t do this with Kwwika and it was partly my fault. It was my fault because I was on a good salary, knew the project was constantly under review and knew that at the start of 2012 I wanted to buy a home for my family. These all conflicted with how I should have approached Kwwika. My salary shouldn’t have been a salary at all. It should have been a budget to spend as required in order to give Kwwika a better chance of being successful.

Knowing, or admitting, you are not good at something can be a difficult thing. I’m actually reasonably open and honest about this. I think I know what my strengths and weaknesses are although I do try to put myself in situations which I’d say are outside of my comfort zone. One example of this is that I actually really enjoy working with others although I work from home so quite frequently have to work alone. Another is giving talks. Since a kid, and a particularly bad experience trying to give a talk about the football team I was captain of, I’ve never been too keen on giving talks or presentations. But I’m now trying to put myself in situations where I have to do this to get over this worry, increase my confidence and to try and improve as a person.

All this feeds in very well to chapter 3 of Zoom!, “Getting to grips with your mission. Why you need to understand what’s driving you”. More to come as I read on.

Q&A: Are WebSockets ready for commercial use?

Phil Leggetter — Wed, 07 Sep 2011 11:48:43 +0000

I’m not answering this question directly in the post. I’d like people to ask questions and raise concerns in the comments and I’ll then do my best to answer the questions and alleviate any concerns.

I believe that WebSockets are ready for commercial use and I’ll justify this stance in answering any questions.

Look forward to hearing your questions and thoughts.

View Q&A/Comments

What came before WebSockets?

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

With the arrival of WebSockets we finally have a standardised technology for true realtime bi-directional communication between a server and a web browser (or any other client). When we were creating our What are WebSockets? page we decided to write up a history of the technologies that came before and that are in some cases still in use today. How did we (developers) achieve realtime browser push before WebSockets and what were the downfalls of those technologies which meant they never really became mainstream? Here’s that write-up.

The Internet wasn’t originally built to be all that dynamic. It was conceived to be a collection of HyperText Markup Language (HTML) pages linking to one another to form a conceptual web of information. Over time the static resources increased in number and richer items, such as images, began to be part of the web fabric. Server technologies advanced allowing for dynamic server pages – pages whose content was generated based a query.

DHTML

Soon there was a requirement for the Internet client, the web browser, to be more dynamic, for it to offer a richer experience. This was achieved through browser scripting in the form of VBScript and JavaScript and was known as Dynamic Hyper Text Markup Language (DHTML). Whilst this improved the web browser experience to some degree it still fell short in allowing a true application experience to be built within the web browser – the web pages still needed to refresh and reload relatively frequently.

Cross Frame Communication

As web browsers evolved so did the scripting technologies and the techniques employed when using them. Application-style functionality was achieved within websites though tricks such as cross frame communication. These techniques allowed new data to be loaded from the server without the page refreshing by a frame loading a new page from the server and in doing so retrieving new information.

Up until this point all actions within a website, web page or web application had consistent of a user action generating a request to a server from the web browser. But what if the web server had some new, additional information for the user?

HTTP Polling

The first solution to this problem was for the client to poll the server at regular intervals. This solution was, and still is, inefficient and leads to stale data being displayed in web pages and applications.

LiveConnect

The next step in the evolution of the web and web applications was for developers to find a way for the server to push new information to the to the web browser from the server. This was first achieved through the use of Java applets which could create a long-held connection with the server and communicate with JavaScript in the web page through a feature known as LiveConnect.

Forever Frame

The LiveConnect technique was relatively quickly superseded, due to Java Virtual machine inconsistencies, by a native browser technique known as forever frame where a long-lived HTTP connection is established to the server using a hidden frame. Data, usually

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:

The easiest way to add real-time functionality to an ASP.NET e-commerce application

Phil Leggetter — Tue, 05 Jul 2011 00:00:00 +0000

While adding realtime functionality to ASP.NET applications has often seemed difficult due to the connection limitations of the IIS platform, it can actually be achieved fairly easily by offloading this component to third party services like Pusher. In this series of posts, I’ll get you started with this exciting technology through a number of hands-on tutorials. In the first one we’ll build a simple e-commerce application that displays realtime stock levels to the customers.

One of the problems with existing e-commerce solutions can be trying to buy something which, whilst you’ve been online, has sold out. This can be a big problem for high demand products like gig tickets or sporting events such as the Olympics. A really good way of avoiding this is to show the customers just how fast tickets are selling. The added benefit of this, from a business point of view, is that it can give users that little push they needed to make that purchase. In this tutorial I’ll show how to:

establish a connection to Pusher in the view
subscribe to a product channel
bind events from this channel to our stock indicator in the view and update the stock level
send stock level update from our server when someone buys something

Getting started

To demonstrate adding real-time functionality to an ASP.NET website I’m going to start with a simple one page e-commerce site which has one product: our cool Pusher t-shirt (Sorry, they’re not really for sale. You’ve got to earn them!). On the product page there is a counter which tells the customer how many t-shirts we have in stock.

To start off with our e-commerce website is a simple ASP.NET MVC3 app with:

A StoreController with two actions. One to display the default view and one to handle the “Buy” button being clicked and the stock level being decreased.
A single Razor view displaying the single product
Two models; one for the product called ProductModel and one for images called ProductImage
A ProductRepository where we store our products

Connect to Pusher

As I’ve already said, adding real-time functionality is really simple – that’s the point! Firstly we have to include the Pusher JavaScript client library. We’ll add this to the view for the moment although we might want to make the include part of the site layout in the future.

Note: If your e-commerce page was being served up over HTTPS you would include our library over HTTPS too to avoid any browser warnings.

Since we are using ASP.NET MVC we’ve already got jQuery included from the _Layout.cs.html so we can wait until the page has loaded and connect to Pusher. The script include and the code that connects to Pusher looks as follows:

Subscribe to the product channel

Now that we’ve connected to Pusher we can push events from our StoreController to all connected browsers if any information changes about the product. The main piece of information that customers might want to know about is if the stock level changes. These t-shirts could sell out fast!

We need to choose a channel name to subscribe and publish to and the obvious choice is to use the unique product id for this. We’ll also prefix it with product- just so it’s really clear that the channels is for a product. We subscribe to this channel on the client as follows getting the product id from the Model that has been bound to the page:

var channel = pusher.subscribe("product-@Model.ProductId");

Bind to stock update events

Once we’ve got a channel object we can bind to events on it. We want to be informed when the stock level changes so let’s bind to an event called stockUpdated. We’ll also expect a JSON object to be passed which represents the ProductModel and will have the same properties on it. That way we can simply update the stock level in the page to match the value on the server by accessing the ProductModel.StockLevel value. We can also update the stock status:

channel.bind("stockUpdated", function(product) {
    $(".product .stock .level").html(product.StockLevel);
    $(".product .stock .status").html(product.StockStatus);
});

Trigger stock update events

As you can see, this is really easy to do. It’s just as easy to trigger the event on the server too. To do this we’re going to be using the C# REST API library within our StoreController. You can get the PusherRESTDotNet library from github or via NugGet.

Once we’ve added our PusherRESTDotNet reference we can add a few lines of code to our StoreController to instantly push any changes in stock level to all connected web browsers viewing our t-shirt page.

The first thing to do is to create a PusherProvider and pass in our Pusher details. In this example we are storing these details in the ASP.NET MVC3 Web.config.

Web.config

StoreController.cs

public class StoreController : Controller
{
  private IPusherProvider _provider;

  public StoreController()
  {
      string applicationKey = ConfigurationManager.AppSettings["application_key"];
      string applicaitonSecret = ConfigurationManager.AppSettings["application_secret"];
      string applicationId = ConfigurationManager.AppSettings["application_id"];
      _provider = new PusherProvider(applicationId, applicationKey, applicaitonSecret);
  }

  // more code here...
}

Once we’ve created our instance of the PusherProvider we can create a PusherObjectRequest to push the ProductModel, with an updated StockLevel following the purchase, to the clients. The serialisation of the model object is handled for us by the PusherRESTDotNet library. The full StoreController.Index HTTP POST handling action looks like this:

[HttpPost]
public ActionResult Index()
{
  bool bought = MvcApplication.ProductRepository.Buy(MvcApplication.BLUE_TSHIRT_ID);
  var model = MvcApplication.ProductRepository.GetProductById(MvcApplication.BLUE_TSHIRT_ID);

  if (bought)
  {
      ViewBag.Info = model.Title + " successfully bought";

      ObjectPusherRequest request = new ObjectPusherRequest("product-" + model.ProductId, "stockUpdated", model);
      _provider.Trigger(request);
  }
  else
  {
      ViewBag.Error = "There was a problem buying " + model.Title;
  }

  return View("Index", model);
}

Now, if you run your application and open two or more windows, as soon as a user in one window clicks the “Buy” button you’ll see that the stock level value instantly updates in all other windows.

Note: the video looks a little jittery because it was recorded on a VM running on Mac

Next time – displaying real-time “Who’s shopping” info with Pusher presence

We now have the stock level indicator changing in real-time. This tells the users that these t-shirts are selling out fast and gives them an added incentive to make that impulse buy. This is a simple yet effective change but there’s more we can do. What if we also show the user how many other users are viewing that product at the same time so that they know there is competition for the last few t-shirts? We can do that easily using Pusher’s presence functionality and I’ll cover that in my next Real-Time ASP.NET blog post which will also go into how to add Pusher user authentication to your ASP.NET web application.

In the meantime you can download the source of the Real-Time Web Store from github. The solution contains a project with the basic web store without any real-time Pusher functionality as well as a solution project. Here are some additional things you you might also want to try out:

Changing the form submission when the user clicks “Buy” so that the POST to the Buy action it is made using a jQuery ajax call
Making the change in stock levels more visually interesting. Try adding an effect to the number change or providing a growl-like notification
Changing the CSS – it’s not my strong point

Recent article in .net magazine: WebSockets – Code a real-time survey

Phil Leggetter — Tue, 28 Jun 2011 22:14:35 +0000

I joined Pusher around over a month ago now and it’s been a non-stop whirlwind of activity. On my first day I was in Poland at Falsy Values for a JavaScript conference and at the same time I was putting together an article for .net magazine. The article is now in the August edition (issue 217) and it got a massive 5 page spread (must be all the pictures).

.net magazine issue 227 (August)

The article covers building a real-time survey using Ruby on Rails and Pusher. I also wrote about how Pusher can be used to progressively enhance an application in the way that has been touted as a “best practice” approach when adding JavaScript to a web application. I won’t got into any more detail, if you are interested you can pick up a copy I bought one.

This is a really big achievement for me and for Pusher, so I’d like to thank the guys at Pusher for taking me on and also for giving me the opportunity to write the article. It showed a lot of confidence in my ability from day one and that means a lot. Maybe it was a test?

Mugshot

I’ll keep this short as I don’t want to make it too much of a “look at me” post. I just want to post something as a “record of achievement” of something I’m proud of and as a thanks to the guys as Pusher.