Tutorial: Building a multi-tier cloud application on Windows Azure using MongoLab, node.js, and Socket.IO

About this tutorial

This tutorial demonstrates setting up MongoDB-as-a-Service from MongoLab on Windows Azure.  When complete you will have a multi-tier cloud-based node.js, Socket.IO and MongoDB application running on Windows Azure that works together with social media. 

The tutorial shows how easy it is to:

1.      Develop or port existing node.js applications to Windows Azure.

2.      Modify MongoDB applications to use MongoLab on Windows Azure.

The sample application used in this tutorial also demonstrates various Windows Azure-based technologies working together with social media.  During a conference this application could run as part of the screen and function as a “BackChannel” to the presentation.  Attendees and the presenter (and anyone else) can post to a predefined Twitter @ID and/or #Hashtag.  The tweets will display on the screen in real-time, and they will also be saved in a MongoDB data store for retrieval and reference later.

This conference backchannel application consists of three node.js applications. The get_tweets service listens to tweets using WebSocket via Socket.IO.  When get_tweets finds specific ids or hashtags, it stores them to a MongoDB instance. Another Socket.IO service watches for new entries into the MongoDB Instance and broadcasts them. A third node.js application uses a simple HTML5 web page listener to display these tweets in a client.  In this case, a Web page acts as the client, but the client could actually be anything that uses node.js and Socket.IO. 

Prerequisites

This tutorial requires a Windows Azure subscription. If you don’t have a subscription, you can sign up for a free trial subscription on WindowsAzure.com.  You will also need a free MongoLab account, but we’ll cover the steps for setting that up later in the tutorial.

Set up a Windows Virtual Machine on the Azure Portal

The first step in setting up this tutorial is to create a Windows Azure virtual machine (VM) running Windows Server.  An extensive tutorial can be found here, but below are the steps needed to set up the server for use with this tutorial.

Sign into your Windows Azure Management Portal, then select New on the command bar at the bottom of the page:

Click  Compute followed by Virtual Machine. Click From Gallery to open the Virtual machine configuration page.

Click Platform Images and select Window Server 2012 Datacenter. Note that you could also use a virtual machine with Windows Server 2008 R2 Sp1.

Click the arrow at the bottom right of the page to go to page 2 of the virtual machine configuration.

Select  the latest date for Version release date. Give your virtual machine a unique name such as <yourusername>ConfBackChannel. Select the size in the Size dropbox.  An ‘Extra small’ machine should suffice for this tutorial.

Insert a username and a strong password of your choice. Make a note of both.

Continue by clicking on the right arrow at the bottom right of the page.

Select Create a new cloud service in the Cloud Service dropdown if not already selected.

Other settings:

·         Enter a unique name such as “<yourUserName>ConfBackChannel” in Cloud Service DNS Name. 

·         If the DNS name you select is already taken, you will need to select another DNS name.

·         Select a region in the Region/Affinity Group/Virtual Network dropdown. 

·         Select Use an automatically generated storage account in the storage account dropdown.

Keep the availability set as (None) since this is a sample application. For a real application, you may want to use availability set by deploying group of virtual machines.

Click the arrow at the bottom right of the page to continue

On the Endpoint settings page keep the default values, as Remote Desktop and Powershell settings use these ports as default.

Click the check mark at the bottom of the dialog to complete the Virtual machine configuration.

The new virtual machine should show up in the list of virtual machines:

Virtual machine provisioning should take around 15 minutes. The virtual machine status should change from Starting (Provisiong) to Running (Provisioning) and finally to Running.

Next, we connect to the new virtual server. 

Select the VM once the status is Running and press Connect on the lower bar. This will download a  RDP (Remote Desktop Protocol)  file with connection strings and credentials to connect to the virtual server remotely.

Select the downloaded .rdp file and double click it to start the Remote Desktop Connection.

Click Connect in the Remote Desktop Connection dialog.

If it fails to connect, make sure that the virtual machine is in the running state, and that remote access to the virtual machine is enabled from the local computer.

Once connected, enter the user name and the password you chose earlier and click OK. In the Remote Desktop Connection dialog, click Yes.

You should now be logged into the new virtual machine.  

Setting up Node on the Virtual Machine

Next, we will download and install node.js on the new virtual server.  First we are going to turn off the Internet Explorer Enhanced Security configuration (IEESC) in case we are prevented from downloading from GitHub.

On the virtual machine, open Server Manager and select Configure this local server:

