Node.js与客户端JavaScript无法连接，实时聊天应用故障排查

排查与修复步骤 #

1. 必须引入Socket.IO客户端脚本 #

客户端代码直接调用了io()，但浏览器默认没有这个对象，必须在HTML页面中添加客户端脚本：

• 方式一：使用服务端提供的脚本（推荐，版本自动匹配）

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

• 方式二：使用CDN（需保证版本与服务端一致）

  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  <script src="client.js"></script>
  

2. 托管前端静态文件 #

如果你的HTML、client.js等前端文件放在本地目录（比如public文件夹），服务端需要用Express托管这些文件，否则浏览器无法加载页面：
在服务端index.js中添加：

// 放在创建server的代码之前
app.use(express.static('public'));

确保前端文件都放在项目根目录的public文件夹下。

3. 验证版本兼容性 #

服务端安装的socket.io版本必须和客户端引入的版本一致，版本不兼容会导致静默连接失败：

• 查看服务端版本：执行npm list socket.io
• 若版本不匹配，重新安装对应版本：npm install socket.io@x.x.x（替换x.x.x为对应版本号）

4. 检查连接地址与服务状态 #

• 确认服务端正常启动，终端显示Server is running on port 8000
• 客户端连接地址http://localhost:8000需与服务端监听的端口一致，若服务端用了其他端口，需同步修改客户端代码

5. 查看浏览器控制台的隐藏错误 #

按F12打开浏览器开发者工具，切换到Console标签，查看是否有io is not defined、网络请求失败等隐藏错误，这些是排查问题的关键。

6. 优化用户体验（可选） #

当前服务端在新用户加入时，只通知其他用户，新用户自己看不到提示，可以修改服务端代码：

socket.on('new-user-joined', (name) => {
    console.log('New user', name);
    users[socket.id] = name;
    socket.broadcast.emit('user-joined', name); // 通知其他用户
    socket.emit('user-joined', 'You joined the chat'); // 通知新用户自己
});

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