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個包開始，從新刷新內容