In the Properties section, click On next to IE Enhanced Security Information.

In the Internet Explorer Enhanced Security Configuration dialog, select Off for Administrators and click OK.  Alternately, you can add necessary sites in your list of safe websites in Internet Explorer.

Open Internet Explorer on the virtual machine and navigate to http://nodejs.org/dist/v0.10.15/x64/node-v0.10.15-x64.msi. (This may involve you adding nodejs.org to your list of safe websites.)

This will download an .msi file for node setup.  You may run the downloaded .msi file or save it locally and run it later.

After running security scan, the .msi installer will start node.js setup.

Select all default values in node.js setup panels and select accept with the terms in the End User License Agreement license terms to install node.js on the virtual machine.

Setting up the MongoLab Service for Windows Azure

Open Internet Explorer and navigate to https://manage.windowsazure.com. Login to open the Windows Azure Management Portal.

Select New at the bottom of the page.

Then click Store.

In the Choose an Add-on dialog, select MongoLab from All and click the arrow at the bottom right of the page:

In Personalize Add-On, select the Sandbox radio button for the tutorial.  The high-availability MongoDB Replica Set Cluster is for production systems that need more horsepower.

Enter a MongoLab instance name and select a region, then click the right arrow at the bottom right to continue.

Next you’ll see a Review Purchase tab, click Purchase (there will be no charge for the free option) to complete the database setup.

After a few minutes, the data status should show Started indicating that the database is ready:

Select your new MongoLab instance and click Connection Info from the lower toolbar to open the connection info dialog box.

MONGOLAB_URI shows the connection string to the MongoDB service on Azure. Copy this text to the clipboard by clicking on the icon to the right of the MONGOLAB_URL textfield. 

Note that the URI for all MongoLab databases is in the following format:

    mongodb://<dbuser>:<dbpassword>@host:port/dbname

You can use your MongoLab URI to figure out your DB username as well as your dbname.

Deploying the Twitter Listener application to the Virtual Machine

Next we will download the application code form GitHub and set it up on the virtual server.  On your local machine, open https://github.com/MSOpenTech/WAMongoLabTutorial in a browser. Select the “Download ZIP” button option:

Rename the downloaded file BackChannelApp. Use RDP to transfer the file to the virtual machine.  Place the file in the C:\ directory.

Right click the zip file on the virtual machine and choose extract all files. In the Extract Compressed (Zipped) Folder dialog.

Enter or select c:\BackChannelApp in the Files will be extracted to this folder textbox and click Extract to extract files from the zip package to the BackChannelApp directory.

Note that C:\BackChannelApp contains 2 folders, each with a node.js application, an html file, and a README.md file.

1.      “get_tweets” contains the application that uses the Twitter API to find tweets with relevant keywords and places them in MongoDB locally. We are going to adapt that to place the tweets on the MongoLab service on Azure.

2.      “tweet_socketio_service” contains an application which reads tweets from MongoDB and uses Socket.IO to broadcast these tweets to clients.

3.      “index.html” - a client in the form of an HTML file to view the tweets. This file contains code to subscribe to messages sent by Socket.IO.

4.      The README.md file explains the latest news about the project.

Set up get_tweets

To setup the ‘get_tweets’ application, we need to install dependencies on the virtual machine. ‘Get_tweets’ uses two node.js packages, namely, mongoose and ntwitter. Open a command prompt window on the virtual machine and type the following commands to download and install the dependencies:

C:\>cd C:\BackChannelApp\get_tweets
C:\BackChannelApp\get_tweets>npm install ntwitter
C:\BackChannelApp\get_tweets>npm install mongoose

To change the database connection to use the MongoLab MONGOLAB_URI, we will make changes to server.js in the ‘get_tweets’ directory.  Server.js is the node.js application which retrieves tweets from Twitter.

Open command window on the server and execute following commands.

C:\>cd C:\BackChannelApp\get_tweets
C:\BackChannelApp\get_tweets>notepad server.js

(If the line endings of the file are incorrect, you may need to fix linefeeds by converting the file from Unix format to Windows format. To do this, download unix2dos tool from the following location http://sourceforge.net/projects/dos2unix/?source=dlp. Once the tool is downloaded, fix the line feeds by issuing the following command in a command window:

>C:\temp\bin\unix2dos.exe server.js)

Now let’s change the connection string to connect to your MongoLab Instance. Navigate to these lines in the file which specify connection to the local Mongo database:

