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

逃离我推掉我的手 2022-10-01 11:51 214阅读 0赞

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

**答案是使用 `socket.io` 。**

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

具体如何使用 `socket.io` 可以看[官方文档][Link 1]。

### 如何实现 ###

首先开启 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` 的值是

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

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

参考 npm 包： [staticky][]

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

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fsocket.io%2Fdocs%2F
[staticky]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fyupeilin123%2Fstaticky