In this app i already have a chat bar and i can already see all online users, but i want to implement that a user can click on another user's name on the left column (which shows all logged users), once he clicked on a username a little window will appear and in this window there is a submit button and an input text to be filled with a message, once submit button has been clicked the message should be sent to the other user. i need some help how can i implement that????
here is my index.html
enter code here
<head>
<html>
<title>Chat</title>
<script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body{
margin-top: 30px;
}
.chat-messages{
height: 300px;
overflow-y:scroll;
border: 1px solid black;
}
#messageForm , #chat{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well" id="userwall">
<h3>Online Users</h3>
<ul class="list group" id="users"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat-messages" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<!--<div id="chat-messageForm">
</div>
<textarea class="chat-textarea" placeholder="Type your message"></textarea>-->
<textarea class="form-control" id="message"></textarea>
<br/>
<input type="submit" class="btn btn-primary" value="Send Message"/>
</div>
</form>
<form id="userForm">
<div class="form-group">
<label>Enter Username</label>
<input class="form-control" style="width:200px;" id="username"/>
<br/>
<input type="submit" class="btn btn-primary" value="Enter Username"/>
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
var $userForm = $('#userForm');
var $username = $('#username');
var $users= $('#users')
var $userwall = $('userwall')
$messageForm.keypress(function(e){
if(e.which == 13){
e.preventDefault();
socket.emit('send message',$message.val());
$message.val('');
}
});
socket.on('new message',function(data){
$chat.append('<div><strong>'+data.user+':'+'</strong>'+data.msg+'</div');
});
$userForm.submit(function(e){
e.preventDefault();
if($username.val() == ''){
alert("Please enter username!");
}
else{
socket.emit('new user',$username.val());
$userForm.hide();
$messageForm.show();
$chat.show();
$userwall.show();
alert("Welcome"+':'+$username.val());
}
});
socket.on('get users',function(data){
var html="";
for(i=0; i<data.length;i++){
html += '<li class="list-group-item">'+data[i]+'</li>';
}
$users.html(html);
});
socket.on('privateMessage', function(to, message) {
var id = connectedClients[to];
io.sockets.socket(id).emit('sendPrivateMessage', socket.username, message);
});
});
</script>
</body>
</html>
my server.js
var express = require ('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
connections = [];
users=[];
server.listen(process.env.PORT || 3000);
console.log('server running...');
//create a route
app.get ('/', function (req, res){
res.sendFile(__dirname+'/index.html');
});
io.sockets.on('connection',function(socket){
connections.push(socket);
console.log('Connected: %s sockets connected', connections.length);
//disconnect
socket.on('disconnect',function(data){
users.splice(users.indexOf(socket.username),1)
updateUsernames();
connections.splice(connections.indexOf(socket),1);
console.log('Disconnected: %s sockets connected',connections.length);
});
//send message
socket.on('send message',function(data){
console.log(data)
io.sockets.emit('new message',{msg: data, user: socket.username });
});
//new users
socket.on('new user',function(data){
socket.username = data;
users.push(socket.username);
updateUsernames();
});
function updateUsernames(){
io.sockets.emit('get users',users);
}
//PM USERS
});
