Форум

vdekameron · #1 (**permalink**) 09.06.2018, 15:26

Добрый день. Продолжаю изучать Node. По запросу пользователя http://localhost:3000/index.html?secret=o_O хочу выдавать ему простейшую страницу html состоящую из заголовка и картинки. Но через node страница загружается без картинки(((. А если просто эту страницу открываю в браузере то все норм.
Подскажите, пожалуйста, что я делаю не так?

var http = require('http');
var url = require('url');
var path = require('path');
var fs = require('fs');
 
var ROOT = __dirname + "\\deep";
 
var server = http.createServer();
 
server.on('request', function(req, res) {
    if (!checkAccess(req)) {
        res.statusCode = 403;
        res.end("Tell me the secret to access!");
        return;
    };
 
    var filePath = path.normalize(path.join(ROOT, url.parse(req.url).pathname));
    
    fs.readFile(filePath, function(err, content) {
        if (err) throw err;
 
        var mime = require('mime').getType(filePath);
        res.setHeader('Content-Type', 'text/html; charset=utf-8');
        res.end(content);
    });
 
}).listen(3000);
 
function checkAccess(req) {
    return url.parse(req.url, true).query.secret == 'o_O';
};

Вот страница которую пользователь пытается загрузить.

Код:

<!DOCTYPE html>
<html>
<head>
    <title>My page</title>
 
    <!-- meta tags -->
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- style links -->
    <link rel="shortcut icon" href="" type="image/x-icon">
    <link rel="stylesheet" href="">
 
    <!-- script link -->
    <script src="" type="text/javascript"></script>
 
    <!-- [if lt IE 9] >
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif] -->
</head>
<body>
    <h1>Hi this is my first page!</h1>
    <img src="ball.png" alt="ball">
    <!-- Live reload -->
    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
    </script>
</body>
</html>

Audaxviator · #2 (**permalink**) 12.06.2018, 10:13

Ну потому что атрибут src в теге img - это отдельный GET-запрос браузера к серверу. Соответственно, он и должен быть обслужен - как отдельный GET-запрос.
Типа:

if(req.url == '/ball.png') {
  fs.readFile(__dirname + req.url, function(err, file) {
    res.setHeader('Content-Type', 'image/png');
    res.end(file);
  });
}

vdekameron · #3 (**permalink**) 12.06.2018, 21:12

Не могли бы вы показать как поправить мой код. У меня ведь req.url == '/index.html' Который в свою очередь подтягивает уже картинку.
А если в index.html таких картинок 100, что для каждой картинки делать
if(req.url == '/ball.png')........ Непонятно как то.

Audaxviator · #4 (**permalink**) 13.06.2018, 06:54

Данный "учебный пример" (для понимания некоторых общих принципов взаимодействия браузеров с серверами) примерно так:

var http = require('http');
var fs = require('fs');
var url = require('url');

http.createServer(function(req, res) {
	
  var urlParse = url.parse(req.url, true);
	
  if(urlParse.pathname == '/index.html' && checkAccess(req)) {
    console.log(req.url);
    fs.readFile(__dirname + '/index.html', function(err, content) {
      if(err) console.log(err);
      res.end(content);
    });
  }else if(req.url == '/ball.png') {
    console.log(req.url);
    fs.readFile(__dirname + req.url, function(err, file) {
      if(err) console.log(err);
      res.setHeader('Content-Type', 'image/png');
      res.end(file);
    });
  }else{
    res.statusCode = 403;
    res.end("Tell me the secret to access!");
  }
	
}).listen(3000, () => console.log('On PORT 3000'));

function checkAccess(req) {
	return url.parse(req.url, true).query.secret == 'o_O';
}

А вообще, см. камент выше - так статику, конечно, не выдают (хоть одна картинко, хоть 100).
Ну и в целом, pathname в Node.js (и не только в Node.js, ну да ладно) - это просто строка, произвольный набор символов (нопремер, набор символов "/index.html", который можно заменить на набор "/asadsfghjk" - и всё будет работать так же), никакого указания на пути или файлы она в себе не несёт.

