2. 程式人生 > >NodeJS伺服器篇之簡單靜態檔案合併

NodeJS伺服器篇之簡單靜態檔案合併

阿新 • • 發佈：2018-12-23

NodeJS是一個基於Chrome V8引擎的JavaScript執行環境，其使用了事件驅動、非同步I/O機制，具有執行速度快，效能優異等特點，非常適合在分散式裝置上執行資料密集型的實時應用。

本文主要介紹一下通過搭建簡單的NodeJS伺服器，實現靜態檔案的合併，並通過瀏覽器訪問輸出的功能；同時，還會進行功能的完善，通過不斷的迭代開發，從易用性、效能、安全性等等方面，較為全面的介紹一下NodeJS伺服器的開發過程，為以後的進一步學習做準備。

在下面的內容開始之前，假定您對JavaScript已經有了一定的瞭解，如果您之前沒有了解過，請先熟悉一下七天學會NodeJS，本文主要參考上述資料的最後一部分，為作者的開源奉獻精神表示感謝。下面正式開始介紹伺服器的具體實現：

需求

實現一個靜態檔案合併的伺服器，通過請求的連結（URL）指定需要合併的檔案，之後把檔案內容返回給客戶端。參考連結如下：

http://127.0.0.1:8300/??a.js,b.js

分析

連結中的??是一個分隔符，前面是需要合併的檔案路徑，後面是需要合併的檔名，多個檔名之間用,分隔，因此伺服器處理這個URL後返回的是各個檔案的路徑；之後，通過遞迴讀取檔案內容，再進行拼接合並；最後，通過響應資料輸出給客戶端。這是整個伺服器的全部分析過程。

由於涉及到檔案操作，所以需要fs模組、path模組；加上伺服器模組http，一共需要三個模組：fs、path、http。

第一版

原始碼如下：

var fs = require('fs'),
    path = require('path'),
    http = require('http');

var MIME = {
    '.css': 'text/css',
    '.js': 'application/javascript'
};

// 合併檔案內容
function combineFiles(pathnames, callback) {
    var output = [];

    (function next(i, len) {
        if (i < len) {
            fs.readFile(pathnames[i], function
 
 (err, data) {
                if (err) {
                    callback(err);
                } else {
                    output.push(data);
                    next(i + 1, len);
                }
            });
        } else {
            const data = Buffer.concat(output);
            console.log(data);

            callback(null, data);
        }
    }(0, pathnames.length));
}

function main(argv) {
    // 從檔案讀取配置引數
    // var config = JSON.parse(fs.readFileSync(argv[0], 'utf-8')),
    //     root = config.root || '.',
    //     port = config.port || 80;

    // 直接給定配置引數
    var root = __dirname;
    var port = 8300;

    http.createServer(function (request, response) {
         var urlInfo = parseURL(root, request.url);

         console.log(urlInfo);

         combineFiles(urlInfo.pathnames, function (err, data) {
             if (err) {
                 response.writeHead(404);
                 response.end(err.message);
             } else {
                 response.writeHead(200, {
                     'Content-Type': urlInfo.mime
                 });

                 response.end(data);
             }
         });
    }).listen(port);
}

// 解析檔案路徑
function parseURL (root, url) {
    var base, pathnames, parts;

    if (url.indexOf('??') === -1) {
        url = url.replace('/', '/??');
    }

    parts = url.split('??');
    base = parts[0];
    pathnames = parts[1].split(',').map(function(value) {
        var filePath = path.join(root, base, value);
        return filePath;
    });

    return {
        mime: MIME[path.extname(pathnames[0])] || 'text/plain',
        pathnames: pathnames
    };
}

main(process.argv.slice(2));

/*
測試URL: 127.0.0.1:8300/??a.js,b.js
輸出：
    hello
    kelvin
    world
 */

