动刷新原理

社区里大多数的自动刷新工具都是使用livereload实现的，下面我们就分析一下它的内部原理是什么？

场景：当在编辑器中修改文件内容并保存时，浏览器自动刷新页面；

分析：监听文件的修改，并且把修改的动作通知浏览器。监听操作可以用chokidar模块完成，通知操作可以用websocket来做。

根据以上的分析，我们要搭建一个小服务器，这个服务器可以访问被修改的文件、监听文件修改以及与浏览器通信。

浏览器这边通过websocket接收服务器传来的指令来刷新页面内容，页面刷新的逻辑可以封装在livereload.js中，这是一个单独的js文件，可以由html文件引入。

整个流程如下图。
 

document.images可以获取文档中所有图片的dom对象，将每个图片地址加一个版本号即可刷新。

这里获取的图片可能不是本次修改的，那么如何获取当前被修改的文件呢？

如果图片是自动刷新服务的资源，那么它的src应该是localhost:3000/图片的路径/图片名称。

图6中websocket传给页面的数据中包含了文件在代码目录下的路径，如果被监听的目录下的图片被修改，那么它的路径（/home/用户名/图片的路径/图片名称）和src会有一段重合的部分，反之，就不会有重合的部分。这里就用这个小技巧来排除不需要更新的图片。

6）更新行内样式中的背景图

（编辑：甘孜站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!