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

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

所以我想通了。

\n\n

事实证明 koa-socket 的 API 可能对某些人有用，但它通常是一堆不必要的膨胀。另外，观看该过程很棒，但如果您已经有节点脚本执行此操作，那么它是多余的，并且会破坏您的代码。

\n\n

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

\n\n

服务器.js

\n\n

var app = require(\'koa\')();\nvar server = require(\'http\').createServer(app.callback());\nvar io = require(\'socket.io\')(server);\nio.on(\'connection\', function(){ /* \xe2\x80\xa6 */ });\nserver.listen(3000);\n

\n\n

这效果很好。下一步是在客户端连接到我的 Koa 服务器。该代码也非常简单：

\n\n

客户端.js

\n\n

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

\n\n

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

\n\n

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

\n\n

服务器.js

\n\n

var serverRestarted = true;\n\nif (serverRestarted === true) {\n    io.emit("browserReload");\n    serverRestarted = false;\n}\n

\n\n

客户端.js

\n\n

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

\n\n

就是这样。当然，处理那些不能按预期工作或对我习惯使用的 API 进行未记录的更改的软件包是一件痛苦的事情……所以我没有使用它们。

\n\n

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

\n