browsersync简单使用和原理分析

1. 静态文件模式

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

2. 代理模式

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

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

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

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

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

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

通过wireshark抓包验证

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

wireshark中看到这么一条tcp消息（第11个包）

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