browsersync簡單使用和原理分析

LeanCloud 發(fā)布于2019-08-01 18:18 / 1340人閱讀

摘要：靜態(tài)文件模式代理模式在瀏覽器中輸入瀏覽器所在的機(jī)器的為在運(yùn)行的機(jī)器上使用查看端口的連接情況，得到如下圖下通過資源管理器查看到是進(jìn)行的連接原理瀏覽器請求到達(dá)端口時(shí)，此時(shí)相當(dāng)于一個(gè)反向代理，會向獲取內(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下通過資源管理器查看到是chrome進(jìn)行的連接

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

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

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

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

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

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

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

GPU云服務(wù)器云服務(wù)器 BrowserSync 簡單使用簡單分析簡單數(shù)據(jù)分析

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51634.html

相關(guān)文章

browsersync簡單使用和原理分析

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

itvincent 2019-06-28 14:35 評論0 收藏0
前端工具系列之一 Gulp

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

xiongzenghui 2019-08-21 10:51 評論0 收藏0
browsersync使用

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

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

摘要：靜態(tài)服務(wù)器代理你的域名或注入通過流的方式創(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 評論0 收藏0
前端開發(fā)：實(shí)時(shí)刷新（及時(shí)預(yù)覽）工具小匯總，兼有g(shù)ulp+browser-sync設(shè)置方法

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

villainhr 2019-08-21 10:47 評論0 收藏0