如何修改页面后，页面自动刷新

如何在修改页面后，让页面自动刷新?

答案是使用 socket.io 。

socket.io 是一个 WebSocket 库，包括了客户端的 js 和服务器端的 nodejs ，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从 WebSocket 、 AJAX 长轮询、 Iframe 流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达 IE5.5。

具体如何使用 socket.io 可以看官方文档。

如何实现

首先开启 node 服务

const Koa = require('koa');
const http = require('http');
const app = new Koa();
const server = http.createServer(app.callback());
const io = socketIo.listen(server);
server.listen(3000);
复制代码

然后需要监听文件的修改，需要用到 chokidar

chokidar.watch(process.cwd(), {
  // 忽略 node_modules
  ignored: /node_modules/
}).on('change', () => {
  // 当文件发生变化，socket 触发 reload
  io.emit('reload');
}).on('unlink', () => {
  // 当删除文件，socket 触发 reload
  io.emit('reload');
});
复制代码

然后在打开文件时，需要去注入 socket

reloading() {
  return async (ctx,next) => {
    await next();
    // 判断 content-type 类型
    if(ctx.contentType === 'text/html) {
       const injectHtml = await new Promise(resolve => {
        ctx.body.on('data', chunk => {
          chunks += chunk;
        });
        ctx.body.on('end', () => {
          // 注入 socketIoSctipt
          const val = chunks.replace('</head>', body => {
            return socketIoSctipt + body;
          }
          resolve(val);
        });
      });
      ctx.set('Content-Type', 'text/html; charset=utf-8');
      ctx.body = injectHtml;
    }
  }
}
复制代码

socketIoSctipt 的值是

<script src="/socket.io/socket.io.js"></script>
<script>
// 默认是使用 websocket，如果浏览器不支持 webscoket，就使用 ajax 轮询
var _$_socket=io({transports:["websocket","polling"]});
// 当服务端触发 reload 事件，客户端监听到后执行回调
_$_socket.on("reload",function(){window.location.reload()});
</script>
复制代码

最后当你在编辑器上修改文件的代码后，页面会自动刷新。

不仅仅是 html 文件可以这样，其他类型的文件也可以。

参考 npm 包： staticky

转载于:https://juejin.im/post/5ce7a53de51d4556dc293591