在node.js web app

Question

我正在学习node.js，并开始使用常见的聊天应用示例。我得到了一切正常但不是在index.html文件中执行所有javascript内联，我想把它放在它自己的名为app.js的文件中。但是，一旦我这样做，我在文件中找不到404。我正在尝试使用src路径，但无法找到该文件。在节点应用程序中引用自定义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服务器端的操作。像往常一样使用标准Web应用程序添加自定义js文件似乎不是正确的方法。我注意到，在我看过/读过的几乎所有教程/文档中，他们通过调用cdn url来引用诸如jquery和bootstrap之类的库，而不是将这些文件包含为模块或本地目录。基于此和我继续得到的404错误，我假设有一种不同的方式在Web应用程序中包含对本地文件的外部js引用。

提琴手输出：

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)

Answer 1

您需要在express.static()中使用server.js。您未在Express服务器中建立静态资产，因此无法提供文件。

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）。