How To Get Started With Pusher.com

Last night I was listening to one of my favorite podcasts called The ChangeLog. Its a weekly show covering new Open Source stuff. One of the sponsors is a company called Pusher, but even after the ad, I wasn't totally sure what they did. So I checked out their website.

At first glance of the site I still had a hard time understanding what they did. It looked like they provided some sort of communications layer between the browser and a server. They have all sorts of case studies, and a few examples, but after that, it was still hard to figure out what function they really actually performed.

So I started playing around with it, getting a free account and running through a sample or two, then scouring the web for other examples. After a while I thought I got it, but I was still wrong. It wasn't until a few too many hours invested that I got close to grokking it. And it turns out that its really simple, and its extremely cool!

What Does Pusher Do?

Basically, its a way to get data from the server back to the client asynchronously. Sure there are other ways to do that, but this is so darned simple to implement and it just works. You could use it to update a chart on your website with new usage stats, or implement a chat service, or all sorts of other things. Maybe even initiate a call to a customer using Twilio as well.

What Does It REALLY Do?

The chat was the first example I read and I think thats why I got confused. When I think of chat, I think of client to client. There might be a server somewhere in the middle, but its usually just there to initiate the conversation. And I assumed that Pusher was that server. But thats not what happens.

Your client, which is probably a web page, subscribes to a Pusher channel. You set up that channel from the server (or client). Messages are sent on the channel and any subscribers will see the messages on that channel (assuming permissions allow it, but my server assumes there are no secrets).

Now what I didn't get till the last minute was that the client cannot submit messages, only receive them. Instead, the client has to contact the server on its own. I used a jQuery ajax post to do that. My server then parses the request and sends a message on the channel, which my client then deals with.

How Do I Set It Up?

To set up a Pusher app, you need a server. The server doesn't have to be complicated, but you do need a server. In today's world of cloud services, a server no longer means a big loud rack mountable monstrosity in the closet. In fact in my case its a mysterious service in the ether called Amazon Web Services. I could just have easily used Heroku, or PHPFog, or all sorts of others, all of which have free base packages. So I setup the simplest possible server application I could come up with.

For me that application is a NodeJS based chat application. Here is the complete source code listing for my server.

Really! That's all there is! Now this is NodeJS and its written in CoffeeScript, because thats just how I roll these days. The first two lines should be obvious, but node-pusher can be found at https://github.com/crossbreeze/node-pusher. Just run npm install node-pusher to get it installed on your server.

Then comes the key, secret, and appId. You can get those when you sign up for the free account at Pusher.com. Create a new pusher object by passing it your key, secret, and appId. Then I create a few vars to store my channel, event, and some initial data. You can call your channel and event whatever you like. Its just a way for you to reference it in your client and server.

The trigger function is what actually sends the message on the channel as a specific type of event (again, you name it). The data can also be whatever your want to pass. So in my case I listen on port 8888 and anytime someone passes a query string like from=matt&content=ChatMan, then the server triggers an chat message on a channel called ChatChannel. Anyone who is subscribed will see that message.

What About The Client?

If you thought the server was easy, the client is even easier. First, lets look at the HTML. As you can see its really basic. Just a text box to enter your name, and a text box for a message to send.

My html needs three javascript files: jQuery (just because I am lazy), Pusher (hopefully that one should be obvious), and my own local pusher code. So lets take a look at that code:

Again, super simple! I have moved my server URL to localhost so that you can test it with minimal fuss. Basically what happens is that whenever the text changes in the text box with ID of InputText, I post to localhost with a special query string. The fact that its going to a page called chat means nothing. That page could have been snufalufagus and it still works. I added a From name text box so I could easily test between two different browsers and see which was which.

Below that is the Pusher object which is initialized with your key from Pusher.com. Then you subscribe to the channel. This needs to be the same as the channel name on the server. Finally I bind an event handler that tells the webpage to update whenever a new 'chat' message comes in.

Just 50 Lines Of Code?? Really?

Really ! Thats all there is. And I was a bit wasteful in a few spots. Now of course, hopefully you see where this could be improved. Like making it not look like it does. I could also subscribe to multiple channels, or multiple types of information. Maybe the chat window shows chat stuff, but I also get a file saved to localStorage. Maybe this is actually running in an Adobe Air app and the chat is visible, but I receive keys and passwords as a separate type of event which gets stored directly in the Encrypted Local Storage area.

