Most Amazing Videos Clips - Youtube | Amazing Internet Dose

Socketio multi popup chat




For installation and other steps pls refer other pages.
----------- akash(owner) and pavan are friends so u need a room id:101

akash(owner) and Kishore are friends too so they need a room id:102

if Kishore(owner) and pavan are friends they need room id as 103

pavan(owner) and Kishore are friends means room id as 103

Change id or name and browse the html 

Index.html
===========

<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
.label {
font-weight: 800;
}
.box {
border:1px solid #d3dadd;
width: 500px;
margin-top: 10px;
}
.header, .footer {
min-height: 30px;
background-color: #d3dadd;
width: 100%
}
.body {
min-height: 300px;
background-color: #fff;
width: 100%;
}
.close {
cursor: pointer;
float: right;
}
</style>
</head>
<body>
<span>Owner:</span>
<div class="owner label">Kishore</div>
<span>Friends:</span>

<a href="" id="101" class="friend label">akash</a> 
<a href="" id="102"  class="friend label">pavan</a>

<!-- <input type="text" class="roomname" placeholder="Create Room id" /> -->
<div class="area"> </div>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script type="text/javascript">

var socket=io('http://localhost:8080');

// on connection to server, ask for user's name with an anonymous callback
  socket.on('connect', function(){
    // call the server-side function 'adduser' and send one parameter (value of prompt)

      var owner=$('.owner').text();
      socket.emit('adduser', owner);


  });



$(document).ready( function(){

      $(document).on('click','a', function(e){
       e.preventDefault();

       var friend=$(this).text();
       var roomname=$(this).attr('id');
       socket.emit('create_room', { friendname: friend,roomname:roomname});
       //socket.emit('add_to_room', friend);

        $(document).on('click','.close', function(){

        $(this).prev('div').find('.box').hide();

        });

   


      });

      socket.on('room_created',function(data){
        var friendname="";
        var roomname="";
          friendname = data.friendname
           roomname = data.roomname
           //alert(roomname);

            if($('#'+roomname+'_box' ).length == 0){
         

           $('.area').append("<div id='"+roomname+"_box' class='box'><div class='header'>"+friendname+":"+roomname+"<span id='"+roomname+"' class='close'>X<span></div><div id='"+roomname+"_msg' class='body'></div><div class='footer'><input id='"+roomname+"_txt' class='msg_txt'/><button id='"+roomname+"' class='send_btn' >Send</button></div></div>");

            }
      });

        socket.on('updatechat',function(data){
         var friendname = data.friendname
          var room_name = data.room_name
          var msg_data=data.msg_data

           $("#"+room_name+"_msg").append("<li>"+msg_data+"</li>");

      });

$(document).ready( function(){
   $(document).on('click','.send_btn', function(){
         var room_name="";
         room_name= $(this).attr('id');
         //alert(room_name);
 
        //var roomname=$('.roomname').val();

      var friendname=$('#'+room_name).text();
 
        var msg_data=$("#"+room_name+"_txt").val();
     
     
        var owner=$('.owner').text();

        socket.emit('send_msg',{ friendname: friendname, room_name: room_name,msg_data:msg_data,owner:owner });

        $("#"+room_name+"_txt").val('');

        });

     $(document).on('click','.close', function(){
         var room_name="";
         room_name= $(this).attr('id');
         $('#'+room_name+"_box").remove();

          socket.emit('close_chat',room_name);
      });

 
});



});
</script>
</body>
</html>


Index.js
========

var app=require('express')();
var http=require('http').Server(app);

var io=require('socket.io')(http);
var users={};


app.get('/',function(req,res){

res.sendFile('index.html');

});



// usernames which are currently connected to the chat
var usernames = {};
// rooms which are currently available in chat
var rooms = [];

io.sockets.on('connection',function(socket){

// when the client emits 'adduser', this listens and executes
socket.on('adduser', function(username){
// store the username in the socket session for this client
socket.username = username;
// add the client's username to the global list
usernames[username] = username;
console.log("Owner connected:"+ socket.username);

});


// when the client emits 'adduser', this listens and executes
socket.on('create_room', function(data){

var friendname = data.friendname
         var roomname = data.roomname
// store the room name in the socket session for this client
socket.room = roomname;
// send client to room 1
socket.join(roomname);

console.log("Room Created:"+ roomname);

//socket.username = friend;
console.log("Friend you clicked:"+ friendname);

socket.emit('room_created',{ friendname: friendname, roomname: roomname });


});

socket.on('send_msg', function(data){
 var friendname = data.friendname
          var room_name = data.room_name
          var msg_data=data.msg_data
          var owner=data.owner

          console.log("On Send Msg:"+friendname+" "+room_name+" "+msg_data+" "+socket.username);
          //socket.join(room_name);
          io.sockets.in(room_name).emit('updatechat',{ friendname: friendname, room_name: room_name,msg_data:msg_data});

});

// when the user disconnects.. perform this
socket.on('disconnect', function(){
console.log("User leaved:"+socket.username);

// remove the username from global usernames list
delete usernames[socket.username];

socket.leave(socket.room);
});

// when the user disconnects.. perform this
socket.on('close_chat', function(room_name){
console.log("User leaved:"+socket.username);
 socket.leave(room_name);
 delete usernames[socket.username];
});

});

http.listen(8080, function(){

console.log("Listening at 8080");

});