Node.js is an open source Cross-platform run time environment for developing server side and network apps quickly like real time chat

Node.js is the best technology for building real time applications using javascript. This tutorial shows how to build a web chat application, using ExpressJS and Socket.io.
To make real time chat we are going to do as follow

Frist of all create a folder in nodejs environment.
In the tutorial i have folder name as livechat.

open the command line and write the following code :

1) cd livechat

2) npm install express

3) npm install socket.io

 

Server.js

var port = 3000;

var app = require(‘express’)();
var server = require(‘http’).createServer(app);
var io = require(‘socket.io’).listen(server);

console.log(“Listening on port ” + port);
server.listen(port);
app.get(‘/’, function (req, res) {
res.sendfile(__dirname + ‘/index.html’);

});

io.sockets.on(‘connection’, function (socket) {
socket.on(‘adduser’, function(username){
socket.username = username;
socket.join(1);
socket.emit(‘updatechat’, ‘SERVER’, ‘Welcome ‘+username);
socket.broadcast.emit(‘updatechat’, ‘SERVER’, username + ‘ joined the room’);

});

socket.on(‘chatmsg’, function (data) {
io.sockets.in(1).emit(‘updatechat’,socket.username, data);

});

socket.on(‘disconnect’, function(){
socket.emit(‘updatechat’, ‘SERVER’, socket.username +’ left the room’);
});
});

index.html :

<script src=”socket.io/socket.io.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script>
<style>

body { font: 13px Helvetica, Arial; }
.chatform { background: #000; padding: 3px; bottom: 0; width: 100%; }
.chatform input { border: 0; padding: 10px; width: 85%; margin-right: .5%; }
.chatform #buttonsend { width: 13%; background: rgb(255, 109, 24); border: 2px solid #fff; padding: 10px;color:#fff }
#sbtn { width: 21%; background: #C57018; border: 2px solid #fff; padding: 10px;color:#fff }
#username {border: 0; padding: 10px; width: 75%; margin-right: .5%; border:1px solid #ccc;}
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#login{padding:300px;padding-left:450px}
#login1 {width:350px; height:80px; border:3px solid #ccc;padding:10px; box-shadow:2px 1px 2px 1px; #ccc}
#process1{float:left;width:56%;height:400px;overflow:scroll-y;padding:10px;border:1px solid #ccc;}
</style>
<script>
var URL = window.location.protocol + “//” + window.location.host;
console.log(“Connecting to ” + URL);
var socket = io.connect(URL);
socket.on(‘connect’, function(){
$(‘#process’).hide();
$(‘#login’).show();
$(‘#sbtn’).click(function(e){
$(‘#process’).show();
$(‘#login’).hide();
$user=$(‘#username’).val();
if($user.length>0){
socket.emit(‘adduser’, $user);
}else if($user.length==0){

$(‘#login’).show();
$(‘#msg’).html(‘Please enter a user name’);
$(‘#msg’).css({‘color’:’red’});
$(‘#process’).hide();
}

});
$(‘#username’).keypress(function(event){
var x = event.keyCode;
$user=$(‘#username’).val();
if(x == ’13’){
if($user.length>0){
socket.emit(‘adduser’, $user);
$(‘#login’).hide();
$(‘#process’).show();
}else if($user.length==0){

$(‘#login’).show();
$(‘#msg’).html(‘Please enter a user name’);
$(‘#msg’).css({‘color’:’red’});
$(‘#process’).hide();
}

}

});

});
socket.on(‘updatechat’, function (username, data) {
$(‘#conversation’).append(‘<b>’+username + ‘:</b> ‘ + data + ‘<br>’);
});

$(function(){
$(‘#buttonsend’).click( function() {
var message = $(‘#data’).val();
$(‘#data’).val(”);
socket.emit(‘chatmsg’, message);
});
$(‘#data’).keypress(function(e) {
var message = $(‘#data’).val();
var y = e.keyCode;
if((y == ’13’) &&(message.length!=0) ) {

$(‘#data’).val(”);

socket.emit(‘chatmsg’, message);
}
});
});

</script>
<div id=”login”>

<div id=”login1″>
<span id=”msg” style=”padding-left:80px;”></span></br>

<input type=”text” id=”username” value=”” placeholder=”Enter a user name”/>
<input type=”button” id=”sbtn” value=”Login”/>
</div>

</div>
<div id=”process”>

<div id=”process1″>
<div id=”conversation” style=”height:340px;overflow:auto;padding:5px;”></div>
<div class=”chatform”>

<input id=”data” />
<input type=”button” id=”buttonsend” value=”Send”/>
</div>

</div>

</div>

 

To run the server :

type in command line nodejs server.js node server.js

Now open browse and type localhost:3000

Leave comment

Your email address will not be published. Required fields are marked with *.