Thats actually my plan. I have a site I created for work called FaxDocs.tv which hosts videos for our products. I want to add a chat window to parts of the site. I already created a management app we use internally that uses Adobe Air. The reason I did that is that I run on a Mac and my colleagues are on Windows. So now I can add the chat functionality to the Air app. When one of us has the app open, then the option for a chat is available on the website. The end user doesn't have to use it, but they can.

As I complete more of that app, I'll share it here. Until then, have fun with Pusher. I certainly am.

Scratching An Itch In The (Adobe) Air

Recently I needed to solve a challenge that came up at work. Actually, it was a series of challenges. First, we needed a better way to display our/my videos. Then we needed a better way to submit and review those videos. We also needed a better way to report on how people consume them. It turned out to be quite a big challenge.

In the past, I didn’t think we needed a solution. YouTube provided the answer for everything. YouTube was the primary host for our videos. It just made sense to display our videos on YouTube as well. We also provided links and embeds of those videos on our blog, as well as on some other web properties.

But every now and then, YouTube changed the formatting for its pages. We have minimal control over the look of those pages. And organizing videos is always a challenge. Our customers have a hard time finding the right video because we don’t have a great way to categorize them on the page.

Reporting on video views is a strong point of YouTube, but we can’t easily see what parts of the videos engage viewers the most. I think I know what people enjoy, but I could be wrong. And the YouTube analytics don’t provide me with good enough tools to figure that out.

So we spent a good long time trying to find a better solution. And it’s ended up being one of my big projects at work for the last few months. The result is still in process, but I am pretty happy with where things are going.

For our customers and partners, it starts and ends with a single web property: FaxDocs.tv. FaxDocs is a list of videos that we can easily put into the right categories. And it is completely under our own control. But behind FaxDocs is a site called Wistia which actually hosts our videos.

Wistia isn’t going to be the solution for everyone as it does require payment. But as soon as you outgrow what YouTube provides for free, Wistia is a great next step. With Wistia, we control the video experience. We have access to great reports that show which parts of the videos are the most engaging. And there is another amazing benefit to using Wistia we did not expect at the beginning. Unlike YouTube, Wistia is not blocked by most corporate and international firewalls.

We already see an increase in views around the world. Administrators in companies that block YouTube are watching our videos. Potential customers in China are watching our videos even though YouTube is not accessible. Looking back, this is enough of a benefit to justify the subscription costs to Wistia.

FaxDocs itself is hosted with the massively popular web hosting company called Squarespace. Squarespace provides a great foundation with enough flexibilty for what I wanted to do.

The downside to using a custom platform as it is now is that my system is a bit brittle. I need to post things in a way that is just right. And I need to refer to a set of instructions with every post. I hate that. It was the same with YouTube and the result has been a bit of inconsistency as to how we post videos. So now I am working on the next stage of FaxDocs. I am creating a management app to make it easier to post, get statistics, and more.

I spent a bit of time thinking about the right way to deliver this management app. I cannot build the app just for me. There are others in the organization that need to work with it. I use a Mac, but everyone else is on a Windows PC. I would rather the app not run on an external webhost. Due to the resources available to me, that means it has to be a desktop app. And a desktop app that doesn’t require installing additional wierd services.

So how can I solve all of those needs? It turned out to be a really simple solution. Adobe Air. I have worked with Adobe Air for the last week now and I am really surprised at what it can do. That’s not to say that Air makes absolute sense all the time. I had a few challenges in building my app for Air that I had to overcome. And I am not developing for Adobe Air in the traditional way, so many of the online articles on the topic are not exactly written for me.

What is the traditional way to write an Adobe Air app? As far as I know, it is to use something like Flash Builder. While I do own Adobe Creative Suite 5.5, the version I have is Production Premium. This does not include Flash Builder. But it turns out that you do not need that to build an Adobe Air application.

My Adobe Air development environment involves two main tools. The first, and very important, tool is the free Adobe Air SDK. This includes the compiler and the debug utilities which I use a lot. The second main tool is a text editor. You can use any text editor you like, but at the moment I am totally loving SublimeText 2. If you are new to Sublime, also check out Jeffrey Way’s Tips & Tricks at Nettuts.

I am going to walk through the process for building an Adobe Air app here on Technovangelist. I haven’t written the articles yet, but I would expect the series to take quite a few posts. I hope you’ll stick with me as I write all the posts. If you have any comments, please share them with me below.

How to Create a Custom 404 Page on Squarespace

