在node.js Web应用程序中引用自定义JavaScript文件
我正在学习node.js，并开始使用常见的聊天应用程序示例。 我得到了一切工作正常，但没有做index.html文件中的所有JavaScript内嵌，我想把它放在它自己的文件，称为app.js。 但是，一旦我这样做，我得到404没有在文件中find。 我试图玩srcpath，但无法find该文件。 是否有一个技巧，当它是一个节点的应用程序引用自定义js / css文件？
的index.html
<div id="chat"></div> <form id="send-message"> <input type="text" id="message" /> <input type="submit" /> </form> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="/app.js"></script> <script> </script> server.js
var express = require('express'); var app = express(); var server = require('http').createServer(app); var io = require('socket.io').listen(server); var path = require('path'); app.use(express.static(path.join(__dirname, 'app.js'))); server.listen(process.env.port || 3000); app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); }); io.sockets.on('connection', function (socket) { socket.on('send message', function (message) { console.log(message); io.sockets.emit('new message', message); }); });
app.js
$(document).ready(function () { var socket = io.connect(); var form = $('#send-message'); var message = $('#message'); var chat = $('#chat'); form.submit(function (e) { e.preventDefault(); socket.emit('send message', message.val()); message.val(''); }); socket.on('new message', function (data) { chat.append(data + "<br />"); }); });
我可能会挂断节点的概念，但我假设我不应该在实际的server.js本身内做任何事情，因为这是服务器端代码，我不应该做任何DOM操作服务器端。 像您一样添加自定义js文件通常与标准的Web应用程序似乎不是在这里正确的方式。 我注意到，在几乎所有的教程/文档中，我已经看到/阅读过，它们通过调用cdn url来引用库（如jquery和bootstrap），而不是将这些文件作为模块包含在本地目录中。 基于这个和我继续得到的404错误，我假设有一个不同的方式来包含外部js引用到本地文件的Web应用程序。
提琴手输出：
GET http://localhost:1337/app.js HTTP/1.1 Host: localhost:1337 Connection: keep-alive Pragma: no-cache Cache-Control: no-cache User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36 Accept: */* Referer: http://localhost:1337/ Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 Cookie: __utma=111872281.1352628776.1455330937.1455330937.1455330937.1; __utmz=111872281.1455330937.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
你需要在server.js使用express.static() 。 您没有在Express服务器上build立静态资产，因此无法提供文件。
var express = require('express'); var app = express(); var path = require('path'); var server = require('http').createServer(app); var io = require('socket.io').listen(server); server.listen(process.env.port || 3000); // The below works but isn't a good practice because it's not scalable app.use('/app.js', express.static(path.join(__dirname, '/app.js'))); // You should create a public directory in your project folder and // place all your static files there and the below app.use() will // serve all files and sub-directories contained within it. //app.use('public', express.static(path.join(__dirname, 'public'))); app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); });
通常情况下，不像上面的代码片段那样将文件设置为静态文件。 你可以build立一个静态目录，比如public然后在你的公共目录下，你可以放置你的静态资源（CSS，JS，HTML）。