socket.broadcast.to(usersNames.... not giving any result, not even on console

[ilhomelv]

server sidecode:
//Server setup
var express = require('express'),
app = express(), //simply one line var app = require('express')();
server = require('http').createServer(app),
usersNames = {},
io = require('socket.io').listen(server);

server.listen(3000, function(){ console.log('listening port 3000')});

//Express Routing as soon as we go to http://host:port this page will be served
// app.get('/', function(req, res){
// res.sendFile(__dirname + '/index.html');
// });
app.use(express.static('public'));

//listen on events coming from client side
io.on('connection', function(socket) {
//user enters onto chat
socket.on('new user', function(data, callback){
if(data in usersNames) { callback(false); }
else {
callback(true);
// we store the username in the socket session for this client
socket.userName = data
// add the client's username to the global list
usersNames[socket.userName] = socket; //userName is key : socket
updateUsersNames();
}
});
//usersNames object keys updated
function updateUsersNames() {
io.sockets.emit('usernames', Object.keys(usersNames));
}
//if user leaves chat, then username removed from UsersNames{}
socket.on('disconnect', function(data){
if(!socket.userName) return; //if there s no username simply return
// remove the username from global usernames list
delete usersNames[socket.userName];
updateUsersNames();
});

// when the user sends a private message to a user.. perform this
socket.on('send message', function(data) {
	console.log("From user: "+socket.userName);
	console.log("To user: "+data.client);
	console.log(usersNames);
  socket.broadcast.to(usersNames[data.client]).emit('new message',
  //socket.to(usersNames[data.client]).emit('new message', //username, msg);
      {
        'sender': socket.userName,
        'message': data.msg,
        'client': data.client
      });
  });

/*
//user sends message from clientside
socket.on('send message', function(data){
console.log(data.client);//prints message receiver's name
console.log(usersNames);
var receiver = data.client;
console.log(receiver);
io.sockets.connected[receiver].emit('new message', {
// io.sockets.emit('new message', {
sender: socket.userName,
message: data.msg,
client: data.client
});
});
*/

socket.on('typing message', function(data){
    socket.broadcast.emit('typing message', socket.userName); //server sends msg to all excluding me
});

});

---

client side code

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');

//Enter to Chat
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';
}
});
});
//display usernames on chat inside div displayUsers
// socket.on('usernames', function(data){
// displayUsers.innerHTML = '';
// for(var i=0; i<data.length; i++){
// displayUsers.innerHTML += ${

${data[i]}

}; // '

' + data[i] + '

';
// //var htmlStr = ${

${nameX}

}; //using Template Literal concept
// }
// });

//choose a person to chat with
var div_ele=displayUsers.childNodes;
socket.on('usernames', function(data){
displayUsers.innerHTML = '';
var htmlStr = '';
for(var i=0; i<data.length; i++){
htmlStr = '

' + data[i]+'

';
var innerDisplayUsers = document.createElement('div');
innerDisplayUsers.id = data[i];// + '-innerDisplayUser';
innerDisplayUsers.innerHTML = htmlStr;
displayUsers.appendChild(innerDisplayUsers);
}
for (var i=0; i<div_ele.length; i++) {
//console.log(div_ele[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);
};
}

//send message to chosen client
function sendMessageToUser(client) {
console.log(client);
chatBtn.addEventListener('click', function(e) { e.preventDefault();
socket.emit('send message', { 'client': client, 'msg': msg.value} );
msg.value = '';
});
}

//add event listener on msg typing
msg.addEventListener('keypress', function(){
socket.emit('typing message', userNameInput.value);
});

//message outputs
socket.on('new message', function(data){
console.log("From: " +data.sender);
console.log("To: " +data.client);
console.log("Message: " +data.message);

chatDivContainer.style.display = "block";
typingOutput.innerHTML="";
var htmlStr = '';
htmlStr += '

' + data.sender +': '+ data.message + '

';
var innerChatOutput = document.createElement('div');
innerChatOutput.id = data.client;
innerChatOutput.innerHTML = htmlStr;
chatOutput.appendChild(innerChatOutput);

//keep scroll on bottom
var xH = chatMessagesContainer.scrollHeight;
chatMessagesContainer.scrollTo(0, xH);

});

//Listen on events
// socket.on('new message', function(data){
// chatDivContainer.style.display = "block";
// typingOutput.innerHTML="";
// chatOutput.innerHTML += '

' + data.sender +': '+ data.message + '

';
// //keep scroll on bottom
// var xH = chatMessagesContainer.scrollHeight;
// chatMessagesContainer.scrollTo(0, xH);
// });

socket.on('typing message', function(data){
console.log(data + ' typing message')
typingOutput.innerHTML = '

' + data + ' is typing message...

';
});

---

index html

<title>Chat</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script> <style> #userEnterDiv{ } #mainDiv{ width: 600px; height: 500px; margin: left; border: 1px solid #ddd; box-shadow: 1px 2px 5px rgba(0,0,0,0.05); border-radius: 2px; display: none; } #usersDivContainer{ float: left; width: 20%; height: 100%; overflow-y: auto; } #chatDivContainer{ height: 100%; width: 80%; float: right; display: none; } #chatMessagesContainer{ width: 100%; height: 90%; overflow-y: auto; } #chatOutput p{ padding: 14px 0px; margin: 0 20px; border-bottom: 1px solid #e9e9e9; color: #555; } #chatFormElementsContainer{ width: 100%; height: 10%; } #chatButton{ background: #575ed8; color: #fff; font-size: 12px; border: 0; padding: 14px 0; float: right; width: 20%; heght: 100%; border-radius: 0 0 2px 2px; } </style>

enter username

Enter

Send

<script src="/ops.js"></script>

[darrachequesne]

Closed due to inactivity, please reopen if needed.