当javascript移至外部文件时，文件不起作用

Question

I'm trying out socket.io and downloaded its GitHub project .

It worked fine, but when I tried to move the inline js code to an external file, it stopped working. Why is that so? What did I do wrong?

In its index.html file it has:

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  });
</script>

I tried to move the inline code to an external js file. I copied everything between the "script" tag and put it in a file I named "chat.js". The index.html file and chat.js are on the same level.

So now the same part in the html file looks like this:

<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="chat.js" charset="utf-8"></script>

and the chat.js file looks like this:

$(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  });

Answer 1

Based on the discussion, you would have to add the following to your index.js to serve static files in Express.

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.use(require('express').static(__dirname)); // Add this to serve static files

Else, it wouldn't able to find where is chat.js thus getting 404 error.

You can read more about it here .