如何在Express MVC架构中集成Socket.IO并解决Next.js连接问题

核心错误 #

你把Socket.IO的连接监听逻辑放在了HTTP接口的控制器里，这是完全错误的。io.on('connection')是用来监听WebSocket连接事件的，应该在Express服务器初始化后直接设置，而不是通过调用某个HTTP接口来触发。

修正后的后端代码示例 #

1. 重构index.js（服务器入口） #

首先要正确初始化Socket.IO并关联Express服务器：

import express from 'express';
import { createServer } from 'http';
import { Server } from 'socket.io';
import { itemsRouter } from './router.js';

const app = express();
const server = createServer(app);
// 初始化Socket.IO，允许跨域（根据你的Next.js地址调整）
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // 你的Next.js前端地址
    methods: ["GET", "POST"]
  }
});

// 监听Socket连接，这才是正确的位置
io.on('connection', (socket) => {
  console.log('用户已连接，Socket ID:', socket.id);
  
  // 可以在这里处理Socket事件，比如接收前端消息
  socket.on('send-data', (data) => {
    console.log('收到前端数据:', data);
    // 给前端发消息
    socket.emit('receive-data', { message: '后端已收到数据' });
  });

  // 监听断开连接
  socket.on('disconnect', () => {
    console.log('用户已断开连接');
  });
});

app.use('/items', itemsRouter);

const port = 3001;
server.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

2. 移除控制器里的Socket逻辑 #

修改controller.js，getData接口只处理HTTP请求，不要掺和Socket逻辑：

export class ItemController {
  static getData = async (req, res) => {
    // 这里只处理HTTP请求的业务逻辑，比如返回数据
    res.json({ message: 'HTTP接口正常响应' });
  }
}

Next.js前端连接Socket的正确方式 #

在Next.js组件里直接连接Socket.IO，不需要通过fetch请求触发：

'use client'; // 客户端组件标记
import { useEffect } from 'react';
import { io } from 'socket.io-client';

export default function Home() {
  useEffect(() => {
    // 连接后端Socket服务
    const socket = io('http://localhost:3001');

    socket.on('connect', () => {
      console.log('Socket连接成功');
      // 可以给后端发消息
      socket.emit('send-data', { content: '前端发来的消息' });
    });

    socket.on('receive-data', (data) => {
      console.log('收到后端消息:', data);
    });

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

  return <div>Socket.IO测试页面</div>;
}

关键注意点 #

• Socket.IO连接是直接建立WebSocket连接，不需要通过HTTP接口中转，你之前用fetch调用/api/data的方式完全错误。
• 必须确保前后端的Socket.IO版本兼容，建议前后端都安装最新稳定版：npm install socket.io socket.io-client
• 跨域配置要正确，后端初始化Socket.IO时指定前端的地址，避免跨域错误。

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