Как мне обновить sh браузер со стороны сервера с node.js? - PullRequest
Новая
       23

Как мне обновить sh браузер со стороны сервера с node.js?

2 голосов
/ 07 февраля 2020

Я хочу перезагрузить страницу, когда мои html файлы изменены (во время разработки) из-за ошибки HMR в html -webpack-plugin и webpack-dev-middleware (webpack-hot-middleware).

Вот два репозитория, где я получил эту проблему, есть проблемы в обоих.

Как я могу перезагрузить страницу с помощью этого инструмента?

  • Node.js
  • Express
  • webpack-dev-middleware

1 Ответ

3 голосов
/ 07 февраля 2020

Существует несколько способов обновить sh браузер клиента с сервера.

Отправленные на сервер события:

Один простой метод, который работает в браузерах и серверы используют отправленные сервером события . Минимальный процесс:

  1. клиент отправляет запрос на подписку на сервер с помощью EventSource () : 
var evtSource = new EventSource("<server_URL>/subscribe");
клиент устанавливает прослушиватель для входящих сообщений: 
evtSource.onmessage = function () { myPageRefresh() };

На стороне сервера установите обработчик для GET /subscribe запросов и отслеживайте подписанного клиента: 

var client = null;
app.get('/subscribe', (req, res) => {
  // send headers to keep connection alive
  const headers = {
    'Content-Type': 'text/event-stream',
    'Connection': 'keep-alive',
    'Cache-Control': 'no-cache'
  };
  res.writeHead(200, headers);

  // send client a simple response
  res.write('you are subscribed');

  // store `res` of client to let us send events at will
  client = res;

  // listen for client 'close' requests
  req.on('close', () => { client = null; }
});

// send refresh event (must start with 'data: ')
function sendRefresh() {
  client.write('data: refresh');
}

Теперь сервер может в любое время отправить событие refre sh, просто позвонив sendRefresh().

lite-server:

Если вы запускаете сервер локально на компьютере разработчика, обновление браузера довольно просто. lite-server - это модуль, который обновляет sh браузер всякий раз, когда обнаруживает изменение в исходных файлах. Это очень удобно.

...