Файлы ресурсов в NodeJS

Давайте теперь научимся отдавать браузеру файлы ресурсов. Под ресурсами понимаются файлы картинок, файлы CSS стилей, файлы клиентских скриптов и так далее.

Давайте рассмотрим работу с ресурсами на примере картинок. Пусть, например, по адресу /page.html мы хотим отдавать HTML файл, а по адресу /image.png - картинку.

Сделаем это:

javascripthttp.createServer(async (request, response) => {
  if (request.url != '/favicon.ico') {
    let data;
    let type;
    
    if (request.url === '/page.html') {
      data = await fs.promises.readFile('page.html', 'utf8');
      type = 'text/html';
    }
    
    if (request.url === '/image.png') {
      data = await fs.promises.readFile('image.png');
      type = 'image/png'; // правильно укажем mime-тип
    }
    
    response.writeHead(200, {'Content-Type': type});
    response.write(data);
    response.end();
  }
}).listen(3000);

Автоматические запросы браузера

Рассмотрим следующую HTML страницу:

html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my page</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
  </head>
  <body>
    <p>
      my first page on NodeJS
    </b>
    <img src="img.png">
  </body>
</html>

Как вы видите, на данной странице подключается CSS файл, JavaScript файл, а также картинка. Это значит, что когда браузер получит и прочитает HTML код нашей страницы, он автоматически отправит серверу еще 3 запроса для получения указанных файлов.