如何使用 node.js 从服务器端刷新浏览器？

Question

由于 html-webpack-plugin 和 webpack-dev-middleware (webpack-hot-middleware) 中的 HMR 错误，我想在 html 文件更改（开发时）时重新加载页面) 互操作。

这里有两个存储库我遇到了这个问题，两者都有问题。

如何使用此工具重新加载页面？

Node.js
快递
webpack-dev-middleware

Answer 1

有几种方法可以从服务器刷新客户端的浏览器。

服务器发送的事件：

一种跨浏览器和服务器的简单方法使用服务器发送的事件。最小的过程是：

客户端向服务器发送订阅请求 EventSource():

var evtSource = new EventSource("<server_URL>/subscribe");

客户端为传入消息设置侦听器：

evtSource.onmessage = function () { myPageRefresh() };

在服务器端，为 GET /subscribe 请求设置处理程序并跟踪订阅的客户端：

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

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');
}

现在服务器可以随时发送刷新事件，只需调用 sendRefresh()。

精简版服务器：

如果您是运行开发计算机上的本地服务器，刷新浏览器非常容易。 lite-server 是一个模块，它会在检测到源文件发生更改时刷新浏览器。非常好用。

如何使用 node.js 从服务器端刷新浏览器？

How do I refresh browser from server-side with node.js?

node.js

express

webpack

server

webpack-dev-middleware