使用 Node.js、Socket.IO 和 Express 提供静态 JavaScript 文件 [英] Serving static javascript files with Node.js, Socket.IO and Express
问题描述
我有一个简单的 node.js 应用程序,它使用 socket.io 和 express.目前所有的 javascript 都在 HTML 文件中,但我想尝试将它分离成一个 .js 文件.
I have a simple node.js application which uses socket.io and express. At the moment all of the javascript is in the HTML file but I would like to try and separate it out into a .js file.
在我的主节点应用程序中,我有这个:
In my main node application I have this:
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 文件中引用它,如下所示:
This works fine until I move my javascript from index.html to a .js file then try to reference it from my HTML file like this:
<script src="functions.js"></script>
我认为 express 不提供静态文件,所以我试过了:
I think that express is not serving the static file so I have tried this:
app.get('/', function (req, res) {
res.sendFile(__dirname + '/functions.js');
});
谁能告诉我我做错了什么?
Can anyone tell me what I am doing wrong?
推荐答案
nodejs 和 express 默认不提供任何文件.因此,当您创建第一条路线时:
nodejs and express do not serve ANY files by default. So, when you created your first route:
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
这成功地允许浏览器请求 /
查看您的 index.html 文件.然后浏览器将接收该 HTML 文件并对其进行解析.如果它在该文件中找到 标签,它将向您的服务器发出新的 Web 请求.因此,如果该文件中包含此内容:
That successfully allowed a browser request for /
to see your index.html file. The browser will then receive that HTML file and parse it. If it finds <script>
tags inside that file, it will then make a new web request to your server. So, if that file has this in it:
<script src="functions.js"></script>
浏览器会向您的服务器询问 /functions.js
.由于您没有该请求的路由,您的服务器将返回 404 错误,浏览器将无法获取您的脚本文件.
The browser, will then ask your server for /functions.js
. Since you had no route for that request, your server will return a 404 error and the browser will not get your script file.
因此,您必须创建一个路由,以便在浏览器请求时正确地为 /functions.js
提供服务,同时仍保留为 index.html 文件提供服务的现有路由.
So, you have to make a route that will properly serve /functions.js
when the browser asked for it, while still keeping your existing route that serves the index.html file.
您可以为 /functions.js
制作一个特定的路由,就像您为 /
所做的那样.或者,对于静态文件,您可以使用 express.static()
创建一个智能路由,可以为许多静态文件提供服务.
You can either make a specific route for /functions.js
just like you did for /
. Or, for static files, you can use express.static()
to create a smart route that can serve many static files.
要使用 express.static()
,你需要在你的服务器上创建一个目录(它可以在任何地方),但人们经常把它放在你的服务器文件所在的目录下.我通常选择将其命名为 public
,因此每个人都可以清楚地看到这些文件是公开的.然后,您可以使用 express.static 创建一个智能路由,如下所示:
To use express.static()
you create a directory on your server (it can be anywhere), but folks often put it below the directory where your server files are. I generally choose to name it public
so it's obvious to everyone that these files are publicly available. Then, you can create a smart route using express.static like this:
app.use(express.static("/js", path.join(__dirname, "public")));
这行中间件告诉 express,如果有任何以 /js
开头的请求,则在 __dirname + "/public"
目录中查找匹配的文件.因此,如果请求是针对 /js/functions.js
的,则查找名为 __dirname + "/public/functions.js"
的文件.如果找到该文件,则自动提供它.要使其在 index.html 文件中正常工作,您可以将 <script>
标记设为:
This line of middleware tells express that if any requests come in that start with /js
, then look for a matching file in the __dirname + "/public"
directory. So, if a request comes in for /js/functions.js
, then look for a file named __dirname + "/public/functions.js"
. If that file is found, then serve it automatically. To make this work properly in your index.html file, you would make the <script>
tag be this:
<script src="/js/functions.js"></script>
我在这里使用的 /js/
前缀完全取决于您.您甚至不必使用前缀,它可以命名为您想要的任何名称.您只需要确保您在 <script>
标签中使用的前缀与您在传递给 express.static()
的第一个参数中使用的前缀相匹配.我喜欢为我的静态 JS 和 CSS 文件使用前缀,以便在与我的核心 HTML 文件不同的位置存储和查找它们(这只是我的个人偏好,但在未来它也可能使缓存更简单或者使用类似 NGINX 之类的东西来提高性能也更简单).
The /js/
prefix I've used here is purely up to you. You don't even have to use a prefix and it can be named anything you want. You just have to make sure that the prefix you use in the <script>
tag matches the prefix you use in the first argument passed to express.static()
. I like to use a prefix for my static JS and CSS files so they are stored and looked for in a location that is different than my core HTML files (that's just a personal preference of mine, but down the road it might also make caching simpler or make using something like NGINX to improve performance simpler too).
要使用 express.static()
,您必须通过更改以下内容来保存对 express
模块的引用:
To use express.static()
you have to save a reference to the express
module by changing this:
var app = require('express')();
为此:
var express = require('express');
var app = express();
或者,在任何最新版本的 nodejs 中,我更喜欢将 const
用于不应重新分配的变量:
Or, in any recent version of nodejs, I prefer to use const
for variables that should not be reassigned:
const express = require('express');
const app = express();
这篇关于使用 Node.js、Socket.IO 和 Express 提供静态 JavaScript 文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!