Live.js – Why it’s amazing, and getting it to work with PHP files.
27th October 2011
Live.js is a productivity tool, primarily aimed at front-end developers working in a development environment. It allows you to view the latest changes to your web page in the browser in real time, an auto refresh of sorts.
So that’s why it’s amazing.
However, the Live.js website neglects to mention two key things, which has probably stopped many people from benefiting from it:
- Live.js will only work on a server (so anyone who downloaded it and did a quick test on their desktop would have been disappointed)
- Live.js does not work on .php files (well, not without some tweaking, which we’ll go into…)
How does Live.js work?
To use Live.js, simply include the script in your web page:
The script works by “sending consecutive HEAD requests to the server”. Every second, it will grab the header information from each of your project files, looking for the following information:
If any of these values have changed since the last check, then live.js knows that the project has changed and will refresh the browser (or apply CSS changes dynamically, without refreshing). This all works fine with files named .html, .js or .css (as long as you are on a server).
So why doesn’t it work with PHP files?
HTML, JS and CSS files are static files, meaning the server can always determine and send the aforementioned header information. PHP files, however are dynamic and do not send this information unless you force them too.
Let’s get this thing working
Now, lets try and get this thing working on a local server. The following assumes you are using XAMPP, but the same should be achievable with any local PHP server.
Download this zip, and place the folder livejs-tutorial in your htdocs folder:
Start apache running and view the page in your browser (preferably Chrome). You should see something like this
Now open up the files global.js, index.php and stylesheet.css in your text editor. Make changes to global.js or stylesheet.css and you’ll see your changes reflected immediately in the browser:
However, if you change either of the .php files, you’ll see no changes in the browser. Let’s see why…
Hit F12 (in Chrome) to bring up Developer Tools. Click on the Network panel. You will see all of the requests that live.js is making to your files on the left. Click on any occurrence of stylesheet.css:
You can see that Live.js is retrieving the file’s Last-Modified, Content-Length and Content-Type header values, and therefore knows when the page has changed. However, if you now select the PHP file, you’ll see that the Last-Modified and Content-Length values are not being sent:
So what we need to do is force PHP files to send this header information.
Forcing PHP to send header information at the document level
Open up index.php and add the following code to the very top of the file within < ?php ?> tags:
$length = ob_get_length();
$last_modified = date ("F d Y H:i:s", getlastmod());
header("Last-Modified: $last_modified GMT time");
This forces the php file to send Content-Length and Last-Modified values to the browser.
Now refresh the page in the browser, and make an edit to the file (index.php). Voila, your changes are immediately reflected in the browser.
The trouble with this is, we would have to add this code to every page, not very practical.
Get it working server-wide
What we can do is force PHP to append this code to every php file that gets processed. Cut the above code and place it into a file called livejs.php. Place this file in PHP’s default includes folder.
To find the path of this folder, open up php.ini. In XAMPP, this is in C:\xampp\php\.
Find the following line:
include_path = ".;C:\xampp\php\PEAR"
If there is already a path specified, this is where you should place your livejs.php file (in this case, C:\xampp\php\PEAR). If not, then specify a path and place the file there.
Now, in php.ini set the line output_buffering to On:
output_buffering = On
Finally, set the line auto_append_file to “/livejs.php”:
auto_append_file = "/livejs.php"
Save php.ini and restart apache. You should now find that any changes you make to index.php (or even the include, header.php) are instantly reflected in the browser!
Getting it working on a per-domain basis
Although the above, server-wide approach is fine for your localhost, I would not recommending doing this on a live dev server. Instead, you can create the following .htaccess file and place it in the root of your site, so that the auto-appending only works on this single domain:
[.htaccess] php_value auto_append_file "livejs.php" php_flag output_buffering on
Then place the livejs.php file somewhere that PHP can find it (the server’s default includes folder).
LivePage Chrome extension
Live.js is now available in the form of a Chrome extension called LivePage. Once installed, simply click the extension button to enable it for the page you’re currently viewing. Pretty handy for making CSS/JS changes to live websites, or sites where it’s otherwise inappropriate to have live.js running.
Now go give your F5 key a long-deserved break!
Note: remember to remove live.js from any ‘live’ server that you upload a website too, as it no doubt uses a lot of overhead! I will not take any responsibility for any destruction of servers!