LiveReload in a very foreign browser

I got confused by auto-updating the page in the browser on the iPad dragged along when developing NodeJS / ExpressJS applications to see all the changes on the fly.
Under the cut - how very simple to make a live viewer of developed web applications from a mobile gadget.

For various reasons, the LiveReload article on Node.js did not help me. For what? It's simple - there uncles grunt-s discuss with gem-s. And I just came to NodeJS / Express. Do not scare me shorter :)

Why is this necessary?

For convenience, for what else. Peres on MacBook Air realized that this is the tool that I wanted. The downside was the lack of space on the monitor and the lack of AppleTV to solve the subject (I ordered Tronsmart T1000 MirrorT2 to replace it with a significant discount, let's see how it will cope with the tasks, but this is another story), although the idea of ​​sitting in front of the TV for a lively contemplation of the result of activity really like…

Looking at the zoo of multi-platform gadgets, I thought - why not to use the ipassed everywhere with the MacBook ipad as a display of the created? Yes, and so that the finger in the icon does not fall ...
')

The second monitor from the tablet? Her

At first it was thought - just to buy AirDisplay in appstore (or its equivalent for less money, for example iDisplay ), to install the server, and - voila. But this is a solution to several other tasks, probably useful and necessary. But not mine.
Moreover, Tronsmart has already been sent by our brothers from heaven.

We act correctly.

I really did not want to contemplate the result on the desktop browser, but I wanted it in the native gadget (the same Safari).
And it’s very fortunate that there are craftsmen’s solutions for juggling the node's server when changing project files ( nodemon , supervisor and others like it). Looking ahead: my choice fell on the supervisor because of his more responsive work.

Well, the server will restart with Command-S / Ctrl-S (by the way, on Windows the method also works). How now to force the browser to refresh content? And again a short googlet brought me to reload .

What is written in the description of the reload module:

Node.js module code. No browser plugins required.

Great, what you need. Armed with whole two tulses, I sat down to sculpt a certain miracle:

We will test on a pure express-application:

$ express 

Draw dependencies:

 $ npm i 

We put supervisor:

 $ npm i supervisor -g 

and reload:

 $ npm i reload --save-dev 

Everything, preparation of an environment is finished.

Now you need to file an application-blank according to the documentation:

/app.js:

 ... var reload = require('reload'); ... var server = http.createServer(app); reload(server, app); server.listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); }); 

/views/layout.jade:

 head script(src='/reload/reload.js'); 

Run our super superserver to track changes in .jade files:

 $ supervisor -e jade app.js 

and make sure that our “computer” browser shows exactly what we are waiting for at localhost: 3000 :


To check the live communication of the browser with the server, change the source file /views/index.jade

 extends layout block content h1= title p Welcome to #{title} 

on:

 extends layout block content h1= title h2 , ! p Welcome to #{title} 

and get a live update called LiveReload:


It works, damn it!

The grabelek? I have them!

To celebrate, we run to our gadget, in my case to the iPad, type in the address bar 0.0.0.0 Boria000 (ip-address of the machine running the NodeJS server), we get the expected result:

then return the code /views/index.jade to the original, without h2 Hello, habr! , save it and ... get the file:

And if the page is updated by hand, everything will be displayed as it should be. Ambush ... DeadReload ...

From sadness to joy ...

Thinking over my head, picking it up in different ways, and without repairing and understanding what was happening, I stupidly saved the text and noticed that the iPad in sync with my save game shows a native animated loader on top for an instant (or as it is called, the download icon is shorter).
Aha So you got caught. Apparently, the browser wants to make LiveForever too early. He needs to file something ...

I got into the reload source in / node_modules / reload / lib / (as I didn’t think of it right away, shame on me), and I made 4 files there:
reload.js, reload-client.js, reload-server.js, sockjs-0.3-min.js.
Immediately interested in reload-client.js , we look, and at the very beginning of the file, right in the second line, we find the solution to all the problems of humanity:

 ;(function refresh () { var RLD_TIMEOUT = 300; var sock = new SockJS(window.location.origin + '/sockreload'); sock.onclose = function() { setTimeout(function() { window.location.reload(); },RLD_TIMEOUT); }; })(); 

To summarize, gentlemen!

Experimentally, the minimum value RLD_TIMEOUT = 700 helped me to make a non-LiveLoadless LiveReload;

That's all. I am satisfied with this solution, everything works as I, a person who is far from web development and web magic, and it was necessary - easily and naturally, the main thing - without problems and persuasion toads.