Socket.IO加载失败求助：新手搭建简易聊天应用遇问题

前端代码问题及修复 #

1. 脚本标签闭合错误：第一个引入Socket.IO的<script>标签使用了无效的<script/>闭合方式，导致后续JS代码无法正常执行，需改为标准的</script>。
2. 连接地址优化：若前端页面通过后端服务（http://192.168.88.152:3000）直接访问，可简化连接代码为io()，避免手动指定URL可能引发的配置问题。

修复后的前端代码：

<ul id="messages"></ul>
<form id="form" action="">
    <input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/3.0.0/socket.io.js"></script>
<script>
    // 同域名下可简化为io()，跨域场景保留完整地址即可
    var socket = io();

    var messages = document.getElementById('messages');
    var form = document.getElementById('form');
    var input = document.getElementById('input');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
            socket.emit('chat message', input.value);
            input.value = '';
        }
    });

    socket.on('chat message', function(msg) {
        var item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
    });
</script>

后端代码问题及修复 #

1. 重复注册连接回调：你重复注册了4次io.on('connection')，Socket.IO只会执行最后一个回调，导致前面的连接日志、断开监听等逻辑全部失效，需将所有连接相关逻辑合并到同一个回调中。
2. 静态文件路径检查：确认chat.html.php文件实际存在，若只是静态HTML页面，建议改为chat.html，避免不必要的PHP环境依赖。

修复后的后端代码：

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

app.get('/', (req, res) => {
  // 确保文件路径和名称与实际文件一致
  res.sendFile(__dirname + '/chat.html');
});

// 合并所有连接相关逻辑到一个回调内
io.on('connection', (socket) => {
  console.log('a user connected');
  
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

额外排查点 #

• 确保已安装依赖：执行npm install express socket.io确认express和socket.io已正确安装
• 网络与端口检查：确认3000端口未被防火墙拦截，前端设备能访问http://192.168.88.152:3000
• 浏览器控制台调试：按F12打开控制台，查看具体错误信息（如404、跨域、语法错误），精准定位问题

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