Next.js 14 App Router中WebSocket连接成功但无法接收消息

你的问题核心是原生WebSocket API不支持直接监听自定义事件名称，Postman能正常工作是因为它适配了Nest.js WebSocket的消息格式，但浏览器原生WebSocket只能通过message事件接收所有服务器推送的消息，再手动解析消息内容里的事件标识。

修复步骤： #

• 替换自定义事件监听为message事件
  修改Next.js的WebSocket连接代码，把自定义事件监听换成通用message事件，再解析返回的JSON数据判断事件类型：

  useEffect(() => {
      const websocket = new WebSocket('ws://localhost:2020/trip-monitoring');
  
      websocket.onopen = () => {
          console.log('WebSocket is connected');
          // 必须先向服务器发送'tripMonitoring'事件请求，触发服务器返回响应
          websocket.send(JSON.stringify({
              event: 'tripMonitoring',
              data: {/* 这里传入你的AddTripMonitoringRequestDTO结构数据 */}
          }));
      };
  
      // 监听通用message事件，手动解析自定义事件
      websocket.onmessage = (event) => {
          const message = JSON.parse(event.data);
          if (message.event === 'tripMonitoringEvent') {
              console.log('Received trip monitoring message:', message.data);
              // 在此处理业务逻辑
          }
      };
  
      websocket.onclose = () => {
          console.log('WebSocket is closed');
      };
  
      return () => {
          websocket.close();
      };
  }, []);
  

• 确认客户端已发送触发请求
  你的Nest.js代码中@SubscribeMessage('tripMonitoring')是被动响应逻辑——只有客户端发送了tripMonitoring事件的消息后，服务器才会返回tripMonitoringEvent事件的响应。如果没有发送这个请求，服务器不会主动推送消息，这也是收不到消息的核心原因之一。

• 验证CORS配置（可选）
  虽然你已设置origin: "*"，如果后续遇到跨域问题，可以补充WebSocket相关CORS配置，比如添加credentials: true（若需携带Cookie），但当前连接已成功，此步骤非必需。

为什么Postman能正常工作？ #

Postman在测试WebSocket时，会自动适配Nest.js的WebSocket消息格式，帮你处理自定义事件的解析逻辑；而浏览器原生WebSocket需要开发者手动处理消息的格式解析。

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