Push Content Out To Browsers The Easy Way
push - an automatic page refresh tool
Push watches a directory and pushes out changes to web clients. The client then takes the changed file and displays it in an iframe.
This is useful for making changes to a HTML, CSS and images and then observing the changes in multiple browsers without having to hit the refresh button.
Push tracks all of the dependencies of the .html file and sends out a reload request when any of the dependencies change. If your file has a style sheet that imports a style sheet with a background image, then Push will find the dependency and track it for you.
Pull from github and install dependencies.
$ git clone git://github.com/pschlump/pushIt.git $ npm install
This will set up a server on localhost:8080 serving the directory ./static.
$ node push-server.js
Now go to your browsers and browse to http://localhost:8080/push.html. Use the yellow box at the bottom and put in "abc" and "abc.html".
The first field, the "TOKEN", is any string that you want to use to tie a bunch of browsers together. In my examples I will use "abc" and "def".
Let's say that I have 3 browsers on Linux and 4 browsers on Mac OS X.
Let's assume that I have 2 files that I want to work with abc.html and
def.html. They both include a common style sheet, xyz.css.
On the Mac in FireFox I enter "abc" and "abc.html" then click "go…". On the other browsers on the Mac I enter just "abc" and click "go…". Each of the browsers displays "abc.html".
Now on the Linux box I enter "def" and "def.html" then click "go…" in Chrome. Then I enter just the "def" into FireFox and Opera and click "go…" in those browsers.
Now when I change the style sheet, "xyz.css" I should see all 7 browsers refresh. When I change "def.html" I should see just the Linux browsers refresh.
Shameless Plug for This Code
Push has had a definite positive impact on my personal productivity. It is a breath of fresh air! You just have to try it! Really! It is really cool to make a change in some file, buried 3 or 4 layers deep in a web page and see the results flash across a dozen devices!
Shameless Plug for My Company
2C Why has built an amazing set of testing tools (my opinion!) for web applications. Drive browsers across multiple platforms all at once. Consolidate your test results quickly. Continuous integration with your development platform. Make testing fun! Get to market quicker. Find and fix problems sooner. Ya Ya Ya… This code is a modified component in our test-runner for the business. If you need access to 30+ different platforms for testing (iOS, Android, Windows XP…8, Mac, Linux) and you don't want to mess around with building, running and maintaining a slew of virtual machines – then check out the testing system.
How Push Works
Push uses a simple node.js server that watches a directory for changes. Clients contact it via socket.io and tell Push what file they are interested in. When that file changes Push pushes out a message to them about how the file changed. If it was deleted, modified, or created.
$ node push-server.js --dir=./test-1 --port=8080 --top=push.html &
push-server.js is the server.
–port is the port number to serve the content on. Default is 8080.
–top=push.html is the top level file to start this with. It defaults to push.html. If you can't live with this (you already have a push.html in your application) then you can change it to whatever you like. index.html / index.htm are not recommended but usually work.
–fromproxy, –toprox - or -p, -q - discussed below under "Using push with the built in proxy".
Then in the browser go to http://localhost:8080/push.html. You can specify the file to watch on the URL with http://localhost:8080/push.html?tok=abc&url=abc.html where abc.html is the file to load first and tok=abc is the token to tie watchers together.
There is a yellow box, Enter URL, at the bottom where you can enter the relative URL to watch. All URLs are relative to the directory that is being watched. This means that abc.html is correct but http://www.google.com/ is not.
The Push server will track all of the dependencies for the file that is served. If any of the dependencies change, then it will send out a message to reload the top level file.
Push uses the following URLs (you can configure /push.html from the command line):
/push.html /push-api/file/empty.html /push-api/file/dummy.html /push-api/file/error001.html /push-api/monitor /push-api/show-dep /push-api/clear-dep /push-api/add-dep
Using push with the built in proxy
Push has a built in proxy that will allow you to serve your static files and have them pushed out to a client and also proxy to a back end server. This is an experimental feature. When a static file changes the page will refresh. This may or may not work with your application.
$ node push-server.js -f '/myapi' -q 'http://localhost:8001/myapi'
This will take all the requests that match /myapi and proxy those to the host http://localhost:8001/myapi. This has proven to be useful for testing some applications and breaks others.
Author of push-server.js: Philip Schlump. © 2013.
push-2-icon.svg: modified from SVG Wireshark icon, from the GPL'ed Wireshark source (see http://anonsvn.wireshark.org/wireshark/trunk/image/wsicon.svg), created by Gerald Combs.
socket.io: http://socket.io - works on just about everything now! Amazing.
express: http://express.js.com - an amazing tool!
optimist: https://github.com/substack/node-optimist - for parsing the command line.
chokidar:https://github.com/paulmillr/chokidar - for watching changes in the file system.
express-request-logger: https://github.com/mathrawka/express-request-logger - I used this as a template and produced a significantly modififed version for this application.
node.js: without which all of this would be virtually undoable!
I am certain that I have left some stuff out.
Published on: Tue Nov 5 10:22:10 MST 2013
• • • • • •
Author: Philip J. Schlump
Published On: 2013-11-01