手寫簡(jiǎn)版無三方依賴的Node-Server實(shí)現(xiàn)示例

更新時(shí)間：2023年06月11日 09:13:23 作者：vannvan

這篇文章主要為大家介紹了手寫簡(jiǎn)版無三方依賴的Node-Server實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

預(yù)告：今天寫的可能用處不大，各位看官謹(jǐn)慎選擇要不要看下去...

?又是顯得D疼造輪子系列之手寫無三方依賴的輕量級(jí)Node-server，哇，好多的形容詞，且看需求。

產(chǎn)品說要看一下頁面寫的怎么樣了但是他又不想動(dòng)或者你不想看到他，我覺得多半是因?yàn)楹笳?，那么問題來了，憑咱自己能不能把產(chǎn)品拒在10米之外又讓他把頁面瞅一眼，那必須是可以的，廢話少說，直接開寫。

Node知識(shí)點(diǎn)

fs
http
os

從開啟一個(gè)基本的Node服務(wù)開始, http模塊參考文檔

http.createServer(function (request, response) {
    // 發(fā)送 HTTP 頭部 
    // HTTP 狀態(tài)值: 200 : OK
    // 內(nèi)容類型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 發(fā)送響應(yīng)數(shù)據(jù) "Hello World"
    response.end('Hello World\n');
}).listen(8888);
// 這就開啟了一個(gè)最基礎(chǔ)的node服務(wù)，瀏覽器訪問 http://127.0.0.1:8888 即可看到Hello World

那么萬里長(zhǎng)征第一步的踮腳動(dòng)作算是完成了，接下來就是實(shí)現(xiàn)怎么打開我們自己的html頁面。想要打開html頁面肯定就要訪問文件，于是就得用到fs模塊，以下代碼可以實(shí)現(xiàn)深層遍歷腳本同目錄下的html文件。

遍歷頁面需要的文件, fs模塊參考文檔

function geFileList(path) {
    var filesList = [];
    readFile(path, filesList);
    return filesList;
}
//獲取文件類型
function getType(filename){
    var index=filename.lastIndexOf(".");
    if(index!=-1){
        var type=filename.substring(index+1,filename.length);
        return type;
    }
}
//遍歷讀取文件 
function readFile(path, filesList) {
    files = fs.readdirSync(path);//需要用到同步讀取 
    files.forEach(walk);
    function walk(file) {
        states = fs.statSync(path + '/' + file);
        if (states.isDirectory()) {
            readFile(path + '/' + file, filesList);
        }
        else {
            var obj = new Object();
            obj.size = states.size;
            obj.name = file;//文件名 
            obj.type = getType(file)
            filesList.push(obj);
        }
    }
}
// 統(tǒng)計(jì)各類文件數(shù)量
function countFileByType(obj){
    var keyContainer = {}; 
    obj.forEach(item => {
      keyContainer[item.type] = keyContainer[item.type] || [];
      keyContainer[item.type].push(item);
    });
    return keyContainer
}
module.exports.geFileList = geFileList
module.exports.countFile = countFileByType
module.exports.getType = getType
//方法模塊化，把文件讀取操作剝離比較容易整理思路，emmmmmmm，但是寫的不是很優(yōu)雅，有待改進(jìn)

Node服務(wù)可以開啟了，文件可以遍歷了，至此基礎(chǔ)建設(shè)算是搞起來了，接下來就需要開一個(gè)不用看見產(chǎn)品的服務(wù)了。

開啟局域網(wǎng)服務(wù)

我們?cè)俅伟勋@取ip地址的方法剝離，需要用到的Node知識(shí)點(diǎn)是os模塊, os模塊參考文檔

const os = require('os');
const getlocalIp = () => {
    var interfaces = os.networkInterfaces();
    var ipArr = []
    for (var devName in interfaces) {
        var iface = interfaces[devName];
        for (var i = 0; i < iface.length; i++) {
            var alias = iface[i];
            if (alias.family == 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                ipArr.push(alias.address)
            }
        }
    }
    return ipArr
}
const getWlanIp = () => {
    var interfaces = os.networkInterfaces().WLAN
    var WlanIp = ''
    for(let ip of interfaces){
        if(ip.family=='IPv4'){
            WlanIp = ip.address
        }
    }
    return WlanIp
}
module.exports.getlocalIp = getlocalIp
module.exports.getWlanIp = getWlanIp 
// 為什么這里要留兩種ip地址呢，因?yàn)橛袝r(shí)候我們也需要開啟一個(gè)非局域網(wǎng)ip的服務(wù)啦，多功能加成

