This tuorial is about socket programming in NodeJs. Here we will be using socket.io and express Js to create a sample chat application. Using socket.io library for websocket connection is very simple and it is a very powerful javascript library for realtime web applications.Here, we will be creating an application where there will be a server and a client communicating with each other over websocket.
What is Socket.io
Socket.IO is a JavaScript library that provides realtime, bi-directional communication between clients and server ober websocket protocol. It has both client and server included in itself. The client side runs on browser whereas the server side requires NodeJs to run but it does not really require to have a deep knowledge of NodeJs to get started. Just include the socket.io library at server and client side and write few lines to emit and listen the different events raised by the library.
Environment Setup
First of all it is required to have Node JS and NPM installed on your machine. You can visit the Node Js official website to download and install it or follow this link to set up on your local machine.Now once this setup is done we can install express and socket.io library in our machine to get started.Express Js is a lightweight, open source framework for Node Js. Similarly, npm is a package manager for the JavaScript programming language. It is the default package manager for Node.js.
Now let's create our chat application. Execute following commands to create a blank project and include all the required dependencies such as socket.io and express required for our project.
C:\D\workspaces\node>mkdir chat-app C:\D\workspaces\node>cd chat-app C:\D\workspaces\node\chat-app>npm init C:\D\workspaces\node\chat-app>npm install socket.io express --save npm install socket.io --save
Node Js Express App
Now we will create a sample node app using express to serve a static .html file.Import the project in your favourite IDE and add a file name index.js add following lines in it.
var app = require('express')(); var http = require('http').Server(app); app.get('/', function(req, res){ res.send('<h1>Hello world</h1>'); }); http.listen(3000, function(){ console.log('listening on *:3000'); });
Above code will initialise express and create a server that is listening on port 3000 and for a request at localhost:3000 Hello world will be served.
Now let us modify the code to serve a html.Create chat.html and add following lines to it.
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
This will create a simple form to enter message in the client side.
Integrating Socket.io
Now add following lines in index.js which will initialize a new instance of socket.io by passing the http object.
var io = require('socket.io')(http);
Whenever a client gets connected to a socket a connection event is raised and following code will listen to this event and logs the event for every new connection.
io.on('connection', function(socket){ console.log('a user connected'); });
Now let us integrate socket in the client side. Add following lines in chat.html before the
