Node.js Socket.io聊天应用多人同时输入时消息输入框被清空问题求助

我正在开发一款聊天应用，目前已接近完成，但遇到一个问题：当两人同时输入时，若有人按下回车键发送消息，所有人的消息输入框都会被清空。我知道问题出在哪，但不知道怎么实现只清空发送者自己的输入框。相关代码如下：

Node.js 后端代码 #

const express = require('express')
const socket = require('socket.io')

const app = express()
const server = app.listen(process.env.PORT || 3000, () => {
    console.log("server");
})

app.use(express.static('public'))

const io = socket(server)

io.on('connection', (socket) => {
    console.log(socket.id)

    socket.on('chat', data => {
        io.sockets.emit('chat', data)
    })

    socket.on('typing', data => {
        socket.broadcast.emit('typing', data)
    })
})

前端 JavaScript 代码 #

const socket = io.connect('http://localhost:3000');

const sender = document.getElementById('sender');
const message = document.getElementById('message');
const submitBtn = document.getElementById('submitBtn');
const output = document.getElementById('output');
const feedback = document.getElementById('feedback');

submitBtn.addEventListener('click', () => {
    if (sender.value != '' && message.value != '') {
        socket.emit('chat', {
            message: message.value,
            sender: sender.value,
        });
        sender.disabled = true;
    }
})

socket.on('chat', data => {
    feedback.innerHTML = ''
    output.innerHTML += '<p><strong>' + data.sender + '     : </strong>' + data.message + '</p>'
    message.value = '';
})

message.addEventListener('keypress', () => {
    socket.emit('typing', sender.value)
})

socket.on('typing', data => {
    socket.on('typing', data => {
        feedback.innerHTML = '<p>' + data + ' typing...    </p>';
        // clear feedback after one second of     inactivity
        setTimeout(() => {
            feedback.innerHTML = ''
        }, 5000);
    })
})

解决方法 #

问题核心在于当前代码中，所有客户端收到chat事件时都会执行message.value = ''，导致不管是不是发送者，输入框都会被清空。要实现仅清空发送者的输入框，只需调整逻辑：发送消息时立刻清空自己的输入框，服务器广播的chat事件不再处理清空操作。

具体修改步骤： #

1. 在发送按钮的点击回调中，发送消息后直接清空本地输入框：

submitBtn.addEventListener('click', () => {
    if (sender.value != '' && message.value != '') {
        socket.emit('chat', {
            message: message.value,
            sender: sender.value,
        });
        message.value = ''; // 发送后立即清空自己的输入框
        sender.disabled = true;
    }
})

2. 移除socket.on('chat')中的输入框清空代码：

socket.on('chat', data => {
    feedback.innerHTML = ''
    output.innerHTML += '<p><strong>' + data.sender + ' : </strong>' + data.message + '</p>'
    // 删除此行：message.value = '';
})

3. 修正前端typing事件的重复绑定问题（原代码中重复监听了typing事件，会导致多次触发定时器）：

socket.on('typing', data => {
    feedback.innerHTML = '<p>' + data + ' typing...</p>';
    setTimeout(() => {
        feedback.innerHTML = ''
    }, 5000);
})

修改后，只有发送消息的客户端会在点击按钮时清空自己的输入框，其他客户端收到消息时不会影响正在输入的内容，问题即可解决。

内容的提问来源于stack exchange，提问作者prf00