How LiveReload (and other similar apps) work technically?

Question

There are some great web-development tools out there which make life of developers easy. Apps like LiveReload and CodeKit are the great examples.

All I'm interested about them is the way they make web-page live reload in web browser (be it Chrome, Firefox or whatever) from within itself when file changes are written to hard-drive.

How they actually do it? Are there any APIs which web browser vendors expose to perform this? or its just custom server-side script which is injected to webpage (not actually wrote by web-developer) before it reaches browser, and some Ajax magic happens when the file is changed on the drive.

I'm planning to develop something like this in Python or Vala (Linux) and .NET (Windows), so please let me know if there is some documentation available to do this.

Fawn

Answer 1

From LiveReload FAQ:

To communicate with your browsers, LiveReloads needs its JavaScript code to be injected into your web pages. There are 3 ways to arrange that:

1. either add a script tag into your HTML code manually, or
2. install a browser extension (that, when activated, adds the script tag to the visited pages on the fly), or
3. use a plugin for your web framework (that adds the script tag on the fly when serving requests), currently only available for Rails/Rack.

Also, I know this question is old, but for those who also got here searching for "livereload python", there's a great LiveReload server written in python.

Eastlake

Answer 2

These are usually (always?) based on a fairly simple concept - every so often, some client code triggers that asks a server script if the file has updated. If, and only if, it has, it reloads the page - or, for certain sites (think SO and some social networking sites), it downloads just the new information and loads it in-situ.

For the case that you're developing in a local sandbox, they can soemtimes also listen for OS 'file is changed' signals rather than having to have a server capable of responding to AJAX requests set up. Most operating systems provide these signals - for example, on Linux you have inotify. It appears from their web page that LiveReload uses a system like this - part of their suite is a set of browser plugins, which presumably provide Javascript APIs for the OS services, and adjust browser sandbox rules to allow it.

Amity

Where can I get brief documentation on performing something like this? – Fawn

@Kush the notification APIs tend, AFAIK, to be fairly OS-specific. So, you would have to look for the relevant platform documentation - hopefully someone else will come along who knows the specifics better than I do. – Amity