How Does BrowserSync Work?

BrowserSync starts a small web server. If you’re already using a local web server or need to connect to a live website, you can start BrowserSync as a proxy server. It injects small script into every page which communicates with the server via WebSockets. When an event occurs — such as a file modification or scroll action — the server sends an update notification to all connected devices.

But you don’t need to worry about any of this; BrowserSync just works and you’ll be the envy of your peers (or accused of witchcraft).

BrowserSync 启动一个小web服务器，如果你已经在使用一个local web server或者需要连接到在线工作的website，你可以将BrowserSync作为一个proxy server来起动。它在每一个页面中主动注入一个小的脚本，该脚本通过websockets和服务器通信。当一个事件发生时，比如一个文件被修改，或者有scroll动作，这时server将发送一个update notification到所有已经连接的devices。

如果你的browsersync跑在vagrant box中，是否可以在host机器上sync浏览效果？

https://github.com/BrowserSync/browser-sync/issues/318

How does browsersync work?的更多相关文章

  1. 移动端页面调试神器-browser-sync

    最近公司赶一个项目,是mobile端,之前没怎么做过移动端的开发,这个项目算是个小尝试. 在做项目的过程中,用到了一个神器--browser-sync,在这里分享给大家. 1.静态页面调试 作为前端, ...

  2. web自动化工具-Browsersync

    web自动化工具-Browsersync browser-sync才是神器中的神器,和livereload一样支持监听所有文件.可是和livereload简单粗暴的F5刷新相比,browsersync ...

  3. browser-sync

    引入 大家写网页的时候,肯定都遇到这种情况,每次用sublime写完都要返回浏览器,刷新页面,而这个工具正好解决了这个问题,提高前端开发效率,这是一个npm的包 browser-sync browse ...

  4. browsersync实现网页实时刷新(修改LESS,JS,HTML时)

    var gulp = require("gulp"), less = require("gulp-less"), browserSync = require(& ...

  5. 使用gulp+browser-sync搭建前端项目自动化以及自动刷新

    前段时间使用了gulp+browser-sync才发现这个东西真的很好用. 准备工作:(1).安装nodejs.gulp是基于nodejs使用的,所以先安装nodejs,https://nodejs. ...

  6. Browsersync + Gulp.js

    1.安装 Browsersync 和 依赖包 Gulp npm install browser-sync gulp --save-dev 2.gulpfile.js var gulp = requir ...

  7. Browsersync — 省时的浏览器同步测试工具

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试. ...

  8. 通过Gulp使用Browsersync实现浏览器实时响应文件更改

    Gulp是什么鬼 Browsersync又是什么鬼 如何安装使用Browsersync 安装 使用 效果图 参考 Gulp是什么鬼 Gulp是一种基于node.js的构建工具,有关构建工具的概念请移步 ...

  9. Linux下browser-sync无法启动Chrome的解决方法

    笔者的环境: OS: Ubuntu Linux Browser: Chrome, Firefox 每次希望启动chrome浏览器,系统都会报错: browser-sync start -s --dir ...

  10. BrowserSync前端调试工具使用

    上次介绍了一款DebugGap移动端调试工具DebugGap推荐.但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便 ...

随机推荐

  1. 持久化消息队列memcacheq的安装配置

    MemcacheQ 是一个基于 MemcacheDB 的消息队列服务器. 一.memcacheq介绍 特性: 1.简单易用 2.处理速度快 3.多条队列 4.并发性能好 5.与memcache的协议兼 ...

  2. 2014_GCJ_A

    题目链接:http://code.google.com/codejam/contest/2984486/dashboard#s=p0 最想吐槽的是想些DFS过小数据,居然写不出来,不知道我这半年的AC ...

  3. ios设备突破微信小视频6S限制的方法

    刷微信朋友圈只发文字和图片怎能意犹未竟,微信小视频是一个很好的补充,音视频到位,流行流行最流行.但小视频时长不能超过6S,没有滤镜等是很大的遗憾.but有人突破限制玩出了花样,用ios设备在朋友圈晒出 ...

  4. leetcode single number系列

    这个系列一共有三题,第一题是一组数里除了一个数出现一次之外,其他数都是成对出现,求这个数. 第二题是一组数里除了两个数出现一次外,其他数都是成对出现,求这两个数 第三题是一组数里除了一个数出现一次外, ...

  5. ＳＱＬ技术内幕－8 使用WITH AS提高性能简化嵌套SQL

    --本文来源:http://www.cnblogs.com/fygh/archive/2011/08/31/2160266.html 一．WITH AS的含义 WITH AS短语,也叫做子查询部分(s ...

  6. windows 两个用户，默认其中一个用户登录

    1. 在开始菜单中搜索“运行”,回车打开,或者Win+R打开运行窗口. 输入“control userpasswords2”或者“rundll32 netplwiz.dll,UsersRunDll”回 ...

  7. 怎样强制QQ聊天

    首先复制下面这段网址: http://wp.qq.com/open_webaio.html?sigt=2d3bb7d31517da8c94a1061c6b63dd3203eb633805dcd09ec ...

  8. poj 1724(有限制的最短路)

    题目链接:http://poj.org/problem?id=1724 思路: 有限制的最短路,或者说是二维状态吧,在求最短路的时候记录一下花费即可.一开始用SPFA写的,900MS险过啊,然后改成D ...

  9. WebSocket 是什么原理？为什么可以实现持久连接

    你可以把 WebSocket 看成是 HTTP 协议为了支持长连接所打的一个大补丁,它和 HTTP 有一些共性,是为了解决 HTTP 本身无法解决的某些问题而做出的一个改良设计.在以前 HTTP 协议 ...

  10. 【转】java线程系列---Runnable和Thread的区别

    在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口:Thread类是在java.lang包中定义的.一个类只要继承了Thread类同时覆写了本类中的run() ...