修改页面，页面自动刷新
2019-05-24 字数统计：8.6k 字 阅读时长 ≈ 8 分钟

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

答案是使用 socket.io 。

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

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

如何实现

首先开启 node 服务

1
2
3
4
5
6
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

1
2
3
4
5
6
7
8
9
10
chokidar.watch(process.cwd(), {
  // 忽略 node_modules
  ignored: /node_modules/
}).on('change', () => {
  // 当文件发生变化，socket 触发 reload
  io.emit('reload');
}).on('unlink', () => {
  // 当删除文件，socket 触发 reload
  io.emit('reload');
});

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
reloading() {
  return async (ctx,next) => {
    await next();
    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 的值是

1
2
3
4
5
6
7
<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>

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

参考 npm 包： staticky

上一页
下一页