Почему через fs.open() не отправляет html?

Question

Ingernirated @Ingernirated

Романыч

Node.js

Почему через fs.open() не отправляет html?

Добрый вечер,подскажите пожалуйста.
1)Почему при открытии html файла вместе с ним не открываются css?
2)Почему через fs.open он не открывает страницу?

var file = fs.open("index.html", "r");
res.writeHead(200,{"Content-type":"text/html"});
res.write(file);
res.end();

3)Как подключить стиль в данной ситуации?
Для этого нужна отдельная функция сразу же после того, как сработает первый ответ с нашим html файлом?
И как можно отследить в консоли этот запрос, почему css не открылось и увидеть ошибку?

var http = require('http');
var fs=require('fs');
var httpServer = http.createServer(function (req, res) {
var data = fs.readFile("index.html", function(err, file) {
		res.writeHead(200,{"Content-type":"text/html"});
		res.write(file);
		res.end();
});
}).listen(8000);

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">,/div>
</body>
</html>

Вопрос задан более трёх лет назад
100 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

11 комментариев

Ingernirated @Ingernirated Автор вопроса

Как можно увидеть в консоли запрос на css файл и ответ или ошибку, что он не отправился?
А без этого модуля как отправить стиль браузеру?

Написано более трёх лет назад
Антон Швец @Xuxicheta
Ingernirated,
const http = require('http'); const fs = require('fs'); const { extname } = require('path'); const types = { '.js': 'text/javascript', '.css': 'text/css', '.html': 'text.html', }; const httpServer = http.createServer(function (req, res) { fs.readFile(`.${req.url}`, function(err, data) { if (err) { return res.end('file error'); } res.writeHead(200, { 'Content-type': types[extname(req.url)] }); res.end(data); }); }).listen(8000);

При получении запроса в сервер http вызывается ваш коллбэк. В нем можно поместить вывод параметров запроса в консоль.
Или можно использовать что-нибудь такое https://www.npmjs.com/package/access-log
А ответ вы формируете сами, его лучше посмотреть в devtools в браузере.
Отправить очевидно как, в зависимости от строки запроса, искать нужный файл, читать его и отправлять в res.write() или res.send()
Написано более трёх лет назад
Ingernirated @Ingernirated Автор вопроса

Антон, он выдает километровый список, как в запросе выделить кусочек про запрос css?
И как мне сформировать ответ css?

Написано более трёх лет назад
Антон Швец @Xuxicheta

Ingernirated, ну не такой уж километровый, вот он https://nodejs.org/api/http.html#http_class_http_i...
Можете проверять req.url
Как отдать css? Как ни странно - прочесть файл style.css c диска и отправить

Написано более трёх лет назад
Ingernirated @Ingernirated Автор вопроса
Антон,
Как отдать css? Как ни странно - прочесть файл style.css c диска и отправить

можно пример кода для моего случая, где я хочу отправить один или более css файл(ов)?
Написано более трёх лет назад

Антон Швец @Xuxicheta

Ingernirated,

const http = require('http');
const fs=require('fs');
const path = require('path');

const types = {
  '.js': 'text/javascript',
  '.css': 'text/css',
  '.html': 'text.html',
};
const httpServer = http.createServer(function (req, res) {
  const fileName = '.'+req.url;
  const ext = path.extname(req.url);
  fs.readFile(fileName, function(err, data) {
      if (err) {
        res.end('file error');
        return;
      }
      res.writeHead(200, {'Content-type': types[ext]});
      res.end(data);
  });
}).listen(8000);

кажется пора уже завязывать изображать гугль

Написано более трёх лет назад

Ingernirated @Ingernirated Автор вопроса

Антон, спасибо огромное!
Т.е. когда браузер в html документе видит ещё ссылки он автоматический ещё раз отправляет запросы на сервер и пока все запросы не пройдут, не откроет страницу клиенту?

Написано более трёх лет назад

Ingernirated @Ingernirated Автор вопроса

Антон, скажи ещё пожалуйста
Почему такая проверка верная

var httpServer = http.createServer(function (req, res) {

	fileName = req.url;

	if(fileName == "/") {
		console.log("hello");
	}

var data = fs.readFile("index.html", function(err, file) {
		res.writeHead(200,{"Content-type":"text/html"});
		res.write(file);
		console.log(req.url);
		res.end();
});

}).listen(8000);

А такая запись выдает ошибку работы сервера
First argument must be a string or Buffer.
Разве я не строку передаю?

var httpServer = http.createServer(function (req, res) {

	fileName = req.url;

	if(fileName == "/") {
		fileName = "index.html";
	}

var data = fs.readFile(fileName, function(err, file) {
		res.writeHead(200,{"Content-type":"text/html"});
		res.write(file);
		console.log(req.url);
		res.end();
});

}).listen(8000);

Написано более трёх лет назад

Антон Швец @Xuxicheta

@Ingernirated
Ну тут всë несколько сложнее но в целом да

https://www.html5rocks.com/ru/tutorials/internals/...

Написано более трёх лет назад
Антон Швец @Xuxicheta

Ingernirated, отвечаю на второй вопрос.
в твоем коде при попытке запросить / сначала отдается index.html, а потом с него запрашивается /style.css
Нода ищет файл /style.css это абсолютный путь от корневого каталога, не находит его и в переменной file оказывается undefined. А там "must be a string or Buffer"
Чтобы избежать этого, в моем коде я делал const fileName = '.'+req.url;, чтобы стало ./style.css
Можно было еще убрать начальный слэш.

Написано более трёх лет назад
Ingernirated @Ingernirated Автор вопроса

Антон, спасибо!

Написано более трёх лет назад