Флеш-сообщения (Flash) — JS: Веб-разработка

В веб-фреймворках есть один очень простой и полезный механизм, который называется Flash. Этот механизм не имеет ничего общего с технологией Flash, как можно было бы подумать. Он используется в ситуациях, когда пользователя надо оповестить об успешном/не успешном выполнении какого-либо действия, например, после аутентификации показать сообщение "Вы вошли!". Такая задача возникает, почти всегда, после отправки форм на сайте.

Особенность этого механизма в том, что он должен запомнить сообщение в рамках одного запроса и вывести его на другой HTTP-запрос. Обычно это связано с редиректом после выполнения какой-либо операции пользователем. Например, если мы регистрируемся, то создание флеш сообщения происходит в момент POST /users, а вывод уже после редиректа на главную страницу. Способ, который для этого используется - записать данные в сессию пользователя, для того чтобы извлечь их при следующем запросе.

app.delete('/session', (req, res) => {
  req.flash('info', 'Good bye')
  req.session.destory()
  res.redirect('/')
})

Обратите внимание, что потенциально можно вызывать функцию flash много раз.

Обычно флеш сообщения делят на уровни: info, success, warning, которые при выводе различаются цветовой схемой, чтобы обозначать и разделять типы сообщений.

Ниже приведён пример подключения соответствующей библиотеки:

npm i @fastify/flash

import flash from '@fastify/flash'
import fastifyCookie from '@fastify/cookie'
import fastifySession from '@fastify/secure-session'

await app.register(fastifyCookie)

await app.register(fastifySession, {
  secret: 'a secret with minimum length of 32 characters',
})

await app.register(flash)

Пример вывода сообщений в шаблоне:

for message in flash
  .alert(class=`alert-${message.type}`)
    = message.message

Для работы плагина, мы дополнительно подключили куки и сессии. Таким образом флеш-сообщения могут сохраняться между запросами. Это может быть полезно при редиректе:

app.post('/users', function (req, res) {
  try {
    // ...
    req.flash('success', { type: 'success', message: 'Пользователь зарегистрирован' })
  }
  catch (e) {
    req.flash('error', { type: 'info', message: 'Ошибка регистрации' })
  }
  res.redirect('/users')
})

app.get('/users', (req, res) => {
  res.view('src/views/users/index', { messages: res.flash() })
})

На сайте Хекслета можно увидеть множество таких флеш сообщений в разных местах. Внешний вид и типы сообщений целиком взяты из Bootstrap.

Bootstrap alerts

Самостоятельная работа

1. Проделайте все шаги из урока у себя на компьютере
2. Добавьте в приложение вывод флеш сообщения об успешности или неудаче при регистрации нового пользователя. Если хотите сделать флеш сообщения более информативными для пользователя, можно подсветить их разными цветами в зависимости от результата действия. Например, при успешной регистрации вывести сообщение зеленым цветом, а при возникновении ошибок - красным. Для этого можно использовать Bootstrap
3. Залейте изменения на GitHub