为什么数据对象有一个 data.username 字段

Question

我正在尝试学习如何使用 socket.io ,ejs ,nodejs ...

制作聊天应用程序

所以我基本上是在研究来自以下 repo 的代码：https://github.com/ngrt/simpleChatApp

文件夹结构如下
simpleChatApp（父文件夹）
-视图（包含 index.ejs）
-public （包含 style.css 和 chat.js ） -app.js (包含服务器代码的文件)

app.js 有 app.use(express.static('public')) 所以 public 作为 root

现在问题出在chat.js（包含客户端后端）
下图是 chat.js

的一部分

send_message.click(function(){
        socket.emit('new_message', {message : message.val()})
    })

    //Listen on new_message
    socket.on("new_message", (data) => {
        feedback.html('');
        message.val('');
        chatroom.append("<p class='message'>" + data.username + ": " + data.message + "</p>")
    })

在 emit 部分我们只发送了一个消息字段.....而在 socket.on 部分我们使用了 data.username() ...现在我认为数据基本上是我们在 emit 中发送的对象 ....它不包含任何用户名 ..所以它如何使用它 ..因为它是一个工作的 repo 所以代码是正确的 ..但我不明白为什么

Answer 1

客户端 socket.on 收到的消息是由 nodejs 的 emit 发出的（而不是您代码中的客户端）。这是 node js 的代码，其中附加了用户名：

socket.on('new_message', (data) => {
  //broadcast the new message
  io.sockets.emit('new_message', {message : data.message, username : socket.username});
})

一般来说，在您的示例中，多个客户端正在侦听服务器消息，而服务器正在侦听每个客户端的发出消息。用户名由服务器存储在每个新的 socket 对象上。连接的初始值为 'Anonymous' 并在 change_username 事件上更新：

socket.on('change_username', (data) => {
    socket.username = data.username
})

首先send_mesasageemit in chat.js is received by app.js and is immediately emitted到所有连接的客户端（包括发件人). 服务器将用户名添加到此发出（由服务器存储在 socket 对象中）。

然后，每个客户端 receives this emit (which already has a username). All connected clients then print 收到消息和用户名

为什么数据对象有一个 data.username 字段

Why does the data object has a data.username field

jquery

chat

node.js

socket.io