browsersync简单使用和原理分析

0

1. 静态文件模式

browser-sync start --server --files "css/*.css" "*.html"

2. 代理模式

browser-sync start --proxy "localhost" --files "*.php" "css/*.css"
title

在浏览器中输入http://192.168.0.103:3000/test.php, 浏览器所在的机器的ip为 192.168.0.100

在browsersync运行的机器上使用netstat查看3000端口的连接情况,得到如下图
title

Window下通过资源管理器查看到是chrome进行的连接
title

原理:浏览器请求到达192.168.0.103:3000端口时, node此时相当于一个反向代理,node会向localhost:80获取内容,然后再添加一段javascript代码,如下
title

然后,javscript代码打开tcp通道和node保持链接,当对方有动作时,通过这个打开的通道发送通知,例如当node检测到文件有改动了,会通过tcp通道通知浏览器刷新; 当javascript代码检查到浏览器有可以上报的动作时(例如屏幕滚动),会通过这个tcp通道上报给node,由node分发给其它终端,从而实现多终端屏幕同时滚动

通过wireshark抓包验证

  1. wireshark 抓包过滤规则写: tcp port 3000
  2. 在web服务器编辑test.php,然后保存

wireshark中看到这么一条tcp消息(第11个包)
title

浏览器从第12个包开始,重新刷新内容
title

你可能感兴趣的

载入中...