Node.js连接MongoDB与Socket.IO搭建聊天室时页面无法访问

我帮你梳理一下问题所在，主要有两个核心原因导致页面无法访问，我们一步步来修复：

1. 端口不匹配 #

你的后端代码里，Socket.IO监听的是3000端口：

const client = require('socket.io').listen(3000).sockets;

但前端代码里，却尝试连接4000端口：

var socket = io.connect('http://127.0.0.1:4000');

这就导致前端无法和后端建立连接，而且因为后端没有处理静态文件请求，直接访问端口也找不到页面。

修复方法：把两端的端口统一，比如都改成3000。修改前端的连接代码：

var socket = io.connect('http://127.0.0.1:3000');

2. 缺少静态文件服务 #

你的Node.js后端没有配置静态文件服务，所以当你在浏览器访问127.0.0.1:3000时，服务器不知道要返回同目录下的index.html文件。

我们需要用Express来快速搭建静态文件服务（如果还没安装Express，先执行npm install express），修改后端代码如下：

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
const mongo = require('mongodb').MongoClient;

// 配置静态文件目录，让服务器能返回当前目录下的静态文件（比如index.html）
app.use(express.static(__dirname));

// 监听3000端口
server.listen(3000, () => {
  console.log('Server running on port 3000');
});

// Connect to mongo
mongo.connect('mongodb://127.0.0.1/mongochat', { useNewUrlParser: true, useUnifiedTopology: true }, function(err, db){
  if(err){ throw err; }
  console.log('MongoDB connected...');

  // Connect to Socket.io
  io.on('connection', function(socket){
    let chat = db.db().collection('chats'); // 注意：MongoDB 3.x+需要用db.db()获取数据库实例

    // Create function to send status
    sendStatus = function(s){
      socket.emit('status', s);
    }

    // Get chats from mongo collection
    chat.find().limit(100).sort({_id:1}).toArray(function(err, res){
      if(err){ throw err; }
      // Emit the messages
      socket.emit('output', res);
    });

    // Handle input events
    socket.on('input', function(data){
      let name = data.name;
      let message = data.message;

      // Check for name and message
      if(name == '' || message == ''){
        // Send error status
        sendStatus('Please enter a name and message');
      } else {
        // Insert message
        chat.insertOne({name: name, message: message}, function(){ // 用insertOne替代已弃用的insert
          io.emit('output', [data]);
          // Send status object
          sendStatus({
            message: 'Message sent',
            clear: true
          });
        });
      }
    });

    // Handle clear
    socket.on('clear', function(data){
      // Remove all chats from collection
      chat.deleteMany({}, function(){ // 用deleteMany替代已弃用的remove
        // Emit cleared
        socket.emit('cleared');
      });
    });
  });
});

这里额外做了几个优化：

• 替换了已弃用的MongoDB方法（insert→insertOne，remove→deleteMany）
• 添加了MongoDB连接的新参数，解决控制台的弃用警告
• 用Express+http模块的方式整合Socket.IO，这是更标准的做法

最后验证步骤 #

1. 安装依赖：如果没装过express、mongodb和socket.io，执行npm install express mongodb socket.io
2. 启动后端服务器：node your-server-file.js（替换成你的服务器文件名）
3. 在浏览器访问http://127.0.0.1:3000，现在应该能正常加载index.html页面，并且可以和聊天室交互了。

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