I just recently switched my blog from a self-hosted Graffiti installation to a completely managed solution on Squarespace. This is fantastic because it takes the job of patching and coding almost completely away. The downside is that some of the things I took for granted are unavailable. Like a custom 404 page. Why is this an issue? Well, if you are moving from one engine to another, they probably have different URLs for the same article. The last thing I want is for one of the rare visitors to my blog is some unhelpful error saying that the page could not be found. If you want an example of this happening, go to Squarespace’s own blog and look at this post from September 2008. Now click on the video link. Unless they have fixed it recently, you will see this:

The built in solution for this is called URL Shortcuts. The idea is that you plug in the old url and the new url into the configuration area, and anytime someone enters the old url, they are sent to the new one instead. Great…if you have 5 pages. But if you have been blogging for a while, then the job of entering those URLs is going to suck. Squarespace probably realizes this which is why you see that screenshot above. So what is the solution?

If you write to support, they will say that URL Shortcuts is the solution. But there is a better way. I found a post on their developer forum about customizing the Page Not Found form. The solution seemed pretty simple. Create a custom 404 page on your site, the paste this in the Extra Header Code section (I am pretty sure this means you need an Advanced level package from them):

<script type="text/javascript">
   //Redirect from error page to your new custom error page 
   var redirectURL = "http://ENTER YOUR NEW ERROR PAGE URL HERE";

   if(document.title == Squarespace.Constants.WEBSITE_TITLE + " - Page Not Found"){ 
      location = redirectURL; 
   }; 
</script>

The only thing to change in that code is the page url. Actually, mine only worked when I put /custom404 rather than http://technovangelist.com/custom404.

On my Custom404 page, I put in some apologetic text explaining the situation, directing visitors to the search box. But I wanted to take it a bit further. I wanted to auto suggest a link for where they really intended to go. It might not work, but I figured it was good to try. On the Graffiti site, page urls were formatted as <site>/<category>/<page>. So I had some that were /technology/blah, and others that were /travel/blah. On the new site, all posts were under blog, so /blog/blah. What I needed was a way to convert all /travel/ and /technology/ to /blog/. I think this would be a good time to tell you that I don’t know anything about javascript other than how to spell Google.com.

A little searching on the net combined with some newbie code wrangling and I ended up with something like this:

prevurl = document.referrer;      
document.write("<font size=-1><b>You came here from "+prevurl+"</b></font>");

So that told me where I came from. When I figured out how to manipulate text I got the rest:

if(prevurl.indexOf("technology")!=-1) {
   newurl= prevurl.replace("technology","blog");
   newurl = newurl.substr(0, newurl.length-1);
   newurl = newurl +".html";
   document.write("<font size=-1><b><br>I think you wanted <a href="+ newurl +">"+ newurl +"</a></b></font>"); }

That combined with my apology was a pretty good first step. Then tonight I realized there was a problem. I looked at my Woopra stats and saw that /custom404 was one of my more popular pages. I couldn’t quickly see which page caused the problem. Woopra shows the page title, which was now “Technovangelist – Custom404”. So I had to change that title. In order to change the title, I needed to pass the bad URL somehow. A query parameter seemed like a good choice. So I changed the line that initialized redirectURL to this.

var redirectURL = "/custom404?ref="+location.href;

That got me the all the info I needed. Perhaps too much information. Now to tweak the title. I headed back to the Extra Header Code in Website Settings. After that first If clause in the script, I added another:

else if (document.title == "Technovangelist - Custom404"){
   document.title = "Technovangelist - 404 - "+location.href;

This is good, but the url in Woopra is now really long. So another edit got me this:

else if (document.title == "Technovangelist - Custom404"){ 
   document.title = "Technovangelist - 404 - "+location.href.substring(67); };

Why is 67 in there? Well, I am sure there is a cooler way, but there are 67 letters in the URL before the unique part of the url. I want to see Technovangelist – 404 - /technology/badsite, not the way too long Technovangelist – 404 – http://technovangelist.com/Custom404?http://technovangelist.com/technology/badsite.

I then added a search box to the custom404 page just in case my guess didn’t work, but I think it’s a good first step. Want to try it? Go to http://technovangelist.com/technology/time-to-move-away-from-graffiti/ and see the custom 404 page that comes up. Now click the link that I suggested. In Woopra I will see something like this:

I am very happy with this solution. Would have been easier I think to be able to override a 404 page, but this will do. Any thoughts on how I can improve this approach??? Let me know in the comments.