Socket.io无法识别用户名

时间:2019-09-22 15:13:38

标签: javascript node.js express websocket socket.io

我尝试将聊天框添加到我的youtube网络应用中。当您进入应用程序时,会出现一条警报,要求您输入用户名告诉别人您是谁。可以说我的是name1。当我在聊天中写东西时,它显示为name1:bla bla。

但是当其他人加入聊天时,请说出name2。我看到他/她的消息为name1,他/她看到我的消息为name2。

我试图告诉socket.io之间的区别,但显然我失败了。

这是app.js:

// Socket setup
io.on('connection', function(socket) { 

  // username
  socket.on('new user', function(username) {
    socket.username = username;
    io.emit('new user', username);
    console.log(username + ' connected');
    io.emit('connection2', "Welcome to Ömür's Chatbox " + username);  
    socket.on('disconnect', function() {
      console.log(username + ' disconnected');
    });
  });

  // chatbox
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });

  // User connections
  console.log('User ' + socket.id + ' Connected');
  socket.on('disconnect', function() {
    console.log('User ' + socket.id + ' Disconnected');
  });  
});

这是主要ejs中的脚本:

var socket = io();
var username = prompt("What's your username?");

socket.emit('new user', username);

$('form').submit(function() {
  socket.emit('chat message', $('#m').val());
  $('#m').val('');
  return false;
});

socket.on('chat message', function(msg) {     
  var li = $("<li></li>");
  var span = $("<span></span>").css('color', getUsernameColor(username));
  span.addClass("userNameSpan");

  $('#messages').append($(li).text(msg));
  $(li).prepend($(span).text(username));       
});

socket.on('connection2', function(msg) {
  $('#messages').append($('<li style="font-style:italic;">').text(msg));
});  

您可以从here

查看完整的代码

1 个答案:

答案 0 :(得分:1)

当前另一个对等方不知道发送方的用户名。

将其包含在消息中,如下所示:

$('form').submit(function() {
  let message = {
    username: username,
    payload: $('#m').val()
  }
  socket.emit('chat message', message);
  return false;
});

socket.on('chat message', function(message) {
  let {payload, username} = message;
  var li = $("<li></li>");
  var span = $("<span></span>").css('color', getUsernameColor(username));
  span.addClass("userNameSpan");

  $('#messages').append($(li).text(payload));
  $(li).prepend($(span).text(username));
}