browsersync簡(jiǎn)單使用和原理分析

itvincent 發(fā)布于2019-06-28 14:35 / 876人閱讀

摘要：靜態(tài)文件模式代理模式在瀏覽器中輸入瀏覽器所在的機(jī)器的為在運(yùn)行的機(jī)器上使用查看端口的連接情況，得到如下圖下通過(guò)資源管理器查看到是進(jìn)行的連接原理瀏覽器請(qǐng)求到達(dá)端口時(shí)，此時(shí)相當(dāng)于一個(gè)反向代理，會(huì)向獲取內(nèi)容，然后再添加一段代碼，

1. 靜態(tài)文件模式

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, 瀏覽器所在的機(jī)器的ip為 192.168.0.100

在browsersync運(yùn)行的機(jī)器上使用netstat查看3000端口的連接情況，得到如下圖

Window下通過(guò)資源管理器查看到是chrome進(jìn)行的連接

原理:瀏覽器請(qǐng)求到達(dá)192.168.0.103:3000端口時(shí)， node此時(shí)相當(dāng)于一個(gè)反向代理，node會(huì)向localhost:80獲取內(nèi)容，然后再添加一段javascript代碼，如下

然后，javscript代碼打開(kāi)tcp通道和node保持鏈接，當(dāng)對(duì)方有動(dòng)作時(shí)，通過(guò)這個(gè)打開(kāi)的通道發(fā)送通知，例如當(dāng)node檢測(cè)到文件有改動(dòng)了，會(huì)通過(guò)tcp通道通知瀏覽器刷新；當(dāng)javascript代碼檢查到瀏覽器有可以上報(bào)的動(dòng)作時(shí)（例如屏幕滾動(dòng)），會(huì)通過(guò)這個(gè)tcp通道上報(bào)給node，由node分發(fā)給其它終端，從而實(shí)現(xiàn)多終端屏幕同時(shí)滾動(dòng)

通過(guò)wireshark抓包驗(yàn)證

wireshark 抓包過(guò)濾規(guī)則寫(xiě)： tcp port 3000

在web服務(wù)器編輯test.php,然后保存

wireshark中看到這么一條tcp消息（第11個(gè)包）

瀏覽器從第12個(gè)包開(kāi)始，重新刷新內(nèi)容

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/26268.html

相關(guān)文章

browsersync簡(jiǎn)單使用和原理分析

摘要：靜態(tài)文件模式代理模式在瀏覽器中輸入瀏覽器所在的機(jī)器的為在運(yùn)行的機(jī)器上使用查看端口的連接情況，得到如下圖下通過(guò)資源管理器查看到是進(jìn)行的連接原理瀏覽器請(qǐng)求到達(dá)端口時(shí)，此時(shí)相當(dāng)于一個(gè)反向代理，會(huì)向獲取內(nèi)容，然后再添加一段代碼， 1. 靜態(tài)文件模式 browser-sync start --server --files css/*.css *.html 2. 代理模式 browser-sync...

LeanCloud 2019-08-01 18:18 評(píng)論0 收藏0
前端工具系列之一 Gulp

摘要：從大約年開(kāi)始前端不再是當(dāng)初那個(gè)切圖排版的前端了，各種框架庫(kù)工具呈井噴之勢(shì)層出不窮。作為一個(gè)怕麻煩的懶人，對(duì)于前端的繁雜工作當(dāng)然是要找一個(gè)自動(dòng)化工具來(lái)處理，于是我遇到了。從(大約)2014年開(kāi)始,前端不再是當(dāng)初那個(gè)切圖排版的前端了，各種MV*框架、庫(kù)、工具呈井噴之勢(shì)層出不窮。構(gòu)建工具比較有名的如Grunt、Gulp、Yeoman、webpack；依賴管理比如bower、npm，當(dāng)然最流...

xiongzenghui 2019-08-21 10:51 評(píng)論0 收藏0
browsersync使用

記得在學(xué)習(xí)Nodejs的時(shí)候有一個(gè)很好的Node模塊吸引了我，它能對(duì)我修改的某一個(gè)css, js 或者目錄的變化進(jìn)行監(jiān)控，然后我們可以通過(guò)瀏覽器來(lái)查看監(jiān)聽(tīng)的服務(wù)下文件發(fā)生的變化！下面我來(lái)簡(jiǎn)單的介紹一下它當(dāng)然我們也可以去官網(wǎng)直接找對(duì)應(yīng)的使用文檔，官網(wǎng)也是講解的非常詳細(xì)的官網(wǎng)地址：browsersync 下面是我對(duì)Browersync使用的一個(gè)過(guò)程，希望對(duì)新手有點(diǎn)用處首先BrowserSync是...

SimonMa 2019-08-01 16:36 評(píng)論0 收藏0
實(shí)時(shí)編輯

摘要：靜態(tài)服務(wù)器代理你的域名或注入通過(guò)流的方式創(chuàng)建任務(wù)流程這樣您就可以在您的任務(wù)完成后調(diào)用，所有的瀏覽器將被告知的變化并實(shí)時(shí)更新因?yàn)橹辉诤跄脑诰幾g完成后注意后調(diào)用重載。方法一使用Google Chrome DevTools 方法二工作區(qū)Browsersync 安裝 Node.js BrowserSync是基于Node.js的, 是一個(gè)Node模塊，如果您想要快速使用它，也許您需要先...

wenshi11019 2019-08-23 15:34 評(píng)論0 收藏0
前端開(kāi)發(fā)：實(shí)時(shí)刷新（及時(shí)預(yù)覽）工具小匯總，兼有g(shù)ulp+browser-sync設(shè)置方法

摘要：打開(kāi)您的命令行工具，進(jìn)入到目錄下，運(yùn)行以下其中一條命令。將創(chuàng)建一個(gè)本地服務(wù)器并自動(dòng)打開(kāi)你的瀏覽器后訪問(wèn)地址，這一切都會(huì)在命令行工具里顯示。自己寫(xiě)標(biāo)簽：實(shí)時(shí)刷新、免F5、 gulp + browser-sync 開(kāi)門(mén)見(jiàn)山，首先講明一下本文的定位吧：寫(xiě)這篇文章是因?yàn)樽约涸谄綍r(shí)的學(xué)習(xí)中，一次次試驗(yàn)了很多的前端實(shí)時(shí)刷新工具，有順手的，有蹩腳的，有簡(jiǎn)單的，有麻煩的，安裝完又折騰，折騰完又卸...

villainhr 2019-08-21 10:47 評(píng)論0 收藏0