Sunday, June 30, 2013

Node.JS tutorial - Create a simple chat with socket.io module - Part 1

Source Code: 
https://github.com/ohadinho/chat-sample

Previous Parts:
Part 1

In my last post (http://avenshteinohad.blogspot.co.il/2013/05/nodejs-behind-scenes-whats-difference.html) I have introduced Node.JS.
I wrote about why and when we should be using it. As mentioned, one of the most popular usage is a realtime application.
In this post, we will build a very simple chat with Node.JS and some other modules (= libraries) which will be explained later.


Installing Node.JS & Express Module


I will refer to Windows environment in my post.

1. First step is very easy. Log in to: http://nodejs.org/download/ , and download node.js for your appropriate platform.

2. After downloading and installing node.js in your machine, run 'cmd' and go to node.js folder.
For example: "cd C:\Program Files\nodejs".

3. Now we will install express module using npm.

npm is the web repository which keeps node.js packaged modules. You can look for modules here: https://npmjs.org/ .
Any package can be installed in your node.js app using "npm install *package-name*" from the root folder of your app using command-line.

express is a minimalist web framework for node. It's a very common and popular module among node developers, and it organizes your web app into an MVC architecture on the server side. You can look on express API here:

Executing "c:\Program Files\nodejs\npm install -g express", will download and install express module in your node installation folder.

4. "express *node-app-folder*" will create a template of node application using express.
We want to have hogan.js engine support in our chat node app, so add '-H' option and execute: "c:\Program Files\nodejs\express -H c:\apps\chat-sample".
hogan is a templating engine developed at Twitter. We will use in order to inject data into our chat template view.

5. Now it's time to look at our sample app.
Run "c:\apps\chat-sample\node app.js".
You should see as a result:
"Express server listening on port 3000" - That ofcourse means that your web server is up and running!

6. Open your web browser and navigate to: "http://localhost:3000/".
That is what you are suppose to see:


Installing socket.io module

I chose "socket.io" module for communicating between the clients and the server.
"socket.io" is a cross-browser module for real-time apps. It's very easy to use and it have a simple broadcasting mechanism.
It's important to mention that socket.io doesn't support broadcasting between multiple servers.
In order to achieve multiple servers support, you'll have to use "redis" database module.
"Redis" is a fast database, and it's module has a built-in pub-sub mechanism.
In this tutorial, we will only use socket.io, thus you can use only one server to serve the chat application.
We will install also "ws" module, because "ws" is a dependency of "socket.io-client", and the last is a dependency of "socket.io".

1. Open cmd, go to: "C:\apps\chat-sample" and run "npm install ws".
2. After ws module was installed, run "npm install socket.io".

Installing Eclipse and Nodeclipse plugin


We would use Eclipse IDE and Nodeclipse plugin in order to develop out chat app.

1. Go to: "http://www.eclipse.org/downloads/" and download "Eclipse IDE for Java EE Developers".
2. Extract the downloaded zip to: "C:\Program files\"
3. Run eclipse by executing "eclipse.exe" from the installation folder.
4. Go to Help --> Eclipse Marketplace, and search for "Nodeclipse". Install it, and restart eclipse.

Adding our chat application to eclipse workspace


Actually, we could have created a new node application straight from eclipse, but I thought it's a good practice doing it from command line.
It's important to mention that modules still can only be installed from command line. You cannot do it within eclipse environment.

1. Go to: File --> New --> Node Project










2. Project Name: 'chat-sample', and use the location of the app we have created: 'c:\apps\chat-sample'.




















3. Run the app by Right-Click on "app.js" --> Run as --> Node Application










Summary


That's it !
We have installed:
1. Node.js with some modules
2. Eclipse and Nodeclipse plugin in order to have a decent development environment

and at last we have added our app to our new development environment.

In the next part we will start writing some code for our chat application.

Thank you Blogger, hello Medium

Hey guys, I've been writing in Blogger for almost 10 years this is a time to move on. I'm happy to announce my new blog at Med...