It was about time to play with NodeJS. It definitely WOW’ed me interms of performance and simplicity. Today I am going to share my experience building a chat client using NodeJS. This is one of the famous “Hello World” type application demo’ed.
If you haven’t already, you can setup node js by following the steps outlined on their website.
Creating simple http server
Let me demonstrate how easy it is to create a simple http server with node.
Create a js file and name it “server.js” and put the contents below:
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'}); + '\n'
res.end('Hello World\n');
}).listen(8080, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8080/');
What we are doing above is that, we are requiring http module and listening on port 8080.
When a request comes, we are responding with the famous “Hello World” text.
To start the server simply run the following command:
$ node server.js
Now on your browser, navigate to “http://localhost:8080 ” , walla.. “Hello World”! (Note: you can go to any url on that port will respond back with same response, like http://localhost:8080/foo/bar will still resolve to same response.)
“npm” – Node Packaged Modules
Node comes with a really nice package manager called npm. If you are familier with package managers such as apt-get, yum, brew etc, you will find it right at home.
To install any package just type “npm install ”
For instance, to install “socket.io” module we would run the following:
$ npm install socket.io
This will create a directory named “node_modules” and the requested module is pulled in there.
Alright, now we have enough arsenal to get started with the our topic.
Let’s Chat, shall we?
To start, lets create a directory so we can put our resources in there. Lets name it “NodeChat”.
Inside the directory let’s create a file with name, ‘server.js’. We will edit this in a bit.
On the command line run the following commands to install modules required by our program.
$ npm install socket.io $ npm install node-static
socket.io is used for the websocket communication we will have between server and the browser.
node-static will let us serve static files via nodejs.
Now we have that lets hack-away our server.js.
To start lets say that we will just “post message” to the server and server will broadcast it to all the clients.
To start, let’s build a web server component. As we did in above example we will do the following:
var app = require('http').createServer(handler),
io = require ('socket.io').listen(app),
static = require('node-static');
Here we are building a web server. The “handler” is a function I will show in a bit. The “socket.io” will listen on the http server we just created.
Now, we can add the following:
// Make all the files in the current directory accessible
var fileServer = new static.Server('./');
app.listen(8080);
That piece is self explanatory. Now to the important piece, we will add the handler and the socket.io stuff.
Below is the complete contents of the file when we will be done.
//Node.js Chat client Server
var app = require('http').createServer(handler),
io = require ('socket.io').listen(app),
static = require('node-static');
// Make all the files in the current directory accessible
var fileServer = new static.Server('./');
app.listen(8080);
function handler(request, response) {
request.addListener('end', function () {
fileServer.serve(request, response);
});
}
io.sockets.on('connection', function(socket) {
socket.on('postMessage', function(data){
socket.broadcast.emit('message', data);
socket.emit('message', data);
});
});
Here, the function handler is simply delegating to serve the static content requested.
Important part is the io.sockets piece. When a client fires the ‘postMessage’ event, we will run the closure attached to the event on the server. In this case, we simply trigger the ‘message’ event along with the data on all the active clients except for the socket that trigged it. To echo the message back, we trigger the ‘message’ event on the socket itself with the data.
Now we have the backend ready lets work on the Front-end.
Create “index.html” and paste the following html code.
<!DOCTYPE HTML>
<html>
<head>
<title>Live Chat Powered by Node.js</title>
<script src="/socket.io/socket.io.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var socket = io.connect('http://localhost:8080');
//Bind the "send" button to do a post
$("#send-btn").bind('click', function() {
socket.emit('postMessage', {text: $("#message-box").val()});
$("#message-box").val('');
});
//on socket message from server
socket.on('message', function(data) {
$("#message-board").append( data.text + "<br/>");
});
});
</script>
<style>
#message-board {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="content">
<div id="message-board"></div>
<input id="message-box" type="text" size="100" placeholder="Type a message..."/>
<button id="send-btn">send</button>
</div>
</body>
</html>
Here we have simple page with one text box and one button.
Using jQuery, when the page is loaded, we create a socket connection to the server.
When ‘click’ event is fired, we fire the ‘postMessage’ event with the text value from the ‘message-box’ input. and we clear the box for user to type new message.
When the server fires the ‘message’ event on our local client script will simply append the text on the “message-board” div.
Here you go we have a very simple Chat client.
I have added some flare to it, you can find the code at https://github.com/manijshrestha/NodeChat
Manij Shrestha 