Aaronontheweb

Hacking .NET and Startups

How to Build a Real-Time Chat Service with Socket.IO, Express, and the Azure SDK–Part 1: Setting Up

April 16, 2012 13:56 by Aaronontheweb in Azure, Node // Tags: , , , // Comments (0)

This past weekend I ran a Node Bootcamp on behalf of Microsoft and in partnership with the fine folks at Cloud9 IDE – the goal of these camps is to help teach newbies Node.JS and to get some Node.JS-on-Azure business from attendees who have a good experience.

So I decided to build a sample Socket.IO application that leverages our platform and would give our attendees a base to work from when it came time for them to participate in the Node Bootcamp Hackathon. I’ve done a lot of work with Express on Node but had never really done much with Socket.IO, so I was curious to see how hard it was to pick up.

Total time to build and deploy this application from end-to-end, including learning Socket.IO: about 5 hours.

The Requirements

All I wanted to build was a basic chatroom – a simple version of JabbR or something of the sort. Below is a screenshot of the finished product, to give you an idea.

image

The chat room I wanted had these simple requirements:

  • All currently connected users would be displayed in a list alongside the chat room at all times;
  • Whenever a user connects or disconnects an alert will be displayed to all other members of the chat room and the participant list would be instantly updated;
  • A new user should always be able to see the 30 previous messages in the chat room, including messages from the server;
  • All new messages are always added to the bottom of the list, and the chat window always scrolls down to accommodate any new users;
  • All users are required to have a registered chat handle; and
  • It had to be cross-browser friendly.

These are all pretty simple requirements for a single chat room; nothing too daunting here.

The Tools

So I decided that to pull this off these technologies would make the best fit:

Server-Side

  • Express makes it easy for me to handle custom routes and its session system is the right tool to force users to sign-in with proper user handles before entering the chat room. Express is the primary web framework for Node.JS and I use it in virtually all of my Node projects.
  • cookie-sessions is a Connect Middleware session state provider, and it’s one of the few that doesn’t require an explicit “session store” like a Redis or MongoDB database. Since I was trying to keep this project simple for new Node.JS developers I thought that this NPM package would be the right choice for tracking users’ handles throughout their chat sessions.
  • socket.io is, in my opinion, the industry standard solution for building real-time web applications with WebSockets. I picked socket.io because its ubiquitous, boasts the best cross-browser support out of any real-time app framework, and it plays nice with Express.
  • azure – for my logging requirements, Azure Table Storage made the most sense. I was able to store all of my messages in one table easily and I didn’t have to write much code to leverage it.
  • uuid – used for generating row keys for Azure Table Storage.

Client-Side

  • Foundation CSS – I am an idiot when it comes to CSS; I suck at it and will probably never be very good. Thankfully Foundation is so easy to use that I can fake client-side competence pretty well with it.
  • KnockoutJS – socket.io and Knockout are like chocolate and peanut butter: they were meant to be together. Being able to seamlessly update the chat room’s DOM whenever a new message arrived or a user connected / disconnected made building the front-end tremendously easier.
  • dateformat.js – a popular JavaScript for applying intelligent format strings to timestamps and datetimes; I use this in virtually all of my projects (including ASP.NET MVC.)

The Design

The design of this application is straight forward.

  • Our Express server redirects users who are not cookie’d with a handle already to a sign-in page where they can get one; once they do have a cookie they are sent to the root document which runs the chat server.
  • socket.io handles all of the chat + user events across XHR given that we’re hosting the application inside of IIS, which doesn’t yet support the WebSockets protocol (next version!)
  • Knockout handles the client-side events from socket.io and updates the DOM accordingly.

express-socket-design

Next in the series:

Part 2 – Setting up Express and session-handling;

Part 3 – Setting up socket.io

Part 4 – Integrating socket.io on the client-side with KnockoutJS

Part 5 – Using Azure Table Storage for persistent chat

Source Code:

If at any time in this series you want to see the source code to this application, visit my github repo for nodebootcamp-chat here or see it live in action at http://chat.nodebootcamp.com/

If you enjoyed this post, make sure you subscribe to my RSS feed!



Code Camp Talks: Intro to Node.JS and Building Web Apps with Express

February 2, 2012 17:15 by Aaronontheweb in Node, Azure // Tags: , , , // Comments (0)

This past weekend at SoCal Code Camp I gave two presentations back-to-back on Node.JS: “Intro to Node.JS” and “Building Web Apps with Express.”

I don’t have much to add on what I did at the sessions other than to mention just how surprised I was at how enthusiastic people were to see Microsoft involved with the Node effort and how eager everyone was to learn Node. I was thoroughly impressed.

Below are links to my slides and code samples for both talks – enjoy!

Intro to Node.JS

Source code: Github or Cloud9

 

 

Building Web Apps with Express

 

 

Let me know if you have any questions!

If you enjoyed this post, make sure you subscribe to my RSS feed!



Search

About

My name is Aaron, I'm an entrepreneur and a .NET developer who develops web, cloud, and mobile applications.

I left Microsoft recently to start my own company, MarkedUp - we provide analytics for desktop developers, focusing initially on Windows 8 developers.

You can find me on Twitter or on Github!

Recent Comments

Comment RSS

Sign in