Уроки Express.js . Основы и Middleware. Часть 1.

Всем привет! В этой и в следующих статьях мы будем рассматривать различные темы по разработке в контексте одного приложения, которое будет постепенно дорабатываться. Это приложение – веб-чат. Но это не просто веб-чат, а это веб-чат, который должен продемонстрировать правильную конфигурацию, как делать обычные страницы при помощи Node.js и фреймворка Express , как делать шаблонизацию, JSON-сервис, авторизацию, чат, Socket, как работать с базой данных и т.д. Статьи будут содержать в себе материалы сделанные с использованием версией фреймворка Express 3, сейчас актуальной версией  является Express 4. Устаревшие features Express 3 в статьях не используются, так что единственное существенное отличие – в Express 4 это то , что многие библиотеки были вынесены отдельно из фреймворка, см. Migrating from 3.x to 4.x. Если вы хотите следовать нашим урокам , то рекомендуется:

npm i express@3

А далее переход на версию 4 будет для вас очевиден.

Начнем мы с технологии Express , и затем по мере разработки чата будем знакомиться с другими аспектами, которые здесь перечислены.

Итак, пустая директория. Для того, чтобы создать сайт,  будем использовать систему Express :

npm install i -g [email protected]

Express – это фреймворк на Node.js, который наиболее часто используется для создания сайтов и веб-сервисов. Установим его глобально, потому что нам понадобится специальная утилита Express. Она позволяет быстро генерировать структуру сайта, самые основные файлы.

 express –help

показывает опции. Нам  понадобятся:

express –s  –e

то есть, в только что созданный сайт подключить сразу поддержку сессий и поддержку шаблонизатора --ejs. Как подключается и что работает мы посмотрим уже по ходу дела. Итак, готово.

Открываем это в WebStorm. Вместо него может быть и любой другой удобный вам редактор, и смотрим что cгенерировалось. App.js – это самый главный файл, мы посмотрим его в деталях очень скоро.

/**
 * Module dependencies.
 */

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

 Package.json– это основной файл приложения. Добавим туда название нашего проекта.

{
  "name": "chat",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.3.8",
    "ejs": "*"
  }
}

Для того, чтоб проект запустился нужны dependencies. Поэтому  опять заходим в консоль и вводим:

 npm i 

То, что есть в рackage.json, поставится в node_modules. Появилась новая директория. Модули необходимые, чтобы эта штука работала поставлены. Для того, чтобы это запустить, создадим конфигурацию запуска аpp.js, ставим галочку в Single instance only для удобства перезапуска. Запускаем. Переходим в Chrome:

http://localhost:3000/

На этом порту наше приложение теперь что-то«слушает» , что-то работает.

Возвращаемся обратно в проект. Тут много всего сгенерировано, для того, чтоб нам было проще, оставим только то, что нам действительно необходимо, чтобы Express работал. Это не так много:

– подключить Express,
– создать приложение, это создает функцию, которая используется для того, чтобы обрабатывать запросы:

var express = require('express');
var app = express();

Далее добавляем http-сервер:

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Соответственно, Express будет обрабатывать все приходящие запросы. Нам еще понадобятся модули http.

var express = require('express');
var http = require('http');
var path = require('path');

var app = express();

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Aрp.get получает значение из специального скрытого свойства объекта арp, который устанавливается так (добавим в наш app.js):

app.set('port', 3000);

Все остальное мы пока закомментируем, оно нам не надо.

var express = require('express');
var http = require('http');
var path = require('path');

var app = express();
app.set('port', 3000);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Теперь, если все это запустить, то получим сервер, который слушает на порту 3000, но ничего не делает. Почему? Да потому, что функция еxpress по умолчанию никак запросы не обрабатывает. Чтобы она их обрабатывала, ей нужно добавить специальный обработчик, который в терминологии Express называется Middleware. Он выглядит так же, как и обычная функция, принимает req и res, передает все объекты и может что-то сделать:

// Middleware  
app.use(function(req, res, next) {  
    res.end("Hello");  
});

Такая функция на все запросы будет отвечать одинаково. Запускаем. Проверяем. Работает!

Чем отличается Middleware от обычного обработчика on.request? Тем, что у него есть третий параметр  next. Он служит для того, чтобы объединять Middleware в цепочки. Например, есть один Middleware, а ниже делаем другой Middleware.  Первый из них проверяет, если

if (req.url == '/') {

то вызвать

} else {

А иначе  – передать управление дальше:

next();

Мы скоро продолжим, увидимся!  Код урока доступен по ссылке.

Материалы для статьи взяты из данного скринкаста.

We are looking forward to meeting you on our website soshace.com