Next.js Pages Router中Socket.io 404错误求助

核心问题分析 #

你遇到的GET http://localhost:3000/socket.io?EIO=4&transport=polling&t=OZc5Mqk 404 (Not Found)错误，本质是客户端Socket.io未连接到正确的服务端路由，同时服务端Socket.io初始化配置存在缺失。

具体修复步骤 #

1. 修正服务端API路由文件命名 #

确保服务端代码文件路径为pages/api/socket.js（或.ts），Next.js的API路由基于文件路径生效，客户端需要对应这个路径建立连接。

2. 完善服务端Socket.io初始化配置 #

修改服务端代码，添加CORS配置避免跨域问题，同时明确Socket服务的路径：

import { Server } from 'socket.io'

export default function SocketHandler(req, res) {
  if (res.socket.server.io) {
    console.log('Socket is already running')
    res.end()
    return
  }

  console.log('Socket is initializing');
  const io = new Server(res.socket.server, {
    path: '/api/socket',
    cors: {
      origin: "http://localhost:3000",
      methods: ["GET", "POST"]
    }
  });
  res.socket.server.io = io
  
  io.on('connection', socket => {
    console.log('Client connected:', socket.id)
    socket.on('send-message', msg => {
      io.emit('receive-message', msg)
    })
    socket.on('disconnect', () => {
      console.log('Client disconnected:', socket.id)
    })
  })

  res.end()
}

3. 修正客户端Socket连接逻辑 #

• 指定Socket.io服务端的正确路径/api/socket
• 修复setAllMessages中的变量错误（将data改为msg）
• 替换无效的fetch('/api/hello')为调用正确的Socket API路由

修改后的客户端代码：

import { useEffect, useState } from 'react'
import io from 'socket.io-client'
let socket;

const Home = () => {
  const [username, setUsername] = useState('')
  const [message, setMessage] = useState('')
  const [allMessages, setAllMessages] = useState([])

  useEffect(() => {
    socketInitializer();
    // 组件卸载时断开Socket连接
    return () => {
      socket?.disconnect()
    }
  }, [])

  const socketInitializer = async () => {
    await fetch('/api/socket');
    socket = io('http://localhost:3000', {
      path: '/api/socket'
    })

    socket.on('receive-message', msg => {
      console.log(msg)
      setAllMessages(pre => [...pre, msg])
    })
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (!username || !message) return
    socket.emit('send-message', {
      username, message
    })
    setMessage('')
  }


  return (
    <div style={{ padding: '20px' }}>
      <h1>Chat App</h1>
      <p>Enter a username</p>
      <input 
        type="text" 
        value={username} 
        name='username' 
        onChange={(e) => setUsername(e.target.value)} 
        className='border border-black p-2 mr-2' 
        placeholder="Username"
      />

      <div style={{ margin: '20px 0' }}>
        {allMessages.map(({username, message}, index) => (
          <p key={index} style={{ margin: '5px 0' }}>
            <strong>{username}</strong>: {message}
          </p>
        ))}
      </div>

      {username && (
        <div>
          <form onSubmit={handleSubmit}>
            <input 
              type="text" 
              value={message} 
              name='message' 
              onChange={(e) => setMessage(e.target.value)} 
              className='border border-black p-2 mr-2'
              placeholder="Type your message..."
            />
            <button type="submit" className='border border-black p-2 bg-gray-100'>Send</button>
          </form>
        </div>
      )}
    </div>
  )
}

export default Home;

4. 依赖版本检查 #

确保客户端与服务端的Socket.io版本一致，避免兼容性问题：

npm install socket.io socket.io-client

验证修复 #

1. 重启Next.js开发服务器
2. 访问http://localhost:3000，输入用户名后发送消息
3. 查看控制台是否输出Client connected日志，确认消息能正常收发

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