使用Node.js,Socket.IO和Express 提供静态javascript文件

参见英文答案 > node.js + express + socket.io cannot load javascript files into index.html 1个
我有一个简单的node.js应用程序,它使用socket.io和express.目前所有的javascript都在HTML文件中,但我想尝试将其分成.js文件.

在我的主节点应用程序中,我有这个：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

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

这工作正常,直到我将我的javascript从index.html移动到.js文件,然后尝试从我的HTML文件中引用它,如下所示：

<script src="functions.js"></script>

我认为express不提供静态文件所以我试过这个：

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/functions.js');
});

谁能告诉我我做错了什么？

解决方法:

nodejs和express默认不提供任何文件.所以,当你创建第一条路线时：

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

这成功地允许浏览器请求/查看您的index.html文件.然后,浏览器将接收该HTML文件并进行解析.如果找到< script>在该文件中的标签,然后它将向您的服务器发出新的Web请求.所以,如果那个文件中有这个：

 <script src="functions.js"></script>

然后,浏览器会向您的服务器询问/functions.js.由于您没有该请求的路由,您的服务器将返回404错误,浏览器将无法获取您的脚本文件.

因此,当浏览器要求时,您必须创建一个正确提供/functions.js的路由,同时仍保留为index.html文件提供服务的现有路由.

你可以为/functions.js创建一个特定的路由,就像你为/做的那样.或者,对于静态文件,您可以使用express.static()创建可以提供许多静态文件的智能路由.

要使用express.static(),您需要在服务器上创建一个目录(它可以在任何地方),但是人们经常把它放在服务器文件所在的目录下面.我通常选择将其命名为public,因此每个人都明白这些文件是公开的.然后,您可以使用express.static创建一个智能路由,如下所示：

app.use(express.static("/js", path.join(__dirname, "public")));

这行中间件告诉表示如果有任何请求以/ js开头,那么在__dirname“/ public”目录中查找匹配的文件.因此,如果请求为/js/functions.js,则查找名为__dirname“/public/functions.js”的文件.如果找到该文件,则自动提供.要在index.html文件中正常工作,您可以创建< script>标签是这样的：

 <script src="/js/functions.js"></script>

我在这里使用的/ js /前缀完全取决于你.您甚至不必使用前缀,它可以命名为您想要的任何名称.您只需要确保在< script>中使用的前缀. tag匹配您在传递给express.static()的第一个参数中使用的前缀.我喜欢为我的静态JS和CSS文件使用前缀,因此它们存储并在与我的核心HTML文件不同的位置查找(这只是我的个人偏好,但在路上它也可能使缓存更简单)或使用类似Nginx的东西来提高性能也更简单.

要使用express.static(),您必须通过更改以下内容来保存对express模块的引用：

var app = require('express')();

对此：

var express = require('express');
var app = express();

或者,在任何最新版本的nodejs中,我更喜欢将const用于不应重新分配的变量：

const express = require('express');
const app = express();

使用Node.js,Socket.IO和Express 提供静态javascript文件

相关文章