以上程式碼完整實現了伺服器的功能，可以用測試URL請求，就會輸出其後的內容。其中，有幾點需要注意：

  • 命令列引數可以通過讀取JSON配置檔案，或者直接在main函式內設定（缺點是修改不方便，配置不靈活）
  • 入口main函式開啟了http伺服器；combineFiles函式負責非同步讀取檔案內容，併合並檔案內容；parseULR函式負責解析URL，並返回檔案的MIME型別（在返回資料給客戶端時，指定資料的型別）和檔名陣列，。

伺服器的工作流程如下：

傳送請求       等待服務端響應         接收響應
---------+----------------------+------------->
         --                                        解析請求
           ------                                  讀取a.js
                 ------                            讀取b.js
                       ------                      讀取c.js
                             --                    合併資料
                               --                  輸出響應

第二版

由於第一版中，程式碼是把檔案內容全部讀取到記憶體後，再進行資料合併的，這會導致如下問題：

  • 當請求的檔案較多，需要合併的資料量又比較大時，序列讀取檔案會比較耗時，拖慢服務的相應時間
  • 每次都完整的把資料讀到記憶體快取起來，當伺服器併發數較大時，就會有較大的記憶體開銷

針對上面的第一個問題，如果改為並行讀取方式，對於機械磁碟來說，需要不停的切換磁頭，反而會降低I/O效率。而對於固態硬碟，是存在多個並行的I/O的，對單個請求採用並行也不會提高效率。因此，採用流式讀取方式：一遍讀取，一遍輸出，把相應的輸出時機提前至讀取第一個檔案的時刻，這樣就能解決上述的問題。

修改後的伺服器工作流程如下：

傳送請求 等待服務端響應 接收響應
---------+----+------------------------------->
         --                                        解析請求
           --                                      檢查檔案是否存在
             --                                    輸出響應頭
               ------                              讀取和輸出a.js
                     ------                        讀取和輸出b.js
                           ------                  讀取和輸出c.js

可以看到，調整後的程式碼是邊讀取邊輸出，即快速響應請求，有減少了記憶體的壓力。

原始碼如下：

var fs = require('fs'),
    path = require('path'),
    http = require('http');

var MIME = {
    '.css': 'text/css',
    '.js': 'application/javascript'
};

function main(argv) {
    var root = __dirname;
    var port = 8300;

    http.createServer((request, response) => {
        var urlInfo = parseURL(root, request.url);

        validateFiles(urlInfo.pathnames, (err, pathnames) => {
            if (err) {
                response.writeHead(404);
                response.end(err.message);
            } else {
                response.writeHead(200, {
                    'Content-Type': urlInfo.mime
                });

                outputFiles(pathnames, response);
            }
        })
    }).listen(port);
}

function outputFiles(pathnames, writer) {
    (function next(i, len) {
        if (i <len) {
            var reader = fs.createReadStream(pathnames[i]);

            reader.pipe(writer, {end: false});
            reader.on('end', function() {
                next(i + 1, len);
            })
        } else {
            writer.end();
        }
    }(0, pathnames.length));
}

function validateFiles(pathnames, callback) {
    (function next(i, len) {
        if (i < len) {
            fs.stat(pathnames[i], (err, stats) => {
                if (err) {
                    callback(err);
                } else if (!stats.isFile()){
                    callback(new Error());
                } else {
                    next(i + 1, len);
                }
            });
        } else {
            callback(null, pathnames);
        }
    }(0, pathnames.length));
}

function parseURL (root, url) {
    var base, pathnames, parts;

    if (url.indexOf('??') === -1) {
        url = url.replace('/', '/??');
    }

    parts = url.split('??');
    base = parts[0];
    pathnames = parts[1].split(',').map(function(value) {
        var filePath = path.join(root, base, value);
        return filePath;
    });

    return {
        mime: MIME[path.extname(pathnames[0])] || 'text/plain',
        pathnames: pathnames
    };
}

main();

第三版

伺服器的功能和效能已經得到初步滿足，接下來我們要考慮穩定性。由於沒有系統是絕對的穩定，都存在一定的宕機風險，而這一問題不可避免，所以我們要儘量減少宕機的時間，比如增加一個守護程序，在伺服器掛掉後立即重啟。並且NodeJS官方也建議在出現異常時重啟，因為這時系統處於一種不穩定的狀態。

