如何将姓名添加到 socket.io 聊天

Question

I'm new to socket.io. I have a working message chat set up and I'm trying to add names to the messages. I have a var called name which holds each users name who has logged in. below is the code.

On the HTML page that holds the chat. chat-room.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));
      })

On the server script. 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');
    })
})

Obvious, the way I have it now just sends back the user his or her name for every message sent, even messages send by other users. I need to add the variable name to the server script some how and I'm having difficulties getting it to work. Thanks for any help. John

Answer 1

Here is my Frontend code for set the username

     <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 2

Thanks for the answers back. I have figured out what I had to do.

First (on the HTML page) I had to emit the var name which holds all the users names to the server script on connect. This gives the proper name when one enters the room.

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

Then I added it to the messages being sent

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

Then on the server script I added.

On connect

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

Then again for the messages being sent

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

I'm sure there is a better way to join the names and messages but like I said I'm new to socket and I have spent way too much time on this:) If you know a better way please do let me know. Thanks!

Answer 3

prompt for the name first, then append it to the start of every message they emit

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