Node.js搭配socket.io搭建服务启动正常 访问报404 Cannot GET /求助

问题原因 #

你的Express服务未配置根路径/的响应逻辑，也没有设置静态资源托管规则，浏览器直接访问服务地址时，服务端找不到可返回的内容，因此返回404错误。

解决方案 #

根据你的业务需求可选择以下任意一种方案：

方案1：直接配置根路由返回测试页面 #

在现有代码中新增根路径路由，直接返回包含socket.io客户端逻辑的HTML内容，修改后的完整代码如下：

const express = require("express");
var http = require("http");
const app = express();
const port = process.env.PORT || 5000;
var server = http.createServer(app);
var io = require("socket.io").listen(server);

// 中间件
app.use(express.json());

// 新增根路径路由
app.get('/', (req, res) => {
  res.send(`
  <!DOCTYPE html>
  <html>
  <body>
    <h1>Socket.io服务正常</h1>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();
      // 发送测试消息
      socket.emit('/test', '客户端测试消息');
    </script>
  </body>
  </html>
  `)
})

io.on("connection", (socket) => {
    console.log("connected");
    console.log(socket.id, "has joined");
    socket.on("/test", (msg) => {
        console.log(msg);
    })
});

server.listen(port, "0.0.0.0", () => {
    console.log("server started");
});

修改后重启服务，再次访问根路径即可正常加载页面，服务端会同步打印socket连接日志和收到的测试消息。

方案2：托管本地静态文件目录 #

如果你的前端静态文件都存放在项目的public目录下，只需新增静态资源托管中间件即可：

// public为存放静态文件的目录名
app.use(express.static(__dirname + '/public'))

将你的前端HTML、JS、CSS等文件都放入public目录，重启服务后访问根路径会自动返回public目录下的index.html文件。

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