JS-файл получает net :: ERR_ABORTED 404 (не найден)

Question

Я пытаюсь создать простой Io-веб-чат. Недавно я хотел отделить мой <script> внутри моего html-файла от внешнего js-файла.

это моя очень простая структура папок:

Chat
|-- index.html
|-- index.js
`-- server.js

Соответствующая часть HTML-файла:

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="index.js"></script>
</body>
</html>

Соответствующая часть файла index.js:

$(function() {

  //Initialize variables
  var $messageArea = $('#messages');
  var $InputMessage = $('#InputMessage');
  var $InputName = $('#InputName');

  //Initialize Socket
  var socket = io();

  //Send server Your message
  socket.emit('chat message', $InputMessage.val());

});

Соответствующая часть файла server.js:

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

Я также попытался поместить мои файлы в эту общедоступную структуру типов, которую они имеют в виде примеров socket.io:

Chat
|-- Public
|   |-- index.html
|   `-- index.js
`-- server.js

в этом случае я изменил: src="/index.js" в HTML добавлено /public/index.html в файл server.js Но не повезло.

Это все работает в localhost. Что я здесь не так делаю?

Answer 1

Как упоминалось в комментариях: вам нужен способ отправить ваши статические файлы клиенту. Это может быть достигнуто с помощью обратного прокси-сервера, такого как Nginx, или просто с помощью express.static () .

Поместите все ваши «статические» (css, js, images) файлы в специально отведенную для этого папку, отличную от той, где вы помещаете свои «просмотры» (html-файлы в вашем случае). Я назову это static для примера. Как только это будет сделано, добавьте эту строку в код вашего сервера:

app.use("/static", express.static('./static/'));

Это будет эффективно обслуживать каждый файл в вашей «статической» папке через / static route.

Запрос вашего файла index.js в клиенте, таким образом, становится:

<script src="static/index.js"></script>