browsersync简单使用和原理分析

LeanCloud 发布于2019-08-01 18:18 / 1296人阅读

摘要：静态文件模式代理模式在浏览器中输入浏览器所在的机器的为在运行的机器上使用查看端口的连接情况，得到如下图下通过资源管理器查看到是进行的连接原理浏览器请求到达端口时，此时相当于一个反向代理，会向获取内容，然后再添加一段代码，

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抓包验证

wireshark 抓包过滤规则写： tcp port 3000

在web服务器编辑test.php,然后保存

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51634.html

browsersync简单使用和原理分析

摘要：静态文件模式代理模式在浏览器中输入浏览器所在的机器的为在运行的机器上使用查看端口的连接情况，得到如下图下通过资源管理器查看到是进行的连接原理浏览器请求到达端口时，此时相当于一个反向代理，会向获取内容，然后再添加一段代码， 1. 静态文件模式 browser-sync start --server --files css/*.css *.html 2. 代理模式 browser-sync...

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

摘要：从大约年开始前端不再是当初那个切图排版的前端了，各种框架库工具呈井喷之势层出不穷。作为一个怕麻烦的懒人，对于前端的繁杂工作当然是要找一个自动化工具来处理，于是我遇到了。从(大约)2014年开始,前端不再是当初那个切图排版的前端了，各种MV*框架、库、工具呈井喷之势层出不穷。构建工具比较有名的如Grunt、Gulp、Yeoman、webpack；依赖管理比如bower、npm，当然最流...

xiongzenghui 2019-08-21 10:51 评论0 收藏0
browsersync使用

记得在学习Nodejs的时候有一个很好的Node模块吸引了我，它能对我修改的某一个css, js 或者目录的变化进行监控，然后我们可以通过浏览器来查看监听的服务下文件发生的变化！下面我来简单的介绍一下它当然我们也可以去官网直接找对应的使用文档，官网也是讲解的非常详细的官网地址：browsersync 下面是我对Browersync使用的一个过程，希望对新手有点用处首先BrowserSync是...

SimonMa 2019-08-01 16:36 评论0 收藏0
实时编辑

摘要：静态服务器代理你的域名或注入通过流的方式创建任务流程这样您就可以在您的任务完成后调用，所有的浏览器将被告知的变化并实时更新因为只在乎您的在编译完成后注意后调用重载。方法一使用Google Chrome DevTools 方法二工作区Browsersync 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块，如果您想要快速使用它，也许您需要先...

wenshi11019 2019-08-23 15:34 评论0 收藏0
前端开发：实时刷新（及时预览）工具小汇总，兼有gulp+browser-sync设置方法

摘要：打开您的命令行工具，进入到目录下，运行以下其中一条命令。将创建一个本地服务器并自动打开你的浏览器后访问地址，这一切都会在命令行工具里显示。自己写标签：实时刷新、免F5、 gulp + browser-sync 开门见山，首先讲明一下本文的定位吧：写这篇文章是因为自己在平时的学习中，一次次试验了很多的前端实时刷新工具，有顺手的，有蹩脚的，有简单的，有麻烦的，安装完又折腾，折腾完又卸...

villainhr 2019-08-21 10:47 评论0 收藏0