var socket = io.connect(),
userEnterDiv = document.getElementById('userEnterDiv'),
userNameErrorMsg = document.getElementById('userNameErrorMsg'),
userNameInput = document.getElementById('userNameInput'),
enterBtn = document.getElementById('enterBtn'),
mainDiv = document.getElementById('mainDiv'),
usersDivContainer = document.getElementById('usersDivContainer'),
displayUsers = document.getElementById('displayUsers'),
chatDivContainer = document.getElementById("chatDivContainer"),
chatOutput = document.getElementById('chatOutput'),
typingOutput = document.getElementById('typingOutput'),
msg = document.getElementById('messageTextArea'),
chatBtn = document.getElementById('chatButton');
enterBtn.addEventListener('click', function(e){
e.preventDefault();
socket.emit('new user', userNameInput.value, function(data){
if(data) {
userEnterDiv.style.display = "none";
mainDiv.style.display = "block";
} else {
userNameErrorMsg.innerHTML = 'Error: try again';
}
});
});
var div_ele=displayUsers.childNodes;
socket.on('usernames', function(data){
displayUsers.innerHTML = '';
var htmlStr = '';
for(var i=0; i<data.length; i++){
htmlStr = '<p>' + data[i]+'</p>';
var innerDisplayUsers = document.createElement('div');
innerDisplayUsers.id = data[i];
innerDisplayUsers.innerHTML = htmlStr;
displayUsers.appendChild(innerDisplayUsers);
}
for (var i=0; i<div_ele.length; i++) {
div_ele[i].addEventListener('click', chooseUserToChatWith(div_ele[i]));
}
});
function chooseUserToChatWith(data){
return function(){
console.log(data); console.log(data.id);
chatDivContainer.style.display = "block";
sendMessageToUser(data.id);
};
}
function sendMessageToUser(client) {
console.log(client);
chatBtn.addEventListener('click', function(e) { e.preventDefault();
socket.emit('send message', { 'client': client, 'msg': msg.value} );
msg.value = '';
});
}
msg.addEventListener('keypress', function(){
socket.emit('typing message', userNameInput.value);
});
socket.on('new message', function(data){
chatDivContainer.style.display = "block";
typingOutput.innerHTML="";
var htmlStr = '';
htmlStr += '<p>' + data.sender +': '+ data.message + '</p>';
var innerChatOutput = document.createElement('div');
innerChatOutput.id = data.client;
innerChatOutput.innerHTML = htmlStr;
chatOutput.appendChild(innerChatOutput);
var xH = chatMessagesContainer.scrollHeight;
chatMessagesContainer.scrollTo(0, xH);
});
socket.on('typing message', function(data){
console.log(data + ' typing message')
typingOutput.innerHTML = '<p>' + data + ' is typing message...</p>';
});
var express = require('express'),
app = express(),
server = require('http').createServer(app),
usersNames = {},
io = require('socket.io').listen(server);
server.listen(3000, function(){ console.log('listening port 3000')});
app.use(express.static('public'));
io.sockets.on('connection', function(socket) {
socket.on('new user', function(data, callback){
if(data in usersNames) { callback(false); }
else {
callback(true);
socket.userName = data;
usersNames[socket.userName] = socket;
updateUsersNames();
}
});
function updateUsersNames() {
io.sockets.emit('usernames', Object.keys(usersNames));
}
socket.on('disconnect', function(data){
if(!socket.userName) return;
delete usersNames[socket.userName];
updateUsersNames();
});
socket.on('send message', function(obj){
console.log(obj.client);
socket.broadcast.to(obj.client).emit('new message', {
sender: socket.userName,
message: obj.msg,
client: obj.client
});
});
socket.on('typing message', function(data){
socket.broadcast.emit('typing message', socket.userName);
});
});
What I have tried:
im really stuck on here, hope someone who is more clever than me can do a help please
PM CHAT construction idea was each person can PM to each other by clicking on the username.
lets say Alex, Kate, David enters PMchat.
Alex clicks on Kate and sends private message to her,
soAlex sends a message to KAte, so Only Kate can see the message received from ALex, nobody else, this is not happening here, im bit stuck
used pure javascript, socket io, node js, express module, css/html.