node.js Webアプリケーションのカスタムjavascriptファイルを参照しています

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ファイルを追加するのは正しい方法ではないようです。ほとんどのチュートリアルやドキュメントでは、jqueryやブートストラップなどのライブラリを、モジュールとして、またはローカルディレクトリに入れるのではなく、cdn urlを呼び出すことで参照しています。これと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

あなたのserver.jsでexpress.static()を使用する必要があります。 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）を配置できます。