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.

20 comments:

  1. I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly.
    node js developer london

    ReplyDelete
  2. Thank you for sharing valid information about software Nodejs



    nodejs Training in Hyderabad

    ReplyDelete

  3. Thank you for sharing valid information about software Nodejs



    nodejs Training in Hyderabad

    ReplyDelete
  4. This is ansuperior writing service point that doesn't always sink in within the context of the classroom. In the first superior writing service paragraph you either hook the reader's interest or lose it. Of course your teacher, who's getting paid to teach you how to write an good essay, 
    Java training in Chennai

    Java training in Bangalore

    ReplyDelete
  5. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing..
    Believe me I did wrote an post about tutorials for beginners with reference of your blog. 




    Selenium training in bangalore
    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training

    ReplyDelete
  6. I read that Post and got it fine and informative. Please share more like that...Great Article it it's really informative and innovative keep here: Quality web design & development services london with new updates. Its was really valuable. Thanks a lot.

    ReplyDelete
  7. It was a great information and Its really worth reading it. Thanks for posting.
    Node JS Online training

    ReplyDelete
  8. ExpressTech Software Solutions is a nodejs Development Company, where we provide the leading Node JS web development services to our clients across the globe. Contact us: +91-9806724185 or Contact@expresstechsoftwares.com

    ReplyDelete
  9. This is a very nice article, I really like it. It’s informative and helpful for us.
    Thank you for sharing with us.

    seo company in bangalore

    ReplyDelete
  10. I've used and tried to built simple chat using Node.js and Socket.IO, Thanks It's really helped me. Thanks Again

    Web Development Company

    ReplyDelete
  11. This Digital Marketing Training Course in Panchkula transforms you into a complete Digital Marketer with expertise in modules like SEO, Social Media Marketing, PPC, Analytics, Content, Mobile, and Email marketing.
    Digital Marketing Course in Panchkula

    ReplyDelete
  12. Amazing article. It's very useful.
    It looks like you have put lot of work into this.
    SMARS designs jewelry to run along with your ever-changing wardrobe. A piece of Jewelry can either make or break your entire look; therefore, every unique outfit needs a different piece of jewelry to compliment it. But looking at the prices of traditional jewelry, we usually find occasions like festivals or ceremonies to buy it. And these adorable pieces spend most of their lives in the lockers. Komal, the founder of SMARS, understood this gap in the market. Every single piece is limited edition and walks hand-in-hand with trends. Adored by customers from all over the world, we ensure the quality delivery of our high-end, Indian fashion costume jewelry. Shop online for latest collection of Kundan, antique and temple jewelry in India check out necklace sets, earrings, bangles, chokers for girls and many more Indian jewelry sets for women available with free shipping across India.
    Take a look: Chokers For Girls

    ReplyDelete
  13. Informative post, Looking for the best node.js company? Here is the list of Top 10 NodeJS Development Firms which provide CodersNews.

    ReplyDelete

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...