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");
});