所以，我們利用NodeJS的程序管理機制，將守護程序作為父程序，將伺服器程序作為子程序，讓父程序監控子程序的執行狀態，在其異常時立即退出重啟子程序。

守護程序程式碼如下：

var cp = require('child_process');

var worker;

function spawn(server, config) {
    worker = cp.spawn('node', [server, config]);
    worker.on('exit', (code) => {
        console.log("code: " + code)
        if (code != 0) {
            console.log('自動重啟');
            spawn(server, config);
        }
    });
}

function main(argv) {
    spawn('server2.js', argv[0]);

    process.on('SIGTERM', () => {
        worker.kill();
        process.exit(0);
    });
}

main(process.argv.slice(2));

伺服器程式碼也要在main函式裡做如下調整：

function main(argv) {
    ...

    server = http.createServer((request, response) => {
        var urlInfo = parseURL(root, request.url);

        validateFiles(urlInfo.pathnames, (err, pathnames) => {
    ...
        })
    }).listen(port);

    process.on('SIGTERM', () => {
        server.close(() => {
            process.exit(0);
        });
    });
}

這樣調整後，守護程序會進一步啟動和監控伺服器程序。此外，為了能夠正常終止服務，我們讓守護程序在接收到SIGTERM訊號時終止伺服器程序。而在伺服器程序這一端，同樣在收到SIGTERM訊號時先停掉HTTP服務再正常退出。至此，我們的伺服器程式就靠譜很多了。

至此，NodeJS合併檔案的伺服器開發完成，當然還有許多不足之處，比如：提供日誌通知訪問量、充分利用多核CPU等等。如有興趣，可以在此基礎之上，做進一步的開發。

原始碼地址

參考資料

相關推薦

NodeJS伺服器篇之簡單靜態檔案合併

NodeJS是一個基於Chrome V8引擎的JavaScript執行環境，其使用了事件驅動、非同步I/O機制，具有執行速度快，效能優異等特點，非常適合在分散式裝置上執行資料密集型的實時應用。 本文主要介紹一下通過搭建簡單的NodeJS伺服器，實現靜態檔案的合

Nodejs搭建一個的本地靜態檔案伺服器的方法

方法一: 第一步：在Nodejs安裝目錄安裝： npm install connect 第二步：在Nodejs安裝目錄安裝： npm install serve-static 第三步：新建server.js (可以放在專案裡去執行也可以放在Nodejs安裝目錄下執行

基於ES6和原生nodejs實現自定義路由,靜態檔案伺服器和增刪查改的MVC架構分享

基於ES6和原生nodejs來實現一個基於MVC的增刪查改功能示例分享 自定義路由的解耦實現 首先分別處理不同方式的請求： const http = require('http'); const url = require('url')

Spring框架第一篇之簡單入門

其中 lan .org exp mage odi 只需要 需要 資源 一、下載Spring的jar包 通過http://repo.spring.io/release/org/springframework/spring/地址下載最新的Spring的zip包，當然，如果你是在

漫遊Kafka入門篇之簡單介紹

釋出訊息通常有兩種模式：佇列模式（queuing）和釋出-訂閱模式(publish-subscribe)。佇列模式中，consumers可以同時從服務端讀取訊息，每個訊息只被其中一個consumer讀到；釋出-訂閱模式中訊息被廣播到所有的consumer中。 Consumers可以加入一個consumer

Netty進階篇之簡單版websocket發訊息（7）

序言：簡單開發前端傳送訊息，後端接收訊息並返回。 1、故事牽引 今天通過一個故事來講解netty，主要講client和ser

nodejs使用nodejs建立簡單的靜態檔案伺服器

在開始之前，應該好好規劃一下專案的檔案目錄了。我的目錄結構如下： assets放置網站的靜態檔案css，js，img等；common存放專案的配置檔案和一些通用檔案；server存放服務處理檔案，將要建立的靜態檔案服務就是放在此目錄中； tpl放置的是模板檔案也就是網頁

Djngao專案部署到伺服器--之--靜態檔案無法載入

Django專案部署到centos中，按照如下步驟執行： 將Django專案中的settings.py檔案中的DEBUG模式設定未Flase模式；並在靜態檔案部分配置靜態檔案根目錄： STATIC_ROOT = os.path.join(BASE_DIR,'static_dist')

使用Nodejs快速搭建一個的本地靜態檔案伺服器

                     如果我們直接開啟html檔案他是以file:///方式開啟的，但這種方式有時會遇到跨域的問題：“cross-origin”,所以我們需要搭建一個簡易的本地伺服器，Nodejs就可以滿足我們這個需求：比如我的本地伺服器js檔案就是這樣的（我把這個server.js放在了

Nodejs基礎之靜態檔案託管

靜態檔案託管 靜態資源路徑可設定多個 const app = express(); app.user('/public', express.static(__dirname + '/public

用NodeJS／express-4.0實現的靜態檔案伺服器（serveStatic外掛直接支援HTTP Range請求，因此可用來做mp4流媒體伺服器）

var express = require('express'), serveIndex = require('serve-index'), //只能列表目錄，不能下載檔案？ serveStatic = require('serve-stat

NodeJS VS Tomcat搭建高併發靜態檔案伺服器

測試動機 NodeJS因為它的非阻塞I/O和優秀的高併發效能受到越來越多的關注，而且NodeJS的伺服器相對於Nginx其搭建非常簡單，僅需很少的步驟和設定就可以搭建一個高效能的檔案伺服器。之前我有一臺Tomcat伺服器兼做檔案下載的功能，後來我在上面部署了一個NodeJS

Oracle高級函數篇之遞歸查詢start with connect by prior簡單用法

上一條 prior 結果 表結構 from oracl 結構 ... 可能 路飛：“ 把原來CSDN的博客轉移到博客園咯！” 前段時間，自己負責的任務中剛好涉及到了組織關系的業務需求，自己用了oracle遞歸查詢。下面簡單來舉個例子。在工作中我們經常會遇到有一定組織關系層次

libwebsockets之簡單伺服器程式碼

#include <stdio.h>#include <stdlib.h>#include <string.h>#include <sys/time.h>#include <unistd.h>#include <pth

Hadoop基礎-MapReduce入門篇之編寫簡單的Wordcount測試程式碼

　　　　　　　　　　　　Hadoop基礎-MapReduce入門篇之編寫簡單的Wordcount測試程式碼 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正傑 版權宣告：原創作品，謝絕轉載！否則將追究法律責任。     　　　

Netty實現高效能IOT伺服器(Groza)之手撕MQTT協議篇上

      前言 誕生及優勢 MQTT由Andy Stanford-Clark（IBM）和Arlen Nipper（Eurotech，現為Cirrus Link）於1999年開發，用於監測穿越沙漠的石油管道。目標是擁有一個頻寬有效且使用很少電池電量的協議，因為這

OC學習篇之---檔案的操作

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

nginx window下的靜態檔案伺服器

nginx.conf檔案 #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log inf

React總結篇之七_Redux和伺服器通訊

React元件訪問伺服器的方式 Redux架構下訪問伺服器的方式 一、React元件訪問伺服器 代理功能訪問API React元件訪問伺服器的生命週期 以顯示天氣預報為示例： 通過伺服器API獲得天氣情況資料 展示天氣情況資料 分兩個步驟完成：（1）

.NET Core實戰專案之CMS 第三章 入門篇-原始碼解析配置檔案及依賴注入

作者：依樂祝 原文連結：https://www.cnblogs.com/yilezhu/p/9998021.html 寫在前面 上篇文章我給大家講解了ASP.NET Core的概念及為什麼使用它，接著帶著你一步一步的配置了.NET Core的開發環境並建立了一個ASP.NET Core的mvc專