具有相同用户名的不同用户显示在socket.io＆amp;的node.js

Question

我正在 Node.js和Socket.io 中创建聊天应用程序。

它工作正常，但我遇到了一个小问题。

工作（这就是我想要的）

1. 在一个标签上，用户输入他的昵称。
2. 使用他的昵称/
向连接用户发送消息
3. 在第二个标签上，用户输入他的昵称。
4. 以他的名字向连接的用户发送消息。

问题

当第一个用户连接并向聊天发送消息时，它会显示正确的昵称，当我打开另一个选项卡时，选择昵称，然后向聊天发送消息，并使用正确的昵称向聊天发送正确的消息

但是，当我再次转到第一个标签页，并在当时发送消息时发送消息但现在是第二个标签用户的昵称显示。

以下是我的代码，检查我做错了什么？

客户端JS

$(function (){
		var socket = io();
		
		$('#nick-form').submit(function(e){
				e.preventDefault();
				socket.emit('new user', $('#user_name').val() ,function(usernames){
					if(usernames){
						$('#username-area').hide();
						$('#chat-area').show();
					}else{
						$('#error_message').html('This username already exists.');
					}
			   });
			
			$('#user_name').val('');
		});
		
		socket.on('usernames', function(nicknames){
			var html = '';
			for(i=0; i < nicknames.length;i++){
				html +=nicknames[i] + '<br/>'
			}
			$('#online_users').html(html);
		
		});
		
		
		$('#message-form').submit(function (e){
			e.preventDefault();
			socket.emit('chat message', $('#m').val());
			$('#m').val('');
			//return false;
		});
		
		socket.on('new message', function(data){
			console.log(data);
			$('#messages').append($('<li>').text(data.nick +' : '+ data.msg));
		});
		
	})

服务器JS

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var nicknames = [];

app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
	
	socket.on('new user', function(get_username, callback){
		if(nicknames.indexOf(get_username) != -1 ){
			callback(false);
		}else{
			callback(true);
			console.log('Username: ', get_username);
			io.nickname = get_username;
			nicknames.push(io.nickname);
			updateNIcknames();
		}
	});
	
	function updateNIcknames(){
		io.emit('usernames', nicknames);
	}
	
	socket.on('chat message', function(data){
		console.log(io.nickname+' : '+data);
		io.emit('new message', {msg:data, nick: io.nickname}); // at here i am sending nickname and message
	});
	
	socket.on('disconnect', function(nickname){
		if(!io.nickname) return;
		console.log('User dissconected ');
		nicknames.splice(nicknames.indexOf(io.nickname),1);
		updateNIcknames();
	});
});
http.listen(3000, function(){
	console.log('listening on port *:3000');
});

Answer 1

问题是服务器不知道谁发送了消息，所以你需要消息的昵称：

$(function (){
    var socket = io();
    var username = "";  // <----- here


    $('#nick-form').submit(function(e){
            e.preventDefault();
            username = $('#user_name').val();
            socket.emit('new user', username ,function(usernames){
                if(usernames){
                    $('#username-area').hide();
                    $('#chat-area').show();
                }else{
                    $('#error_message').html('This username already exists.');
                }
           });

        $('#user_name').val('');
    });

    socket.on('usernames', function(nicknames){
        var html = '';
        for(i=0; i < nicknames.length;i++){
            html +=nicknames[i] + '<br/>'
        }
        $('#online_users').html(html);

    });


    $('#message-form').submit(function (e){
        e.preventDefault();
        socket.emit('chat message', {nick: username , msg: $('#m').val()}); // <--- here
        $('#m').val('');
        //return false;
    });

    socket.on('new message', function(data){
        console.log(data);
        $('#messages').append($('<li>').text(data.nick +' : '+ data.msg));
    });

});

服务器：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var nicknames = [];

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

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

socket.on('new user', function(get_username, callback){
    if(nicknames.indexOf(get_username) != -1 ){
        callback(false);
    }else{
        callback(true);
        console.log('Username: ', get_username);
        nicknames.push(get_username); // <----- here
        updateNIcknames();
    }
});

function updateNIcknames(){
    io.emit('usernames', nicknames);
}

socket.on('chat message', function(data){
    console.log(data.nick+' : '+data.msg);
    io.emit('new message', {msg:data.msg, nick: data.nick}); // <----- here
});

socket.on('disconnect', function(nickname){
    if(!io.nickname) return;
    console.log('User dissconected ');
    nicknames.splice(nicknames.indexOf(io.nickname),1);
    updateNIcknames();
});
});
http.listen(3000, function(){
   console.log('listening on port *:3000');
});