// Connect to MongoDB
mongoose.connect('mongodb://127.0.0.1:27017/test' );

Copy and paste the MONGOLAB_URI connection string you copied earlier:

// Connect to MongoDB
// original
// mongoose.connect( 'mongodb://127.0.0.1:27017/test' );
// new one to connect to mongolab service on Azure
mongoose.connect('[your connection string]' );

The new connect command should look something like this:

mongoose.connect('mongodb://BackChannelDB:KH566upW12lGvw5HCft8YqQMrsOXSF1CDn9RLyJVMYQ-@ds031108.mongolab.com:31108/BackChannelDB' );

Once the edited file is saved, your  get_tweets application is now set up to collect twitter items and post them to the MongoDB server! To test this, open a new command prompt window in the Virtual Machine and type the following commands:

C:\>cd C:\BackChannelApp\get_tweets
C:\BackChannelApp\get_tweets>node server.js

This should get the get_tweets application running. If successful, in a few seconds, you should see log messages in the command prompt listing tweets being printed in the console.  Here’s an example:

For further confirmation, let’s make sure that twitter items are being added to MongoLab by checking our MongoLab instance.

In Internet Explorer, open the Windows Azure Portal. Navigate to ADD-ONS and select the MongoLab App Service. Click Manage from the lower toolbar.  This will take you to the MongoLab site and open the page for the MongoLab database.

Set up the tweet_socketio_service

Setting up the second Socket.IO service to broadcast tweets is just as easy as get_tweets.  As before, we first set the dependencies.  Open a new command prompt window on the virtual server and type the following commands to install the dependent node.js packages:

C:\>cd C:\BackChannelApp\tweet_socketio_service
C:\BackChannelApp\tweet_socketio_service>npm install mongolian
C:\BackChannelApp\tweet_socketio_service>npm install mongoose
C:\BackChannelApp\tweet_socketio_service>npm install socket.io

We need to change the MongoDB connection string in the Socket.IO application as well. Open tweet_socketio_service\app.js in notepad and make the same edits made to the tweet_socketio_service\server.js file.  Navigate to these lines in the file which specify connection to the local Mongo database:

// Connect to MongoDB
mongoose.connect('mongodb://127.0.0.1:27017/test' );

Copy and paste the MONGOLAB_URI connection string you copied earlier:

// Connect to MongoDB
// original
// mongoose.connect( 'mongodb://127.0.0.1:27017/test' );
// new one to connect to mongolab service on Azure
mongoose.connect('[your connection string]' );

The new connect command should look something like this:

mongoose.connect('mongodb://BackChannelDB:KH566upW12lGvw5HCft8YqQMrsOXSF1CDn9RLyJVMYQ-@ds031108.mongolab.com:31108/BackChannelDB' );

 (As before, if the line endings of the file are incorrect, you may need to fix linefeeds by converting the file from Unix format to Windows format using unix2dos tool)

Nest, we start app.js in node.js to enable the MongoDB connection via socket.io.  We do all this by typing two words in a command prompt! 

Open a new Command Prompt and type the following lines:

C:\>cd C:\BackChannelApp\tweet_socketio_service
C:\BackChannelApp\tweet_socketio_service> node app.js

You should see the following

Setting up the Firewall and Endpoints

All our applications are now running on the Virtual server.  Next, we need to grant access to transfer data over TCP in both the Firewall and the Endpoints of the Virtual Machine.

From the Virtual Server’s Start Menu, select Windows Firewall with Advanced Security.

Right click Inbound Rules in the left column and then select New Rule.

Select Port and press Next.

Under Specific Local Ports, type 8000.

Select the defaults for the next two screens and then provide the name Conference BackChannel Application.

Using Internet explorer, navigate to the Windows Azure Management Portal.

Select the Virtual Machine tab, then select the Virtual Machine we created

Click on the virtual machine name and select the Endpoints tab.

Click Add from the lower toolbar and then select Add Endpoint, if not already selected, and navigate to next tab using right arrow at the bottom of the right of the page.

Name the endpoint, select TCP as the protocol, and set both the public and private port to 8000. Select the check mark at the bottom right of the page to save the rule.

The finished endpoint configuration should look like this:

Deploying and Running the Web Client using a Windows Azure Web Site

We will now deploy the HTML page that acts as a client for the purposes of this tutorial. The Web client reads data written by the tweet_socketio_service and displays the tweets in a Web browser.