vdekameron · #5 (**permalink**) 14.06.2018, 14:16

Ну все получилось. Принцип я понял. Но я все же не понимаю одного - если в html появится например ball1.png то сервер его не загрузит пока мы не пропишем в сервере

else if(req.url == '/ball1.png') {//.......

Это же не логично! Объясните пожалуйста как быть в таком случае.

Alexandroppolus · #6 (**permalink**) 14.06.2018, 15:22

Сообщение от vdekameron

Это же не логично! Объясните пожалуйста как быть в таком случае.

как это не логично? всё логично

нода - это не апач для пхп, например. Здесь "из коробки" вообще нет никакого вебсервера за кадром, потому никто и не отдаст картинку вместо тебя. Всё что вручную прописал, то и будет отправлено. Даже ошибки типа 404 надо вручную отправлять )

сложно, зато максимальная гибкость. А так - обычно берут какой-нибудь express, например, и там есть модуль для статики, который просто подключаешь и он работает. Ну или можно свой написать, если есть настроение. Который просто берет путь из url, и по этому пути забирает файл из некоторой заранее определенной папки, в которой лежит статика. Если файла нет, то отдает 404. И тогда достаточно будет закинуть файл в эту папку, не понадобится специально для каждого файла свой if в коде (вообще это всё так, поиграться, потому как на больших проектах статика вообще лежит на отдельном сервере и выдается нгинксом)

Audaxviator · #7 (**permalink**) 14.06.2018, 15:56

Вот, можешь добавлять в index.html 100500 картинок, а так же сделать ещё 100 *.html с 500 картинок в каждом, и делать на них ссылки (атрибут href - это тоже GET-запрос).

var http = require('http')
	, nodeStatic = require('node-static')
	, static = new nodeStatic.Server('.', { cache: 0 })
	, url = require('url');

function foo(req, res) {
	
	var urlParse = url.parse(req.url, true);
	
	if(checkAccess(req)) {
		req.url = urlParse.pathname;
		static.serve(req, res);
		return;
	}
	
  static.serve(req, res);
}

http.createServer(foo).listen(3000, function() {
	console.log('PORT = 3000');
});

function checkAccess(req) {
	return url.parse(req.url, true).query.secret == 'o_O';
};

Короче, сервер для такого сайта - http://mongoosejs.com - готов.

Но вообще-то, чтобы отдавать на GET-запросы html-страницы с картинками, ни Node.js, ни какая другая платформа - не нужны. Нопремер Nginx с этим легко справится в одиночку.
Короче, возьми хороший учебничек Итана Брауна и не парься.

vdekameron · #8 (**permalink**) 14.06.2018, 20:34

Сообщение от Audaxviator

Короче, возьми хороший учебничек Итана Брауна и не парься.

Это учебник по node.js? Я давно ищу доступный для понимания подробный учебник по node.js но как-то пока ни какому душа не легла. Все как-то скучно, заумно.

Спасибо вам за терпение. Чет не впирается мне этот node. Думал он попроще)))

vdekameron · #9 (**permalink**) 15.06.2018, 09:46

Не могу понять почему вот так картинки не загружаются

var http = require('http');
var static = require('node-static');
var url = require('url');

var file = new static.Server('./deep', {cache:0});

var server = http.createServer();

server.on('request', function(req, res) {
	var urlParse = url.parse(req.url, true);

	if(!checkAccess(req)) {
		res.statusCode = 403;
  	res.end("Tell me the secret to access!");
  	return;
	};

	if(checkAccess(req)) {
		req.url = urlParse.pathname;
		file.serve(req, res);
		return;
	};

	file.serve(req, res);
});

server.listen(3000, function() {
	console.log('Port-3000');
});

function checkAccess(req) {
	return url.parse(req.url, true).query.secret == 'o_O';
};

Audaxviator · #10 (**permalink**) 15.06.2018, 10:36

Потому что надо убрать все return - после return жизни нет.

Форум

Справочник

Discord чат

Курсы javascript