寫到這里突然想到一個(gè)問題，我做這個(gè)功能的另外一個(gè)很重要的目的是解決http-server默認(rèn)開啟8080端口的缺陷，因?yàn)?080端口很大可能會(huì)被占用，于是想到開啟服務(wù)時(shí)不妨隨機(jī)分配一個(gè)8###端口，這樣就極少可能存在端口被占用的情況了，一個(gè)隨機(jī)數(shù)就能實(shí)現(xiàn)?

捋一下功能實(shí)現(xiàn)的步驟

讀取某目錄下的html文件
獲取局域網(wǎng)Ip地址/本地Ip地址
分配隨機(jī)端口
自動(dòng)打開瀏覽器，生成index文件鏈接

整合后核心步驟

模塊引入

const http = require('http');
const fs = require('fs');
const Ip = require('../lib/get-ip')
const F = require('../lib/get-file')
const root = process.cwd();  //當(dāng)前目錄
const port = Math.floor(Math.random () * 1000) + 8000;
var localIP = Ip.getlocalIp()
var wlanIp = Ip.getWlanIp() || localIP[0]

主方法

function setHttpServer() {
    await setConsoleInfo();
    await fs.exists('index.html',function(exists){
    if(!exists){
            openDefaultBrowser(`http://`+wlanIp+':'+port)
          }else{
            openDefaultBrowser(`http://`+wlanIp+':'+port+'/index.html')
          }
    })
}

開啟服務(wù)并排錯(cuò)

server=http.createServer(function(req,res){
    if(req.url === '/favicon.ico') {
        // console.log('\033[42;30m DONE \033[40;32m Compiled successfully in 19987ms\033[0m')
    }else{
        var url=req.url;
        var file = root+url;
        fs.readFile(file,function(err,data){
            if(err){
                res.writeHeader(404,{
                    'content-type' : 'text/html;charset="utf-8"'
                });
                if(!F.countFile(F.geFileList(root)).html){
                    res.write('<h1>404頁面</h1><p><h2>當(dāng)前目錄沒有html文件</h2>')
                }else{
                    let fileList =  fs.readdirSync(`${file}`);
                    for(let f of fileList){
                        let type = F.getType(f)
                        if(type=='html'){
                            res.write('<br/>'+`<a href="${f}" rel="external nofollow" >${f}</a>`+'\n')
                        }
                    }
                }
                res.end();
            }else{
                var surl = '.'+url;
                var type = surl.substr(surl.lastIndexOf(".")+1,surl.length)
                res.writeHeader(200,{
                    'content-type' : "text/"+type+';'+'charset="utf-8"'
                });
                res.write(data);
                res.end();
            }
        })  
    } 
}).listen(port);

控制臺(tái)顯示一下服務(wù)地址

function setConsoleInfo(){
  let info = 'The default service has been opened in the browser!'
    console.log('\033[42;30m DONE \033[;32m' + info + '\033[0m')
    for(let dev of localIP){
        console.log(`${dev}`+':'+port)
    }
}

自動(dòng)打開瀏覽器

function openDefaultBrowser(url) {
  var exec = require('child_process').exec;
  switch (process.platform) {
    case "darwin":
      exec('open ' + url);
      break;
    case "win32":
      exec('start ' + url);
      break;
    default:
      exec('xdg-open', [url]);
  }
}

至此一個(gè)簡(jiǎn)單的無三方依賴的輕量級(jí)的Node服務(wù)就建立起來了，過程略顯粗暴，沒有詳細(xì)的解釋模塊方法的使用方式，因?yàn)樗玫牡姆椒ǘ急容^簡(jiǎn)單。

當(dāng)然這個(gè)小插件還有一定的缺陷，擴(kuò)展性略低，只能滿足簡(jiǎn)單的需求，還有很大的改進(jìn)空間，希望走過路過的不吝給予更好的建議。?[來自青銅選手的真誠臉]

歡迎使用npm進(jìn)行安裝試用