如何在 socket.io 聊天中添加名称

Question

我是 socket.io 的新手。我有一个有效的消息聊天设置，我正在尝试为消息添加名称。我有一个名为 name 的变量，它保存了每个登录的用户名。下面是代码。

在保存聊天的 HTML 页面上。聊天室.html

const room = 'waiting';
      const socket = io('/tech');
      $('form').submit(() => {
        let msg = $('#m').val();
        socket.emit('message', { msg, room });
        $('#m').val('');
        return false;
      });

      socket.on('connect', () => {
        // emiting to everybody
        socket.emit('join', { room: room });
      })

      socket.on('message', (msg) => {
        $('#messages').append($('<li>').text(name + msg));
      })

在服务器脚本上。 index.js

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const port = 3001;

server.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/virtualsim/learning/chat-room.html');
});

app.get('/trainees', (req, res) => {
    res.sendFile(__dirname + '/virtualsim/learning/chat-room2.html');
});

const tech = io.of('/tech');

tech.on('connection', (socket) => {
    socket.on('join', (data) => {
        socket.join(data.room);
        tech.in(data.room).emit('message', `joined ${data.room} room!`);
    })

    socket.on('message', (data) => {
        console.log(`message: ${data.msg}`);
        tech.in(data.room).emit('message', data.msg);
    });
    
    socket.on('disconnect', () => {
        console.log('user disconnected');

        tech.emit('message', 'user disconnected');
    })
})

显然，我现在的方式只是将每条发送的消息（甚至是其他用户发送的消息）发回用户的姓名。我需要以某种方式将变量 name 添加到服务器脚本中，但我很难让它工作。谢谢你的帮助。约翰

Answer 1

首先提示输入名称，然后将其附加到他们emit的每条消息的开头

socket.emit(name+msg, ()=>{...});

Answer 2

这是我设置用户名的前端代码

     <script>
     const form = document.querySelector("form");
     const input = document.querySelector(".input");
     const messages = document.querySelector(".messages");
     const username = prompt("Please enter a username: ", "");
     const socket = io();

     socket.on("old_message", {message: "hello"});

     form.addEventListener("submit", function(event) {
        event.preventDefault();

     addMessage(username + ": " + input.value);
     socket.emit("chat_message", {
        message: input.value
     });
  
     input.value = "";
     return false;
  }, false);

  socket.on("chat_message", function(data) {
    addMessage(data.username + ": " + data.message);
  });

  socket.on("user_join", function(data) {
    addMessage(data + " just joined the chat!");

  });

  socket.on("user_leave", function(data) {
    addMessage(data + " has left the chat.");
  });

  socket.on("old_message", function() {
      console.log('----data', data);
  });

  socket.on("getList", function(data) {
      console.log('----MessageList', data);
  });

  addMessage("You have joined the chat as '" + username  + "'.");
  socket.emit("user_join", username);
  socket.emit("old_message")

function addMessage(message) {
  const li = document.createElement("li");
  li.innerHTML = message;
  messages.appendChild(li);
  window.scrollTo(0, document.body.scrollHeight);
}

Here is backend code 

    const users = []; io.on('connection', (socket) => {   socket.on('user_join', (data) => {
    this.username = data;
    // here check in DB with sender, receiver if record not exist then create
    users.push({
      socketId: socket.id,
      userId: data,
    });
    socket.broadcast.emit('user_join', data);   });

  socket.on('chat_message', async (data) => {
    const a = {
      sender: data.senderId,
      receiver: data.receiverId,
      type: 'TEXT',
      message: data.message,
    };
    await model.conversations.create(a);    
    data.username = this.username;
    socket.broadcast.emit('chat_message', data);   });

  socket.on('disconnect', (data) => {
    socket.broadcast.emit('user_leave', this.username);   });

  socket.on('old_message', async (data) => {
    const messageList = await model.conversations.findAll({
      where: {
        sender: data.senderId,
        receiver: data.receiverId,
      },
    });
    socket.broadcast.emit('getList', messageList);   }); });

Answer 3

感谢回复。我已经弄清楚我必须做什么了。

首先（在 HTML 页面上）我必须在连接时将包含所有用户名的 var 名称发送到服务器脚本。当一个人进入房间时，这会给出正确的名字。

socket.on('connect', () => {
        socket.emit('join', { room: room, name: name });      
      })

然后我将它添加到正在发送的消息中

 $('form').submit(() => {
        let msg = $('#m').val();
        socket.emit('message', { name, msg, room });
        $('#m').val('');
        return false;
      });

然后在我添加的服务器脚本上。

连接时

tech.in(data.room).emit('message', `${data.name} joined ${data.room} room!`);

然后再发送消息

tech.in(data.room).emit('message', data.name + data.msg);

我确信有更好的方法来加入名称和消息，但就像我说的我是 socket 新手，我在这方面花了太多时间 :) 如果你知道更好的方法，请告诉我知道。谢谢！