Node Express JS: Socket IO Module Example

Before reading post, please go through my previous posts: “Express JS WebApplication with Enide Studio 2014 IDE” and “Express JS Routings with Enide Studio 2014 IDE”.

Introduction to Socket IO

Node JS: Socket IO Module is used to develop Real-time Client-Server Communication applications. It internally uses “WebSocket” Programming model to provide real-time two-way communication between Client and Server.

We can observe that the following Technologies offer WebSocket Programming to implement this kind of applications.

  1. HTML5 WebSocket
  2. Java EE 7 WebSocket API
  3. Node JS:Socket IO Module

Difference between Traditional HTTP and WebSocket Approaches

Traditional HTTP Approach:
We have our old and Traditional HTTP Request-Response Stateless Approach to provide Communication between Client and Server. But it follows “Pushing” model that means when client sends a request to Server, Server pushes the response to the Clients.

WebSocket Approach:
We can use WebSocket Approach too to provide Communication between Client and Server. However unlike Traditional HTTP Request-Response Stateless Approach, WebSocket Approach provides Communication between Client and Server by using “Pulling” model that means Server always pulls data to Clients. That’s why is is more efficient and faster approach to provide Client-Server Communication.

Advantages of Socket IO(WebSocket) Programming:

  1. Faster and Two-way Communication
  2. Cross-Browser Support
  3. Cross-Platform Support
  4. Platform independent web framework

Socket IO Setup

Unlike some Node JS Default Modules like “npm”,”http”,”events” come with Node JS Platform basic installation (No need of separate steps to install these modules), Socket.IO does not come with as Node JS Default modules. We need to install it manually.

We have already discussed on “How to install a Node JS Module” using “node install” command. If you are not familiar about this command, please go through my previous post : “NPM install update and uninstall example”

To install Socket.IO globally
Before staring Express JS Development, first and fore most step We need to do is use “npm install” command to install Express JS module

Here “socket.io” means Socket IO Module and “-g” means install Socket.io Module globally.

To verify installation

After Socket IO Module installation is done, we need to check whether this module is installed successfully or not. If it is installed successfully, we can find a new folder at
C:Users[Windows_USerName]AppDataRoamingnpmnode_modulessocket.io as shown below:

socketio_install-450x195

Socket IO Example

    • Create a Node.js:Express JS Project with default settings: “socketio” (Please refer my previous post “Express JS WebApplication with Enide Studio 2014 IDE” for more details.)
    • Update “package.json” file with “socket.io” module dependency.

Default package.json

Updated package.json

  • Observe default “node_modules” folder

If we observe our project now, it contains all default Express JS Module libraries as shown below:

socketio_default_node_modules

  • Update “node_modules” with “socket.io” library.

In order to use Socket IO module library, we need to execute the following command at our project root directory:

Here “–save” option means retrieve “socket.io” library from our Local repository and add this to our project. This is something similar to adding JAR files to our Java Project.

Open command prompt at our project root directory and execute above command:

socketio_default_node_modules

NOTE:- Please ignore those errors or warnings.

Now refresh your “socketio” project in Enide IDE Studio 2014 IDE and observe newly added socketio library to our project as shown below:

socketio_updated_node_modules

  • Update app.js with the following content:

app.js

Code Explanation

  1. Line No 1-9, importing all required dependency Node JS modules into our application
  2. Line No 12-13, importing Routings into our application
  3. Line No 16, Create Express JS Application object
  4. Line No 17, Set Express WebServer port to listen. This is how we can set our desired port number.
  5. Line No 20-21, Define our application View Template Engine i.e. JADE
  6. Line No 33, Create an HTTP Server
  7. Line No 34, Wrap HTTP Server with Socket IO(WebSocket)
  8. Line No 36-41, io.sockets.on() to open a WebSocket connection between Client and Server.
  9. Line No 47, Export our application.
  • Update index.jade file with the following content:

/views/index.jade

  • Update index.js file with the following content:

/routes/index.js

  • Final project structure looks like this:
  • socketio_updated_node_modules

Execute Socket IO Example

  • Open command prompt at our project root directory and execute below command:

  • Run Socket IO Example and observe the output

Access application using this URL: https://localhost:3000/

socketio_updated_node_modules

 

To see WebSocket power Internally, please use Mouse Right Click and Select “Inspect Element” as shown below:

socketio_updated_node_modules

Select “Console” tab. Type some text in “Textbox” and observe the Console output as shown below:

socketio_updated_node_modules

Our application sends each and every character immediately to server. That’s the beauty of WebSocket Programming.

That’s it about Express: Socket IO Module Example.

In my next post, I will give you another Socket IO Module example without using Express JS WebFramework.

By admin

Leave a Reply

%d bloggers like this: