非常にサードパーティのブラウザーでのLiveReload

NodeJS / ExpressJSアプリケーションを開発するときに、一緒にドラッグされたiPadのブラウザーでページを自動更新してすべての変更をオンザフライで確認することで混乱しました。

カットの下-モバイルガジェットから開発されたWebアプリケーションのライブビューを作成するのは非常に簡単です。



さまざまな理由から、 Node.jsに関するLiveReloadの記事は役に立ちませんでした。 何で？ それは簡単です-そこの人々は宝石でうなり声を議論します。 そして、私はちょうどNodeJS / Expressに来ました。 私を怖がらせないでください:)

なぜこれが必要なのですか？

便宜上、他の理由。 MacBook Airのリシードは、これが私が望んでいたツールであることに気付きました。 欠点は、モニターのスペースが不足し、問題を解決するためのAppleTVがないことです（ Tronsmart T1000 MirrorT2を注文して、大幅な割引に置き換えて 、タスクの処理方法を見てみましょうが、それは別の話です）。本当に好き...



マルチプラットフォームガジェットの動物園を見て、私は考えました-作成されているものの表示としてMacbookに付属のiPadを使用してみませんか？ はい、そしてあなたの指がアイコンに落ちないように...

タブレットから2番目のモニター？ 彼女。

最初は私が考えていた-今、アプリでAirDisplay （またはiDisplayなどの低価格でそのアナログ）を購入し、サーバーをインストールして、 出来上がり 。 しかし、他のいくつかのタスクに対するこのソリューションは、おそらく便利で必要です。 しかし、私のものではありません。

さらに、Tronsmartはすでに中国の兄弟から送られてきました。

私たちは正しく行動します。

私は実際にデスクトップブラウザで結果を考えたくありませんでしたが、ネイティブのガジェット（同じSafari）でそれを望んでいました。

また、プロジェクトファイル（ nodemon 、 supervisorなど）を変更するときにノードサーバーをジャークする職人のソリューションがあることは非常に幸運です。 将来を見据えて、私の応答は、より応答性の高い仕事のためにスーパーバイザーに選ばれました。



まあ、サーバーはCommand-S / Ctrl-Sで再起動します（ちなみに、この方法はWindowsでも機能します）。 今すぐブラウザでコンテンツを更新する方法は？ 繰り返しになりますが、短いgooglezhでリロードしました 。



リロードモジュールの説明に書かれている内容：

Node.jsモジュールは、コードが変更されたときにブラウザーでコードを更新して再ロードします。 ブラウザのプラグインは必要ありません。

素晴らしい、あなたが必要なもの。 2つのトゥルザで武装した私は、奇跡を起こすために座った。



純粋なエクスプレスアプリケーションでテストします。

$ express
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

依存関係をプルします。

 $ npm i
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スーパーバイザーを配置します：

 $ npm i supervisor -g
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてリロード：

 $ npm i reload --save-dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべて、環境の準備は終わりました。



次に、ドキュメントに従って空のアプリケーションを提出する必要があります。



/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');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スーパースーパーサーバーを実行して、.jadeファイルの変更を追跡します。

 $ supervisor -e jade app.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、「コンピューター」ブラウザーが、 localhost：3000で待っているものを正確に表示することを確認します。





ブラウザとサーバー間のライブ通信を確認するには、ソースファイル/views/index.jadeを変更します

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

に：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

LiveReloadというライブ更新を取得します。





うまくいきます！

熊手？ 私はそれらを持っています！

それを祝うために、ガジェット、私の場合はiPadを実行し、アドレスバーに0.0.0.0haps000 （NodeJSサーバーが実行されているマシンのIPアドレス）を入力すると、期待どおりの結果が得られます。



さらに、コード/views/index.jadeをh2なしでソースに返します。Hello 、Habr！ 、保存して...ファイルを取得します。



さらに、手でページを更新すると、すべてが本来の状態で表示されます。 待ち伏せ... DeadReload ...

悲しみから喜びへ...

頭をひっくり返し、さまざまな方法で拾い上げ、何も修復せず、何が起こっているのか理解していないので、私は愚かにテキストを保存し、iPadで、保存に合わせて、ネイティブアニメーションローダーがしばらくの間私の上に表示されることに気付きました（または、呼ばれているように、読み込みアイコンが短くなります）。

うん！ どうぞ。 どうやら、ブラウザはすぐにLiveForeverにしたいと考えています。 彼は何かを提出する必要があります...



彼は/ node_modules / reload / lib /のリロードソースに飛び込み （私はすぐに思っていなかったので、恥は私にとって恥です）、そこに4つのファイルを掘ります：

reload.js、reload-client.js、reload-server.js、sockjs-0.3-min.js。

すぐにreload-client.jsに関心があり、ファイルの最初の2行目で、人類のすべての問題の解決策を見つけました。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要約すると、紳士です！

経験的に、最小値RLD_TIMEOUT = 700は、ファイルなしのLiveReloadを作成するのに役立ちました。



それだけです 私は受け取った解決策に満足しています。すべてが私がしたように機能し、ウェブ開発とウェブマジックから遠く離れた人であり、それは必要でした-簡単かつ自然に、最も重要なこと-ヒキガエルのトラブルや説得なし。