There are two primary steps in deploying the Web client:

1.      Create a new Windows Azure Web Site

2.      Deploy the Web client code using GIT

Create the Windows Azure Website
Return to the Windows Azure Management Portal. In the command bar at the bottom of the page, select New:

Select Web Site then Quick Create. 

Enter a unique URL name and select a region. Click Create Web Site in the bottom right of the page to create the Windows Azure Web Site. Once the web site status changes to Running, click on the site name to view the details of the site. Click Reset your deployment credentials to create credentials for the web site admin.

Enter a password string in New Password and Confirm Password and click check mark at the bottom right of the dialog.

Once you have created the Azure website and credentials, go to the management portal. Follow Web Sites > your website > Dashboard.

Click “Setup up deployment from source control” link located on the right hand side.

Select Local Git Repository.

Go to the Deployments tab for your Azure website and copy the GIT URL from the panel.

Deploying the Azure website using Git

Deploying the site involves three steps

1.      Download and install Git

2.      Make changes to your file and commit your local files

3.      Add a remote Windows Azure repository and push your files

To understand the following steps in more detail, a more complete tutorial on publishing with Git can be found here.  For now, we’ll show you the basic steps required to publish this Web client to your Windows Azure Web Site using Git.

Download and install Git

If you already have a favorite Git client, you can skip this step.  Otherwise, open a Command Prompt in your virtual machine and run the following code:

C:\users\ConfAdmin>cd C:\BackChannelApp
C:\BackChannelApp>npm install git -l

This will install Git on your virtual machine using NPM (which we installed with node.js).

Create a GIT repository and commit your local files

Now let’s initialize our Git repository. In a Command Prompt Windows on the virtual machine, type the following:

C:\BackChannelApp>git init

The Web client uses the index.html file extracted from the zip package.  We need to change two lines in index.html so that the Web client can securely access the Virtual Machine.

Locate the index.html file in the C:\BackChannelApp directory on the virtual machine, and open it in notepad.  We need to use the DNS address of your virtual machine instead of “localhost” in the following two lines.

<script src="http://localhost:8000/socket.io/socket.io.js"></script>
…
    var socket = io.connect('http://localhost:8000');

These lines should be changed to use the DNS address of your virtual machine. 

To get the DNS of your Virtual Machine, visit the Windows Azure Management Portal, navigate to  your virtual machine, then open the Dashboard tab to find the DNS name in the quick glance portion on the right. There should be a link to the website from the Dashboard.

The updated code should look something like this when finished:

<script src="http://ConfBackChannel.cloudapp.net:8000/socket.io/socket.io.js"></script>

…
    var socket = io.connect('http://ConfBackChannel.cloudapp.net:8000');

Next, we add the files we want to place in our Git repository and commit them to the branch. In a command prompt on your virtual machine, type the following code:

C:\BackChannelApp>git add index.html
C:\BackChannelApp>git commit –m "Adding index.html to the repo"

Git should return a response similar to:

Add the remote Windows Azure repository and push your stuff

Type the following in a command prompt on your virtual machine by replacing [your GIT URL] with the actual url from the Azure website dashboard. When prompted, enter the deployment password.

C:\BackChannelApp>git remote add azure [your GIT URL]

The commands should look like this:

git remote add azure https://ConfAdmin@confbackchannel.scm.azurewebsites.net:443/ConfBackChannel.git

Next, type the following command to push the file to the Windows Azure Web Site:

C:\BackChannelApp>git push azure master

Git should provide a response something like this:

Counting

.

Compressing

.

Writing

.

Total

)

remote

.

remote

.

remote

.

remote

.

remote

.

To [your GIT URL]

*

 master

Viewing the Application in a Browser

Open a browser and navigate to [WebsiteName].azurewebsites.net.  You should see tweets based on the selected default twitter @IDs and #Hashtags displayed on this website.  Here’s what you should see:

Conclusion

Congratulations!  At this point your multi-tier cloud application is set up on Windows Azure.  You have assembled a MongoLab instance as a data repository, a virtual machine collecting and broadcasting tweets from Twitter using node.js and Socket.IO, and a Web client displaying the tweets broadcasted from the virtual machine.   Try it out yourself, and let us know what you think!  Add your suggestions, responses, questions, or anything else in the comments below!

The post Tutorial: Building a multi-tier cloud application on Windows Azure using MongoLab, node.js, and Socket.IO appeared first on MS OpenTech.