基于Node.js+Socket.io的聊天系统Typing提示异常问题求助

我开发了一套基于Node.js和Socket.io的聊天系统，在聊天框输入内容时会显示「XX typing...」提示，但输入一段时间后，该提示会无间隔频繁显示和消失，以下是相关代码，请求排查原因：

后端(Node.js)代码 #

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

const app = express();
const server = app.listen(3000)

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 => {
    feedback.innerHTML = '<p>' + data + ' typing...</p>';

    setTimeout(() => {
    feedback.innerHTML = ''
}, 5000);
})

问题原因 #

1. typing事件触发过于频繁：前端keypress事件会在用户每按下一个按键时触发一次，连续输入时会不断向服务器发送typing请求，服务器每次都广播该事件，导致前端反复渲染提示。
2. 多定时器冲突：每次收到typing事件都会创建一个新的5秒定时器，旧定时器未执行完毕时，新渲染的提示会被旧定时器清空，之后新定时器又会触发清空操作，最终导致提示频繁闪烁。

解决方案 #

前端核心修复

添加防抖函数减少typing事件发送频率，同时维护全局定时器避免冲突：

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');

// 防抖函数：用户停止输入500ms后才执行回调
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  }
}

// 防抖处理后的typing事件发送逻辑
const sendTypingSignal = debounce(() => {
  if (sender.value) {
    socket.emit('typing', sender.value);
  }
}, 500);

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 = '';
})

// 替换原keypress事件处理
message.addEventListener('keypress', sendTypingSignal);

// 全局变量存储定时器ID，避免多个定时器冲突
let typingTimer;

socket.on('typing', data => {
    // 清除之前未执行的定时器
    clearTimeout(typingTimer);
    feedback.innerHTML = '<p>' + data + ' typing...</p>';

    // 启动新的定时器，5秒后清空提示
    typingTimer = setTimeout(() => {
        feedback.innerHTML = '';
    }, 5000);
})

后端优化（可选，减少冗余广播）

添加用户输入状态记录，避免重复广播相同的typing事件：

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

const app = express();
const server = app.listen(3000)

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

const io = socket(server);
// 记录当前正在输入的用户
const activeTypingUsers = new Set();

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

    socket.on('chat', data => {
        io.sockets.emit('chat', data);
        // 用户发送消息后，移除其输入状态
        activeTypingUsers.delete(data.sender);
        socket.broadcast.emit('stopTyping', data.sender);
    })
    
    socket.on('typing', data => {
        // 仅当用户不在输入状态时才广播
        if (!activeTypingUsers.has(data)) {
            activeTypingUsers.add(data);
            socket.broadcast.emit('typing', data);
            
            // 5秒后自动移除输入状态
            setTimeout(() => {
                activeTypingUsers.delete(data);
                socket.broadcast.emit('stopTyping', data);
            }, 5000);
        }
    })
    
    // 用户断开连接时清理状态
    socket.on('disconnect', () => {
        activeTypingUsers.clear();
    })
})

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