Node.js/Fastify服务端WebSocket无法向前端发送消息排查

核心问题 #

• 服务端的消息发送逻辑（包括定时任务）被包裹在connection.socket.on('message', ...)回调中，只有当服务端收到前端发来的消息时，这段逻辑才会执行。
• 前端代码里，WebSocket连接建立后未调用socket.send()给服务端发送任何消息，导致服务端的回调从未触发，自然不会向前端推送内容。

修复方案 #

方案1：前端连接后主动发送消息触发服务端逻辑 #

修改前端代码，在连接成功的回调里添加消息发送逻辑：

<%- include('header'); -%>

<script>
console.log("browser"); 

let socket = new WebSocket("ws://127.0.0.1:3000/ws");

// Connection opened
socket.addEventListener('open', function (event) {
    console.log('WebSocket is open now.');
    // 连接成功后给服务端发消息，触发服务端的message事件
    socket.send('hello from client');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server: ', event.data);
});

</script>

<%- include('footer'); -%>

方案2：服务端连接建立时直接启动定时任务 #

如果不需要等待前端消息，而是连接成功就开始推送，调整服务端路由逻辑：

/////// Routes Controllers
fastify.register(async function (fastify) {
    fastify.get('/ws', { websocket: true }, (connection, req) => {
        // 连接建立后立即发送第一条消息
        connection.socket.send('hi from server');
        
        // 启动定时任务
        let interval = setInterval(function() {
            connection.socket.send('hi from server');
            console.log('This will run every 0.5 second');
        }, 500);

        // 监听连接关闭事件，清除定时任务避免内存泄漏
        connection.socket.on('close', () => {
            clearInterval(interval);
        });
    })
})

额外优化建议 #

• 服务端添加close事件监听清除定时任务，防止客户端断开后服务端仍运行无效定时器造成内存泄漏。
• 给send方法添加错误捕获，避免连接异常导致的报错：

try {
    connection.socket.send('hi from server');
} catch (err) {
    console.error('Failed to send message:', err);
    clearInterval(interval);
}

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