[FAQ] 自动刷新功能失效的排查步骤

hefangshi commented 10 years ago

使用自动刷新功能会使样式调整与静态页制作工作变的异常方便，因此很多同学对FIS的自动刷新功能感兴趣，但是使用过程中经常遇到问题，因此简单介绍下FIS实现自动刷新的原理以及出现问题后的排查步骤。

FIS开启自动刷新功能的方法是

fis release --watch --live

可以缩写为

fis release -wL

其中watch参数代表监听项目的文件修改，而live参数则表示在文件修改后触发自动刷新。

FIS实现自动刷新的原理是在使用--live参数进行FIS发布后，会启动一个livereload server，他的功能是启动一个小型的websocket服务器，可以与浏览器进行实时通信，通知浏览器自动刷新。

而启动了livereload server后，我们还需要浏览器端的页面主动与server通信接收自动刷新事件，因此FIS在开启--live的情况下，会对所有页面注入livereload.js埋下脚本，启动与server的通信通道。

在通道建立完成后，当FIS项目中的文件修改后，会通过--watch自动触发重新编译与发布至目标路径，发布完成后，会由livereload server发布自动刷新事件，浏览器端的livereload.js接收到自动刷新请求后，就会进行页面刷新。

原理说完了，我们看看遇到自动刷新问题应该如何排除

livereload server启动问题

需要确认fis release时使用了 --watch --live 参数

在开启watch与live后，命令行或Shell会被Hold住，无法进行任何输入，这代表fis release已经启动了监听服务，所有的文件修改与发布进度都会继续在这里输出。如果使用 ctrl+c 就会停止监听，但是同时FIS也就关闭了自动编译与自动刷新功能。
livereload server默认使用8132端口，因此如果端口被占用，系统会报错
```
Error: LiveReload server Listening failed: listen EADDRINUSE
```
解决方法是释放8132端口占用，或者通过fis-conf.js配置新的livereload端口
```
//fis-conf.js
fis.config.set('livereload.port', 8133);
```
如果机器拥有多个IP，FIS可能会使用了错误的IP，使浏览器无法访问到正确的livereload server，这时就需要通过fis-conf.js配置指定浏览器可以访问到的IP地址
```
//fis-conf.js
fis.config.set('livereload.hostname', '177.17.17.17');
```
浏览器livereload监听问题
确认websocket支持

livereload的实现是基于websocket的，因此需要确认浏览器支持websocket功能，一般大家常用的Chrome都是支持的，而类似360、遨游等浏览器只要开启了webkit内核的极速模式，也是支持的。

确认页面中已经正确的埋入livereload.js，可以通过源代码查看来确认

如果没有找到livereload.js，可以先尝试 fis release -cwL 清除编译缓存重试一次。此外，由于埋入livereload.js的方法是对 </body> 标签进行替换，如果页面的项目 源文件 中不包含 </body> 标签，就无法进行livereload.js的埋入，出现这种情况的大部分原因是使用了自定义的body标签，如fis-plus的 {%body%}{%/body%} 标签，在这种情况下，我们可以通过添加埋点注释来解决这个问题

<!DOCTYPE html>
<!-- 使用html插件替换普通html标签，同时注册JS组件化库 -->
{%html framework="common:static/mod.js" class="expanded"%}
   <!-- 使用head插件替换head标签，主要为控制加载同步静态资源使用 -->
   {%head%}
       <meta charset="utf-8"/>
       <meta content="{%$description%}" name="description">
       <title>{%$title%}</title>
       {%block name="block_head_static"%}{%/block%}
   {%/head%}
   <!-- 使用body插件替换body标签，主要为可控制加载JS资源 -->
   {%body%}
       {%block name="content"%}{%/block%}
       <!--添加livereload注释-->
       <!--livereload-->
   {%/body%}
{%/html%}

通过手动添加  我们就可以保证页面中能够正确的加上livereload.js脚本

确认livereload.js加载正常

这一步主要是通过网络请求监控来确认，比如使用Chrome的Developer Tools，如果livereload.js出现404加载错误，则是livereload server异常导致，可以尝试重启 fis release --watch --live，并按照livereload server启动问题进行进一步排查