节点：文件更改时自动刷新浏览器

Question

我希望我的节点应用程序在文件更改时自动刷新我的浏览器（无外部应用程序）。

我想避免使用 webpack 开发服务器，因为它不允许我使用自己的 koa 服务器，而且通常使用起来很麻烦。

如何在文件更改时自动刷新浏览器？

Answer 1

尝试使用watchr:

koa-app.js：

/.../
var watchr = require('watchr');
watchr.watch({
    paths: [__dirname], listeners: {
        change: function() {
            // Emits an event to all connected clients 
            io.sockets.emit('browserReload');
        }
    }
})

client-side.js：

  /.../
  socket.on('browserReload', function () {
     // Reload without using cache
     document.location.reload(true);
  });

Answer 2

所以我想通了。

事实证明 koa-socket 的 API 可能适用于某些人，但它通常是一堆不必要的臃肿。此外，观看过程很棒，但如果您已经有节点脚本这样做，那就是多余的，并且会破坏您的代码。

我最终使用一些非常简单的代码将 socket.io 附加到我的 Koa 服务器：

server.js

var app = require('koa')();
var server = require('http').createServer(app.callback());
var io = require('socket.io')(server);
io.on('connection', function(){ /* … */ });
server.listen(3000);

这很好用。下一步是在客户端连接到我的 Koa 服务器。这段代码也很简单：

client.js

var socket = require("socket.io-client")("http://localhost:3000");

所以现在 socket.io 正在我的服务器上运行，客户端可以连接到它。由于节点包和脚本（如 supervisor/nodemon），我的服务器在任何文件更改时都会重新启动。

下一步很简单：当文件更改时，服务器重新启动，当服务器重新启动时，向所有客户端发出 socket.io 事件，强制重新加载页面。代码如下所示：

server.js

var serverRestarted = true;

if (serverRestarted === true) {
    io.emit("browserReload");
    serverRestarted = false;
}

client.js

socket.on("browserReload", function() {
    document.location.reload(true);
});

就是这样。当然，解决没有按预期工作的包或对我习惯使用的 API 进行未记录更改的包是一件很痛苦的事情......所以我没有使用它们。

我最终得到了一些在开发过程中效果很好的东西。