如何在使用Socket.IO的Express.js应用中正确引入JavaScript文件

问题根因 #

你当前的Express服务没有配置静态资源托管规则，除了你显式定义了返回规则的/和/admin路由外，其他资源请求（包括你需要的script.js）都会被判定为无匹配路由，返回404错误。

解决步骤 #

1. 在项目根目录下新建一个用于存放静态资源的文件夹，命名为public，将你的script.js、CSS样式表、图片等所有静态资源都移入该文件夹中。
2. 在server.js中配置静态资源托管中间件，注意这行代码需要写在所有路由配置之前：

// 新增静态资源托管配置
app.use(express.static(__dirname + '/public'));

如果不想静态资源直接暴露在根路径下，也可以加路由前缀：

// 加前缀的配置，此时访问script.js的路径为/static/script.js
app.use('/static', express.static(__dirname + '/public'));

3. 重启服务即可正常访问script.js。

修改后的完整server.js代码 #

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3000;
var timesyncServer = require('timesync/server');

// 新增：静态资源托管，放在所有路由配置最前面
app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
app.get('/admin', (req, res) => {
  res.sendFile(__dirname + '/admin.html');
});

io.on('connection', (socket) => {
  console.log('success-connection')
  socket.on('chat message', msg => {
    io.emit('chat message', msg);
  });  
});

http.listen(port, () => {
  console.log(`Socket.IO server running at http://localhost:${port}/`);
});

// handle timesync requests
app.use('/timesync', timesyncServer.requestHandler);

额外排查点 #

如果配置后还是报错，检查以下两项：

• 确认script.js确实存放在public文件夹下，文件名大小写完全匹配引用路径（Linux环境下大小写敏感，容易踩坑）
• 如果你用的是4.16.0版本以下的旧版Express，需要单独安装serve-static模块引入使用，新版本Express已经内置static中间件，无需额外安装。

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