在node.js web app中引用自定义javascript文件
我正在学习node.js,并从常见的聊天应用程序示例开始。我让一切正常工作,但我不想在index.html文件中内联所有javascript,而是想把它放在它自己的名为app.js的文件中。然而,一旦我这样做,我得到404没有在文件中找到。我正在尝试使用src路径,但无法让它找到文件。在节点应用程序中引用自定义js/css文件有什么诀窍吗在node.js web app中引用自定义javascript文件,javascript,html,node.js,Javascript,Html,Node.js,我正在学习node.js,并从常见的聊天应用程序示例开始。我让一切正常工作,但我不想在index.html文件中内联所有javascript,而是想把它放在它自己的名为app.js的文件中。然而,一旦我这样做,我得到404没有在文件中找到。我正在尝试使用src路径,但无法让它找到文件。在节点应用程序中引用自定义js/css文件有什么诀窍吗 <div id="chat"></div> <form id="send-message"> <input
<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>
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>
<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>
<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>
app.js
<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>
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);
});
});
$(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
中使用express.static()。您没有在Express服务器中建立静态资产,因此无法提供文件
<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>
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');
});
通常,您不会像我在上面的代码片段中那样将文件设置为静态文件。您需要建立一个静态目录,例如public
,然后在您的公共目录中,您可以放置可以提供服务的静态资产(CSS、JS、HTML)。ok。我在摆弄这个。我在其他地方也看到了这篇文章,但不明白为什么我需要在服务器端包含这篇文章。那部分我以后再弄清楚。但是,我得到的路径未定义。
在哪里定义了路径
变量,或者应该将其设置为什么?路径
是一个节点核心模块。你可以要求它。请参阅我的更新答案。好的。谢谢然而,我仍然得到404错误。我已经将更新后的代码包含到server.jspath.join(uu dirname,'/app.js')
输出到我要查找的文件的正确路径…仍然收到404个错误。谢谢你的帮助!
<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>