Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

How to make live chat using node.js, socket.io and express

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 Continue Reading


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

Please follow and like us:






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts