Основы Node JS ( II ).

В этой части мы создадим свой собственный сервер,разберем работу с потоками, функцию pipe и маршрутизацию.

Все материалы по JavaScript

Создание сервера на Node.js

Подключаем нужный модуль - http.

В этом модуле есть функции, которые позволят нам создать свой собственный сервер.

В переменную поместим вновь созданный сервер.

Для того, чтобы посылать на него данные и принимать ответы и статус (найдена или нет страница и пр.).

Все это внутрь нашей функции.

Теперь указываем порт.

let http = require('http');

let server = http.createServer( function (req, res) {
 res.writeHead( 200, {'Content-Type':'text/plain'});
 res.end('Hello. It is new server');
});
server.listen(8080,'localhost');
console.log('Server run on port 8080');

Откроем страницу http://localhost:8080/ в браузере и увидим наш текст.

Пока что наше приложение не реагирует на введение в адресную строку наименований.

Что бы мы не ввели, после http://localhost:8080/, страница никак не изменится.

В дальнейшем мы это исправим. а пока что мы сможем видеть ввод пользователем url в консоли:

Добавим строку console.log('URL страницы : ' + req.url); в начало функции.

let http = require('http');

let server = http.createServer( function (req, res) {
 console.log('URL страницы : ' + req.url);
 res.writeHead( 200, {'Content-Type':'text/plain'});
 res.end('Hello. It is new server');
});
server.listen(8080,'localhost');
console.log('Server run on port 8080');

Введем некий адрес и нажмем Enter.

В консоли мы увидим тот, адрес, что мы ввели в адресной строке и favicon.ico (это от Google Chrome), остальное - наш ввод.

Работа с потоками в Node JS.

Чтение файла.

Для того, чтобы понять, что такое потоки, проще всего представить, что вы смотрите большой фильм на youtube.

При этом, вы не ждете, когда это видео полностью загрузится. Загружается некая малая часть и начинается просмотр. Остальное подгружается в момент просмотра.

В Node.js мы можем также показывать большие объекты некими частями, подгружая их по мере прокрутки страницы (например), или по мере чтения большого текста.

Представьте, что у нас есть файл с очень большим объемом текста. Такой файл было бы проще читать по частям, а не ждать загрузки всего текста целиком.

В модуле fs есть функция, которая позволит это сделать, поэтому мы первым делом, подключаем его.

Создадим новую переменную. Назовем как угодно.

let myReadShort = fs.createReadStream(path, options);

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

Путь к файлу указываем с помощью __dirname.

Второй параметр опционный.

Таким образом данные большого файла будут считываться постепенно и помещаться в переменную myReadShort.

В метод .createReadStream() уже встроен обработчик событий, поэтому. когда мы будем получать новые данные из файла мы их будем выводить в консоль.

Используем метод .on(). В нем мы отслеживаем событие 'data'. Это событие предустановленное и оно будет срабатывать, когда мы будем получать новый кусок данных из большого файла.

Вторым параметром пропишем функцию, которая будет принимать параметр (chunk - малый кусок данных, хотя можно дать свое название).

let fs = require('fs');

let myReadShort = fs.createReadStream(__dirname + '/big-text.txt');

myReadShort.on('data', function(chunk){
 console.log('Полученны новые данные \r \n' + chunk );
})

Если вы все сделали правильно то вы увидите постепенный вывод огромного текста в консоль.

Бывает, что для отображения кириллицы, стоит дописать опционный параметр в функцию fs.createReadStream(__dirname + '/big-text.txt', 'utf-8')

Запись данных потоками.

Отменим вывод в консоль наших chunk и добавим в код новую переменную

let fs = require('fs');

let myReadShort = fs.createReadStream(__dirname + '/big-text.txt','utf-8');
let myWriteShort = fs.createWriteStream(__dirname + '/news-big-text.txt');

myReadShort.on('data', function(chunk){
 console.log("Получены новые данные : ");
 myWriteShort.write(chunk);
});

Функция pipe(), работа с HTML и JSON.

Функция pipe().

Посмотрим на код выше и мы увидим. что все, что мы здесь делали, это записывали по частям информацию из одного файла в другой.

Функция pipe() делает тоже самое и поэтому мы можем легко переписать наш код:

let fs = require('fs');

let myReadShort = fs.createReadStream(__dirname + '/big-text.txt','utf-8');
let myWriteShort = fs.createWriteStream(__dirname + '/news-big-text.txt');

// myReadShort.on('data', function(chunk){
//  console.log("Получены новые данные : ");
//  myWriteShort.write(chunk);
// });

myReadShort.pipe(myWriteShort);

Если запустить, то будет тоже самое - создастся новый файл с неким текстом.

Эта функция очень полезна для передачи данных на сервер.

Перенесем наш код локального сервера в этот файл, ниже.

let fs = require('fs');

let myReadShort = fs.createReadStream(__dirname + '/big-text.txt','utf-8');
let myWriteShort = fs.createWriteStream(__dirname + '/news-big-text.txt');

myReadShort.pipe(myWriteShort);

let http = require('http');

let server = http.createServer( function(req, res){
 res.writeHead(200, {'Content-Type':'text/plain; charset=utf-8'});
 res.end('Hello It is new server');
});
server.listen(8080, 'localhost');
console.log('Server run on 8080 port');

Теперь мы будем выводить не запись Hello It is new server, а целый файл.

let fs = require('fs');



let http = require('http');

let server = http.createServer( function(req, res){
 res.writeHead(200, {'Content-Type':'text/plain; charset=utf-8'});
 let myReadShort = fs.createReadStream(__dirname + '/big-text.txt','utf-8');

  myReadShort.pipe(res);

});
server.listen(8080, 'localhost');
console.log('Server run on 8080 port');

Очень много текста на страницу вывелось частями (оптимизировано).

Вывод HTML.

Создадим простой html - файл.

Можно даже добавить стили.

Файл index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Заголовок страницы.</title>
 <style>
  body {
   background-color: #fafafa;
   font-family: Lato;
   font-size: 18px;
   color:#2A2A2A;
  }
  .container {
   margin: 10px 40px;
  }
 </style>
</head>
<body>
 <div class="container">
 <h1>Hello, It is my first page on Node.js</h1>
 <h2>Заголовок второго уровня.</h2>
 <p>Равным образом укрепление и развитие структуры способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Равным образом начало повседневной работы по формированию позиции требуют от нас анализа существенных финансовых и административных условий.</p>
 <h3>третьего уровня заглавие.</h3>
 <p>Значимость этих проблем настолько очевидна, что консультация с широким активом позволяет выполнять важные задания по разработке систем массового участия. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.</p>
 <p>Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.</p>
 </div>
</body>
</html>

Теперь возникает вопрос - как это вывести на страницу?

text/plain - вывод просто текста

text/html - вывод html.

Вместо файла, который читаем - название нашего файла - index.html

let fs = require('fs');



let http = require('http');

let server = http.createServer( function(req, res){
 res.writeHead(200, {'Content-Type':'text/html; charset=utf-8'});
 let myReadShort = fs.createReadStream(__dirname + '/index.html','utf-8');

  myReadShort.pipe(res);

});
server.listen(8080, 'localhost');
console.log('Server run on 8080 port');

Мы вывели весь наш файл со стилями. И главное. то что мы вывели его постепенно. Если бы страница была очень большая, то она выводилась бы частями (chunk) и вывод не мешал бы пользователю.

Вывод JSON.

'Content-Type':'application/json' -вывод JSON формата на страницу.

Сам объект

Конвертировать его в строку на выводе.

let fs = require('fs');

let http = require('http');

let server = http.createServer( function(req, res){
 console.log('URL страницы : ' + req.url);
 res.writeHead(200, {'Content-Type':'application/json; charset=utf-8'});

 let obj = {
  model:'Audi',
  speed:'134 km',
  wheels: 4
 };
 res.end(JSON.stringify(obj));
});
server.listen(8080, 'localhost');
console.log('Server run on 8080 port');

Маршрутизация Node JS

Будем выдавать разные html-страницы на разные url-запросы.

let fs = require('fs');
let http = require('http');

let server = http.createServer(function(req, res){
 console.log('URL страницы : ' + req.url);
 if (req.url === '/index' || req.url === '/') {
 res.writeHead(200,{'Content-Type':'text/html; charset=utf-8'});
 fs.createReadStream(__dirname + '/index.html').pipe(res);
 }
});

server.listen(8080, 'localhost');
console.log('Server run on 8080 port');

Если сейчас попробовать в адресную строку ввести какой то адрес отличный от/ или /index, то мы получим долгую загрузку и ничего более.

Точно так же можно подключить еще одну страницу:

Файл about.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Заголовок страницы.</title>
 <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
 <style>
  body {
   background-color: #77F39E;
   font-family: 'Poppins', sans-serif;
   font-size: 1.2rem;
   color:#2f2f2f;
  }
  .container {
   margin: 10px 40px;
   padding: 20px;
  }
  img {
   float: left;
   margin-right: 20px;
   width: 300px;
   height: 300px;
  }
 </style>
</head>
<body>
 <div class="container">
 <h1>Hello, It is my first page on Node.js</h1>
 <h2>Заголовок второго уровня.</h2>
 <p>Равным образом укрепление и развитие структуры способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Равным образом начало повседневной работы по формированию позиции требуют от нас анализа существенных финансовых и административных условий.</p>
 <h3>третьего уровня заглавие.</h3>
 <p>Значимость этих проблем настолько очевидна, что консультация с широким активом позволяет выполнять важные задания по разработке систем массового участия. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.</p>
 <p>Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.</p>
 </div>
</body>
</html>

Такая маршрутизация сложна для чтения, но это только потому, что мы не используем фреймворки (например Express). Это чистый код нужен для понимания того, как работает маршрутизация на NodeJS