跳到主要內容

[分享] livereload 設定及原理分析, livereload project analysis

之前介紹過livereload ,深深覺得他是個好東西,用過之後開發網站就不能缺少他,我真的回不去了。可是就會想要探討到底livereload 是怎麼做到修改檔案之後,就即時做頁面重新讀取呢?

分析
livereload 當程式執行之後就會開啟一個websocket server,如果檔案有任何變動,會發送訊息給瀏覽器,瀏覽器就會依據檔案不同執行不同程序。

Server端其實做的事情就是監聽檔案變化,發送訊息給client!

而預設的網站port號會採用35729,如果想要變更port號,在自己的家目錄底下有一個.livereload 檔案,去底下修改這個檔案,例如35729 修改為 88887。

~/.livereload
config.port = 88887



如此就可以將預設的port號修改,那到底還有哪些config 可以使用呢?還有哪些不為人知的秘密呢?接下來直接https://github.com/mockko/livereload一探究竟。

伺服器端檔案
livereload / server / lib / livereload.rb
host, 
:port, 
:exts, 
:exts_overwrite, 
:exclusions, 
:debug, 
:apply_js_live, 
:apply_css_live, 
:apply_images_live, 
:grace_period

原來可以使用的設定有這麼多種,至於每一個變數的功能為何,就不一一闡述,但是要置換的話,其實可以直接修改~/.livereload 這個檔案就可以了。

同時可以從原始碼中得知是採用em-dir-watcher(也是同一個作者),做IO 監控只要檔案有變動,立即就會得知同時做檔名比對發送資料到前端。

在linux 環境底下,底層檔案變更監控是採用Inotify機制,如此一來檔案變更的時候就可以即時知道哪些檔案變更了。

接著看到example 裡面有兩個檔案xbrowser.html, xbrowser.css,看到這個檔名應該跟跨瀏覽器有關係,讓我們來看一下。

    <script src="../src/content.js"></script>
    <script src="../src/background.js"></script>
    <script src="../src/xbrowser/livereload.js"></script>
    <script>
    window.onload = function(){
        livereload.run();
    };
    </script>

xbrowser.html就是直接使用livereload client 的連接,直接載入javascript,因此不需要加載任何外掛,測試一下也的確可以正常使用。

設定ip, port
/src/background.js
host: ('ip'),
port: 35729,

直接在這個檔案修改即可。

既然都有前端source code ,那就來找一下到底是怎麼換至javascript, css, img是不需要整頁重載,而只有載入局部資料的呢?整個頁面怎麼處理呢?
/src/content.js

html 重新載入
handleHTML: function(path) {

                this.document.location.reload();
}

頁面變動的部份其實很簡單,只要頁面檔案有變動,就直接reload page。


javascript 載入
handleJS: function(path, options) {
// 省略
            if (script.src && this.equals(script.src, path)) {
                this.reloadScript(script);
                reloaded++;
            }
// 省略

        return reloaded;
    }

css 載入
handleCSS: function(path, options) {

        var links = this.document.querySelectorAll('link[rel="stylesheet"]');

            if (this.equals(link.href, path)) {
                reloaded += this.reattachStylesheetLink(link);
            } 
}

可以看到是讀取script, style 節點,取得src 資料之後進行比對,在做重新載入的動作,可以得知只要任何一個.js 檔案變動之後,就會直接將script 的資料重新載入執行。

另外比較值得一提,css部份,為了重新載入不要有畫面一閃的問題出現,因此會先clone style 節點,在真正得到新的資料之後,再將利用reattachStylesheetLink這個方法將檔案重新載入,如此解決掉畫面閃爍的問題。

Image 載入
    handleImages: function(path, options) {
        var reloaded = 0;


        var stylesheets = this.document.styleSheets;
        var imgs = this.document.images;
        var expando = this.generateExpando();
        for (var i = 0; i < imgs.length; i++) {
            var img = imgs[i];
            if (this.equals(img.src, path)) {
                img.src = this.generateNextUrl(img.src, expando);
                reloaded++;
            }
        }
        var src;
        imgs = this.document.querySelectorAll('[style*=background]');
        for (i = 0; i < imgs.length; i++) {
            img = imgs[i];
            if (!img.style.backgroundImage) {
                continue;
            }
            src = this.extractURL(img.style.backgroundImage);
            if (src && this.equals(src, path)) {
                img.style.backgroundImage = 'url(' + this.generateNextUrl(src, expando) + ')';
                reloaded++;
            }
        }

        imgs = this.document.querySelectorAll('[style*=border]');
        for (i = 0; i < imgs.length; i++) {
            img = imgs[i];
            if (!img.style.borderImage) {
                continue;
            }
            src = this.extractURL(img.style.borderImage);
            if (src && this.equals(src, path)) {
                img.style.borderImage = 'url(' + this.generateNextUrl(src, expando) + ')';
                reloaded++;
            }
        }

        for (i = 0; i < stylesheets.length; i++) {
            reloaded += this.reloadStylesheetImages(stylesheets[i], path, expando).length;
        }

        return reloaded;
    },

