首页 > 解决方案 > 如何存储多个用户名并在聊天屏幕上显示?Socket.io 和 Node.js

问题描述

我是 socket.io 的新手并设法创建了一个聊天应用程序,但我正在努力为聊天应用程序上的每个用户添加用户名。所以我添加了“提示”来询问名称,当用户在应用程序上键入内容时,它会显示一条带有用户名的聊天消息,但是,当另一个用户使用不同的名称连接时,它会显示每个用户具有相同名称的消息,就像 user1 看到所有名称为 user1 的消息,而 user2 看到所有名称为 user2 的消息,即使它来自用户 1 或用户 2。请帮助!谢谢!

脚本.js

const socket = io();
const chat = document.querySelector('.chat-form');
const Input = document.querySelector('.chat-input');
const chatDisplay = document.querySelector('.chat-display');

var users = prompt('What is your name');

chat.addEventListener('submit', event => {
    event.preventDefault();
    socket.emit('chat', Input.value);
    Input.value = '';
});

const renderMessage = msg => {
    const div = document.createElement('div');
    div.classList.add('render-message');
    div.innerText = msg;
    chatDisplay.appendChild(div);
}

socket.on('chat', msg => {
    renderMessage(users + ': ' + msg);
});

索引.js

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const port = process.env.PORT || 3000;
const io = require('socket.io')(server);
const users = {};

app.use(express.static(__dirname + '/public'));

io.on('connection', socket => {
    socket.on('chat', msg => {
        io.emit('chat', msg);
    }); 
 });

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

标签: node.jssocket.io

解决方案


推荐阅读