Next.js 15中Socket.IO客户端仅首次请求可发送消息，后续emit消息被队列但无法发送

我看了你的代码和问题描述，这种后续消息被队列无法发送的情况，大概率是Next.js 15 App Router的组件模式配置问题，再加上一些Socket.IO的小坑导致的，咱们一步步来解决：

1. 最核心的问题：缺少'use client'指令 #

在Next.js 15的App Router中，所有组件默认是Server Component，而useState、useEffect这些客户端钩子只能在Client Component中运行。你当前的页面组件没有添加'use client'指令，这会导致React的客户端状态管理（比如socket和isConnected的状态）出现异常——表面上看isConnected是true，但实际的Socket连接可能已经失效，后续的emit消息就会被客户端自动队列起来。

解决方法：在你的WebSocketPage组件文件最顶部添加这个指令：

'use client';

import React from 'react';
import { io, Socket } from 'socket.io-client';
// 其他导入代码...

2. 替换Socket.IO的废弃配置选项 #

你用到的forceNew: true在Socket.IO v4+版本中已经被废弃，官方推荐使用forceNewConnection: true来强制创建新连接。虽然这不一定是直接导致消息队列的原因，但使用废弃选项可能引发不可预期的连接行为。

修正配置：

const newSocket = io(`http://localhost:3001`, {
  transports: ['websocket'],
  timeout: 20000,
  retries: 3,
  forceNewConnection: true, // 替换原来的forceNew: true
});

3. 修复服务端与客户端的事件名不匹配 #

你客户端代码中监听的是hello-response事件，但服务端发送的是reply事件，这会导致你看不到服务器的回应，无法直观判断消息是否真的到达服务器。虽然这不是消息被队列的直接原因，但会严重影响调试效率：

修正服务端代码：

socket.on('hello', (data) => {
  console.log('Received:', data);
  socket.emit('hello-response', { msg: 'Hello back!' }); // 把'reply'改成'hello-response'
});

4. 移除不必要的async修饰符 #

你的sendMessage函数标记为async，但socket.emit是同步操作，完全不需要async/await语法，移除它可以避免潜在的逻辑混淆：

const sendMessage = () => {
  // 原有的socket检查、消息发送逻辑保持不变
};

5. 增加错误监听（可选但推荐） #

在Socket实例上添加error事件监听，能帮你快速排查连接或发送时的隐藏错误，方便后续调试：

newSocket.on('error', (error) => {
  console.error('❌ Socket连接/发送错误:', error);
});

总结一下：核心问题是Next.js 15 App Router的Client Component配置缺失，导致客户端钩子运行异常，Socket连接状态管理混乱。加上'use client'指令后，再配合上面的小修正，应该就能解决后续消息无法发送的问题了。

内容来源于stack exchange