Image 就分成幾個部份來實做重新載入

  • css重新載入之後,會讀取相關css image
  • img 節點,路徑比對之後,重新載入影像


結語
事實上其他瀏覽器外掛,也是載入javascript 的方式來執行。如果直接自行載入javascript ,就可以免除掉各個瀏覽器安裝外掛的問題發生。只要瀏覽器支援websocket 就可以直接執行。

從原始碼來看,其實livereload 在前端(javascript )做了許多小地方調整,例如為了保證載入的檔案不會有cache 問題,因此加載的uri 都會加上一組亂數,在頁面重新讀取也考慮到css, javascript 的問題等。

目前比較可惜的是IE無法支援websocket,似乎可以使用socket.io 替換掉  websocket,如此就可以直接跨瀏覽器支援了,但是目前沒有這個版本!殘念(有人想要一起寫嗎?livereload rewrite)

留言

這個網誌中的熱門文章

[分享] 腳踏車環島注意事項

很多人都期望自己能夠做點什麼,做些什麼,而退伍之後的第二個星期,就展開了環島之旅。 對很多人來說這不算什麼,甚至有人展開了走路、跑步、溜滑板、單輪車等方式環島一周,充分展現對台灣的愛與關懷。 這篇主要讓不知道怎麼準備環島的人,作一個完善的解說,首先隨身的東西要有: 證件現金類 : 身份證 健保卡 學生證 現金 提款卡 悠遊卡

館長的網站技術瓶頸,小弟弟來解答 - notorious-2019.com

館長的網站技術瓶頸,小弟弟來解答 - notorious-2019.com 昨天看到館長的網站倒了,也看到館長說一個月花費大概一百萬左右的月費在支持這個架設的電商網站,也對外發布出來訊息,希望求救, 直接講結論 建議解法, 1. 首先要做的事情是讓整個網站可以橫向擴展 (Load Balancer + n 台伺服器),對,相信我,IIS 也是可以做 Scale out, 這是對於 Application layer 服務的解法。 2. 資料的部分 SQL 吞吐量,建議改成 GCP Cloud SQL, 或者就直接轉到 Azure SQL Server 環境上會相對容易解決 SQL 的問題。 上述 2 個步驟都處理完,其實 100 萬的費用,應該 20000 concurrent user 是沒有問題的,但前提是要設定『對』! 額外需要花較長期時間要處理的,建議就是在 Queue 的處理,購物車的狀態都可以進入到 Queue 再來處理 SQL insert 的問題,減少不斷的 insert / update 的狀態,後文會提到 ... 底下詳細的會再說明如何後後續還有哪些處理的細節。 這兩天剛好有個小空擋,就來分析一下狀況, 可以從外部讀取得到的服務大致上如下, ASP.Net : 4.0 IIS 10 + Windows (廢話) SQL Server (推測) OP Service: PleskWin Host: Google Cloud DNS: Cloudflare 前端服務內容架構 Server-side render, jQuery base, 推測有可能採用現成購物車來進行,看起來不太像是用 wooCommerce 比較像是 Cart Functionality 這類的項目直接搭建而成(當然這純屬猜測) 功能拆解 因為網站是透過 Server site render 所有頁面都需要重新透過伺服器進行載入,這樣的狀況,如果在頻繁忙碌的 eCommerce 網站架構下會是一個致命傷, 簡單來說,數量的查詢,特惠價,優惠碼等等資訊的處理,使用者每做一步都需要重新跳轉頁面,或者整頁面重新讀取,只是為了部分的資料更新,這些都可以抽取出來成為 API ,透過 AJAX 的方式進行讀取。 讀寫分離 在不了解目前資料庫複雜狀態下,首先要讓所有人都

[教學] 快快樂樂刪除CodeIgniter index.php

預設的CI網址預設都設定為index.php同一層級,因此所有的程式都必須指定index.php導向才能開始,例如 http://localhost/ci/index.php/welcome/test http://localhost/ci/welcome/test 本文將說明如何將惱人的index.php消除,還你一個漂亮的URL。 設定開始: 接下來說明如何使用rewrite方式將惱人的index.php去除。 rewrite不清楚的人,煩請先自行google 首先要先確定Apache的 mod_rewrite 有 開啟 ,如果沒有開啟請設定好之後重新啟動apache。 接著,在根目錄底下建立一個新檔案,檔名為 .htaccess ,裡面程式碼如下: <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 接著到 application/config/config.php ,開啟檔案修改 $config['index_page'] = ""; 注意: /index.php/$1 要根據你目錄,例如 http://localhost/index.php ,網站根目錄為 /ci/index.php 則要寫成 /ci/index.php/$1 接著至CI目錄下,尋找 config\config.php , 修改一下裡面的檔案,修改如下: $config['index_page'] = ""; 存檔後,如此一來大功告成。 參考資料 官方網站說明