使用Socket.io无法实现客户端与服务端连接的问题求助

核心问题分析 #

你的客户端连接代码写法不符合Socket.io v4的规范，同时静态资源加载路径存在错误，导致连接失败。

修正步骤 #

1. 简化客户端连接逻辑 #

Socket.io v4客户端会自动处理连接协议、路径及参数，无需手动拼接复杂的ws地址，直接指定服务端地址即可：

<script src="/socket.io/socket.io.js"></script>

<script>
    // 直接传入服务端地址，Socket.io自动处理连接细节
    const socketIO = io('http://localhost:3000');
    
    // 添加状态监听，方便排查问题
    socketIO.on('connect', () => {
        console.log('已成功连接服务端');
    });
    
    socketIO.on('connect_error', (err) => {
        console.error('连接失败:', err.message);
    });
</script>

2. 修正客户端库加载路径 #

服务端已通过app.use(express.static(__dirname + '/public'))开放静态资源目录，但Socket.io会自动在服务端暴露/socket.io/socket.io.js路径供客户端加载，因此不需要使用相对路径../socket.io.js，直接用根路径引用即可避免404错误。

3. 优化服务端CORS配置（可选） #

现有CORS配置已满足基础需求，可补充allowedHeaders提升兼容性：

const el_io = new Server(httpserver, {
    cors: {
        origin: "http://localhost:80",
        methods: ['POST', 'GET'],
        allowedHeaders: ["*"],
        credentials: true
    }
});

验证步骤 #

1. 重启Node.js服务端
2. 刷新客户端页面，查看浏览器控制台日志
3. 根据日志提示（连接成功/错误信息）确认问题是否解决

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