Реализация уведомлений через сокеты и Nginx с использованием бесплатного SSL / TLS-сертификата Let's Encrypt и его использование в приложении React

Несколько дней назад мой главный операционный директор сказал мне: «Привет, Рафа, пора держать пользователей в курсе событий в нашем SaaS, когда завершится процесс сканирования».

Отсюда, вы знаете, как технический директор я предложил своей команде перенести красивую карточку отставания на следующую весну.

1. Нам нужен был новый процесс сокета, запущенный на одном из наших серверов.
2. Также, чтобы подавать сигнал, когда процесс очистки закончился каждые 2 часа, каждый день.
3. Получение этого сигнала в нашем SaaS (называемом eBill ), а затем отображение красивого уведомления на экране.

1. Простой процесс Node, запущенный на одном из наших серверов.

const http = require('http').createServer();
const io = require('socket.io')(http, {
    cors: {
         origin: ["http://localhost:3000", /\.aymconsultores\.es$/],
         methods: ["GET", "POST"]
    }
});
io.on('connection', (socket) => {
  console.log('User connected');
  socket.on('message', (message, source) =>     {
    io.emit('eBill', `${message} ${source}` );
  });
});
http.listen(7985, () => console.log('listening on http://localhost:7985') );

Кроме того, интересно отметить предыдущий процесс прослушивания на localhost, порт 7985 (поэтому не забудьте открыть этот порт или тот, который вы используете).

2. Сигнал об окончании процесса соскабливания.

Мы используем Pupeteer и Cheerio для очистки разных источников. Эти процессы также выполняются на том же сервере, что и предыдущий.

Вы можете потребовать библиотеку socket.io-client в верхней части приложения узла (в нашем случае очистить) и определить сервер, на котором сокет прослушивает:

const io = require("socket.io-client");
const socket = io('http://localhost:7985');

const query = pgp.helpers.insert(myNewArr, cs);
const queryRowCount = await db.result(query, a => a.rowCount);
// email here
smtpTransport.sendMail({
  from: process.env.EMAIL_USER,
  to: "[email protected]",
  subject: "Indra was succesfully scraped at " + moment().tz('Europe/Madrid').format(),
  text: rowsAffected.length + ' new rows were updated \n' + JSON.stringify(rowsAffected)
}, (error, info) => {
  if (error) {
    console.error("error sending email. " + error);
  } else {
    console.log('email sent');
    socket.emit('message', 'There was a new update coming from ',     'INDRA');
    process.exit(0);
}

💃🏻💃🏻 Самое интересное вот-вот наступит! 💃🏻💃🏻

3. Получение уведомления в нашем SaaS (называемом eBill)

Обнаружены проблемы:

• eBill обслуживается с использованием безопасного соединения (https), поэтому мы не можем использовать небезопасное соединение (как, конечно, http://localhost:7985 is), поскольку это смешанный контент, и некоторые браузеры просто не позволяют этого.
• eBill находится на другом сервере. На самом деле это просто служба, больше похожая на стек Docker Swarm, поэтому будьте осторожны с CORS, потому что это разные службы на разных серверах.
• Мы используем Traefik в качестве обратного прокси для обслуживания множества сервисов, поэтому порт 443 уже занят Traefik. Нам нужен был еще один.
• Определенно нам нужен обратный прокси, чтобы получить правильный URL-адрес транспорта сокета в eBill, иначе мы получим net :: ERR_FAILED.

• Используйте A-запись DNS для разрешения имени поддомена. Я имею в виду, что IP-сервер - это что-то вроде abcd, а нам нужно что-то вроде notifications.aymconsultores.es. Вы можете сделать это у своего хостинг-провайдера.
• Получите бесплатный сертификат SSL / TLS Let's Encrypt для этого поддомена и другого порта SSL (например, 9443) с помощью Certbot .
• NGINX будет действовать как второй обратный прокси-сервер, а затем сможет подключиться к http://localhost:7985 из https://notifications.aymconsultores.es:9443, который является URL-адресом, который нам нужно определить в eBill.

const socket = io(‘https://notifications.aymconsultores.es:9443');

location ~* \.io {
      #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header Host $host;
proxy_pass http://localhost:7985;
proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }

Итак, это уведомление, которое пользователи будут смотреть на eBill, когда процесс парсинга на сервере завершится:

Кстати, я использую библиотеку notistack в проекте React.