简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  필기 Node 정적 자원 서버 구현 방법

필기 Node 정적 자원 서버 구현 방법

亚连
亚连원래의
2018-05-25 16:33:291277검색

이 글은 주로 손으로 쓴 Node 정적 리소스 서버의 구현 방법을 소개하고 있습니다.

정적 리소스 서버를 작성하려면 먼저 http 서버를 만드는 방법과 그 원리가 무엇인지 알아야 합니다.

http 서버는 tcp 서버에서 상속되며 http 프로토콜은 응용 프로그램 계층 프로토콜입니다.

http의 원칙은 클라이언트가 연결되면 연결 이벤트가 먼저 트리거되고 요청이 여러 번 전송될 수 있다는 것입니다

. 

let server = http.createServer();
let url = require('url');
server.on('connection', function (socket) {
  console.log('客户端连接 ');
});
server.on('request', function (req, res) {
  let { pathname, query } = url.parse(req.url, true);
  let result = [];
  req.on('data', function (data) {
    result.push(data);
  });
  req.on('end', function () {
    let r = Buffer.concat(result);
    res.end(r);
  })
});
server.on('close', function (req, res) {
  console.log('服务器关闭 ');
});
server.on('error', function (err) {
  console.log('服务器错误 ');
});
server.listen(8080, function () {
  console.log('server started at http://localhost:8080');
});

  1. req는 클라이언트의 연결을 나타내고, 서버는 클라이언트의 요청 정보를 구문 분석하여 req

  2. res에 넣습니다. 클라이언트에 응답하려면 res

    3. 를 전달해야 합니다.

  3. req와 res는 모두 소켓에서 먼저 수신한 다음 이벤트가 발생하면 이를 구문 분석하고 요청 헤더 객체를 구문 분석한 후 요청 객체를 기반으로 응답 객체를 생성합니다. 요청 객체

  4. req.url 요청 경로 가져오기

  5. req.headers 요청 헤더 객체

다음으로 몇 가지 핵심 기능을 설명하겠습니다

압축 및 압축 해제에 대한 심층적인 이해 및 구현

압축하는 이유는 무엇입니까?

압축 및 압축 해제에 zlib 모듈을 사용할 수 있습니다. 파일을 압축한 후 크기를 줄이고 전송 속도를 높이며 대역폭 코드를 절약할 수 있습니다.

압축 및 압축 해제 개체는 모두 변환 변환 스트림입니다. , 이중 이중 스트림에서 상속됩니다. 즉, 읽고 쓸 수 있는 스트림

  1. zlib.createGzip: Gzip 스트림 객체를 반환하고 Gzip 알고리즘을 사용하여 데이터를 압축합니다.

  2. zlib.createGunzip: Gzip 스트림 객체를 반환합니다. Gzip 알고리즘을 사용하여 압축된 데이터의 압축을 풉니다. 데이터 압축 해제 알고리즘

  3. 구현 압축 및 압축 해제

  4. 압축된 파일은 크거나 작을 수 있으므로 처리 속도를 높이기 위해 스트림을 사용하여 이를 달성합니다

let fs = require("fs");
let path = require("path");
let zlib = require("zlib");
function gzip(src) {
 fs
  .createReadStream(src)
  .pipe(zlib.createGzip())
  .pipe(fs.createWriteStream(src + ".gz"));
}
gzip(path.join(__dirname,'msg.txt'));
function gunzip(src) {
 fs
  .createReadStream(src)
  .pipe(zlib.createGunzip())
  .pipe(
   fs.createWriteStream(path.join(__dirname, path.basename(src, ".gz")))
  );
}
gunzip(path.join(__dirname, "msg.txt.gz"));

gzip 방식은 압축을 구현하는 데 사용됩니다

gunzip 방식은 압축 해제에 사용됩니다

  1. msg.txt 파일은 동일한 레벨의 디렉터리입니다

  2. 왜 이렇게 작성해야 합니까: gzip(path .join(__dirname,'msg.txt'));

  3. console.log (process.cwd()); 때문에 현재 작업 디렉터리는 파일이 있는 디렉터리가 아니라 루트 디렉터리임을 출력합니다. 파일을 찾을 수 없으면 gzip('msg.txt');을 작성하면 경로에서 오류가 보고됩니다

  4. 확장자를 포함한 파일 이름을 얻으면 확장자 매개변수를 전달할 수 있습니다. 확장자를 얻으려면

  5. extname을 제거하세요.

  6. 압축 형식과 압축 해제 형식이 일치해야 합니다. 그렇지 않으면 오류가 보고됩니다.

  7. 때때로 우리가 얻는 문자열이 스트림이 아니므로 해결 방법 it

  8. let zlib=require('zlib');
let str='hello';
zlib.gzip(str,(err,buffer)=>{
  console.log(buffer.length);
  zlib.unzip(buffer,(err,data)=>{
    console.log(data.toString());
  })
});

    9. 압축된 내용이 원본보다 클 가능성이 있습니다. 내용이 너무 작으면 압축이 의미가 없습니다

텍스트 압축 규칙이 있으므로 효과가 더 좋습니다

압축을 적용합니다. 및 http에서 압축 해제

다음은 그림에 표시된 대로 이러한 기능을 구현합니다.

클라이언트가 서버에 대한 요청을 시작하면 accept-encoding을 전달합니다(예: Accept-Encoding: gzip , 기본값)은 내가 지원하는 압축 해제 형식을 서버에 알려줍니다

서버는 Accept-Encoding에서 표시하는 형식에 따라 압축해야 합니다. 형식이 없으면 브라우저에서 압축을 풀 수 없기 때문에 압축할 수 없습니다

클라이언트가 요구하는 Accept-Encoding 형식이 서버에 없어 압축이 불가능합니다

  1. let http = require("http");
let path = require("path");
let url = require("url");
let zlib = require("zlib");
let fs = require("fs");
let { promisify } = require("util");
let mime = require("mime");
//把一个异步方法转成一个返回promise的方法
let stat = promisify(fs.stat);
http.createServer(request).listen(8080);
async function request(req, res) {
 let { pathname } = url.parse(req.url); 
 let filepath = path.join(__dirname, pathname); 
 // fs.stat(filepath,(err,stat)=>{});现在不这么写了，异步的处理起来比较麻烦
 try {
  let statObj = await stat(filepath);
  res.setHeader("Content-Type", mime.getType(pathname));
  let acceptEncoding = req.headers["accept-encoding"];
  if (acceptEncoding) {
   if (acceptEncoding.match(/\bgzip\b/)) {
    
    res.setHeader("Content-Encoding", "gzip");
    fs
     .createReadStream(filepath)
     .pipe(zlib.createGzip())
     .pipe(res);
   } else if (acceptEncoding.match(/\bdeflate\b/)) {
    res.setHeader("Content-Encoding", "deflate");
    fs
     .createReadStream(filepath)
     .pipe(zlib.createDeflate())
     .pipe(res);
   } else {
    fs.createReadStream(filepath).pipe(res);
   }
  } else {
   fs.createReadStream(filepath).pipe(res);
  }
 } catch (e) {
  res.statusCode = 404;
  res.end("Not Found");
 }
}

    3. mime: 파일 이름과 경로를 통해 파일의 콘텐츠 유형을 얻을 수 있습니다. 다양한 파일 콘텐츠 유형에 따라 파일의 콘텐츠 유형이 다른 Content-Types를 반환합니다

acceptEncoding: 모두 다른 브라우저와 호환되도록 소문자로 작성되고, 노드는 모든 요청 헤더를 소문자

  1. 로 변환합니다.filepath: 절대값 가져오기 파일 경로

  2. 서비스 시작 후 http://localhost:8080/msg.txt를 방문하여 결과를 확인하세요

  3. 깊이 이해하고 캐싱을 구현하세요

  4. 왜 캐시가 필요한가요? 캐싱의 이점은 무엇입니까?

중복 데이터 전송을 줄이고 네트워크 요금을 절약합니다.

서버 부하를 줄이고 웹사이트 성능을 대폭 향상합니다.

  1. 클라이언트 로딩 웹페이지 속도를 높입니다.

  2. 캐시 카테고리

  3. 강제 캐시:

    强制缓存，在缓存数据未失效的情况下，可以直接使用缓存数据
    在没有缓存数据的时候，浏览器向服务器请求数据时，服务器会将数据和缓存规则一并返回，缓存规则信息包含在响应header中

    对比缓存：

    浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中

    再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回304状态码，通知客户端比较成功，可以使用缓存数据

    两类缓存的区别和联系

    强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互
    两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则

    实现对比缓存

    实现对比缓存一般是按照以下步骤：

    第一次访问服务器的时候，服务器返回资源和缓存的标识，客户端则会把此资源缓存在本地的缓存数据库中。

    第二次客户端需要此数据的时候，要取得缓存的标识，然后去问一下服务器我的资源是否是最新的。

    如果是最新的则直接使用缓存数据，如果不是最新的则服务器返回新的资源和缓存规则，客户端根据缓存规则缓存新的数据

    实现对比缓存一般有两种方式

    通过最后修改时间来判断缓存是否可用

    let http = require('http');
let url = require('url');
let path = require('path');
let fs = require('fs');
let mime = require('mime');
// http://localhost:8080/index.html
http.createServer(function (req, res) {
  let { pathname } = url.parse(req.url, true);
  //D:\vipcode\201801\20.cache\index.html
  let filepath = path.join(__dirname, pathname);
  fs.stat(filepath, (err, stat) => {
    if (err) {
      return sendError(req, res);
    } else {
      let ifModifiedSince = req.headers['if-modified-since'];
      let LastModified = stat.ctime.toGMTString();
      if (ifModifiedSince == LastModified) {
        res.writeHead(304);
        res.end('');
      } else {
        return send(req, res, filepath, stat);
      }
    }
  });
}).listen(8080);
function sendError(req, res) {
  res.end('Not Found');
}
function send(req, res, filepath, stat) {
  res.setHeader('Content-Type', mime.getType(filepath));
  //发给客户端之后，客户端会把此时间保存起来，下次再获取此资源的时候会把这个时间再发回服务器
  res.setHeader('Last-Modified', stat.ctime.toGMTString());
  fs.createReadStream(filepath).pipe(res);
}

    这种方式有很多缺陷

    1. 某些服务器不能精确得到文件的最后修改时间， 这样就无法通过最后修改时间来判断文件是否更新了

    2. 某些文件的修改非常频繁，在秒以下的时间内进行修改.Last-Modified只能精确到秒。

    3. 一些文件的最后修改时间改变了，但是内容并未改变。 我们不希望客户端认为这个文件修改了

    4. 如果同样的一个文件位于多个CDN服务器上的时候内容虽然一样，修改时间不一样

    ETag

    ETag是根据实体内容生成的一段hash字符串,可以标识资源的状态
    资源发生改变时，ETag也随之发生变化。 ETag是Web服务端产生的，然后发给浏览器客户端

    let http = require('http');
let url = require('url');
let path = require('path');
let fs = require('fs');
let mime = require('mime');
let crypto = require('crypto');

http.createServer(function (req, res) {
  let { pathname } = url.parse(req.url, true);
  
  let filepath = path.join(__dirname, pathname);
  fs.stat(filepath, (err, stat) => {
    if (err) {
      return sendError(req, res);
    } else {
      let ifNoneMatch = req.headers['if-none-match'];
      let out = fs.createReadStream(filepath);
      let md5 = crypto.createHash('md5');

      out.on('data', function (data) {
        md5.update(data);
      });
      out.on('end', function () {
      
        let etag = md5.digest('hex');
        let etag = `${stat.size}`;
        if (ifNoneMatch == etag) {
          res.writeHead(304);
          res.end('');
        } else {
          return send(req, res, filepath, etag);
        }
      });

    }
  });
}).listen(8080);
function sendError(req, res) {
  res.end('Not Found');
}
function send(req, res, filepath, etag) {
  res.setHeader('Content-Type', mime.getType(filepath));
  
  res.setHeader('ETag', etag);
  fs.createReadStream(filepath).pipe(res);
}

    客户端想判断缓存是否可用可以先获取缓存中文档的ETag，然后通过If-None-Match发送请求给Web服务器询问此缓存是否可用。

    服务器收到请求，将服务器的中此文件的ETag,跟请求头中的If-None-Match相比较,如果值是一样的,说明缓存还是最新的,Web服务器将发送304 Not Modified响应码给客户端表示缓存未修改过，可以使用。

    如果不一样则Web服务器将发送该文档的最新版本给浏览器客户端

    实现强制缓存

    把资源缓存在客户端，如果客户端再次需要此资源的时候，先获取到缓存中的数据，看是否过期，如果过期了。再请求服务器

    如果没过期，则根本不需要向服务器确认，直接使用本地缓存即可

    let http = require('http');
let url = require('url');
let path = require('path');
let fs = require('fs');
let mime = require('mime');
let crypto = require('crypto');
http.createServer(function (req, res) {
  let { pathname } = url.parse(req.url, true);
  let filepath = path.join(__dirname, pathname);
  console.log(filepath);
  fs.stat(filepath, (err, stat) => {
    if (err) {
      return sendError(req, res);
    } else {
      send(req, res, filepath);
    }
  });
}).listen(8080);
function sendError(req, res) {
  res.end('Not Found');
}
function send(req, res, filepath) {
  res.setHeader('Content-Type', mime.getType(filepath));
  res.setHeader('Expires', new Date(Date.now() + 30 * 1000).toUTCString());
  res.setHeader('Cache-Control', 'max-age=30');
  fs.createReadStream(filepath).pipe(res);
}

    浏览器会将文件缓存到Cache目录，第二次请求时浏览器会先检查Cache目录下是否含有该文件，如果有，并且还没到Expires设置的时间，即文件还没有过期，那么此时浏览器将直接从Cache目录中读取文件，而不再发送请求

    Expires是服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据

    Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据,如果同时设置的话，其优先级高于Expires

    下面开始写静态服务器

    首先创建一个http服务，配置监听端口

     let http = require('http');
 let server = http.createServer();
    server.on('request', this.request.bind(this));
    server.listen(this.config.port, () => {
      let url = `http://${this.config.host}:${this.config.port}`;
      debug(`server started at ${chalk.green(url)}`);
    });

    下面写个静态文件服务器

    先取到客户端想说的文件或文件夹路径，如果是目录的话，应该显示目录下面的文件列表

     async request(req, res) {
    let { pathname } = url.parse(req.url);
    if (pathname == '/favicon.ico') {
      return this.sendError('not found', req, res);
    }
    let filepath = path.join(this.config.root, pathname);
    try {
      let statObj = await stat(filepath);
      if (statObj.isDirectory()) {
        let files = await readdir(filepath);
        files = files.map(file => ({
          name: file,
          url: path.join(pathname, file)
        }));
        let html = this.list({
          title: pathname,
          files
        });
        res.setHeader('Content-Type', 'text/html');
        res.end(html);
      } else {
        this.sendFile(req, res, filepath, statObj);
      }
    } catch (e) {
      debug(inspect(e));
      this.sendError(e, req, res);
    }
  }
  
  sendFile(req, res, filepath, statObj) {
    if (this.handleCache(req, res, filepath, statObj)) return;
    res.setHeader('Content-Type', mime.getType(filepath) + ';charset=utf-8');
    let encoding = this.getEncoding(req, res);
    let rs = this.getStream(req, res, filepath, statObj);

    if (encoding) {
      rs.pipe(encoding).pipe(res);
    } else {
      rs.pipe(res);
    }
  }

    支持断点续传

     getStream(req, res, filepath, statObj) {
    let start = 0;
    let end = statObj.size - 1;
    let range = req.headers['range'];
    if (range) {
      res.setHeader('Accept-Range', 'bytes');
      res.statusCode = 206;
      let result = range.match(/bytes=(\d*)-(\d*)/);
      if (result) {
        start = isNaN(result[1]) ? start : parseInt(result[1]);
        end = isNaN(result[2]) ? end : parseInt(result[2]) - 1;
      }
    }
    return fs.createReadStream(filepath, {
      start, end
    });
  }

    支持对比缓存，通过etag的方式

    handleCache(req, res, filepath, statObj) {
    let ifModifiedSince = req.headers['if-modified-since'];
    let isNoneMatch = req.headers['is-none-match'];
    res.setHeader('Cache-Control', 'private,max-age=30');
    res.setHeader('Expires', new Date(Date.now() + 30 * 1000).toGMTString());
    let etag = statObj.size;
    let lastModified = statObj.ctime.toGMTString();
    res.setHeader('ETag', etag);
    res.setHeader('Last-Modified', lastModified);
    if (isNoneMatch && isNoneMatch != etag) {
      return fasle;
    }
    if (ifModifiedSince && ifModifiedSince != lastModified) {
      return fasle;
    }
    if (isNoneMatch || ifModifiedSince) {
      res.writeHead(304);
      res.end();
      return true;
    } else {
      return false;
    }
  }

    支持文件压缩

      getEncoding(req, res) {
    let acceptEncoding = req.headers['accept-encoding'];
    if (/\bgzip\b/.test(acceptEncoding)) {
      res.setHeader('Content-Encoding', 'gzip');
      return zlib.createGzip();
    } else if (/\bdeflate\b/.test(acceptEncoding)) {
      res.setHeader('Content-Encoding', 'deflate');
      return zlib.createDeflate();
    } else {
      return null;
    }
  }

    编译模板，得到一个渲染的方法,然后传入实际数据数据就可以得到渲染后的HTML了

    function list() {
  let tmpl = fs.readFileSync(path.resolve(__dirname, 'template', 'list.html'), 'utf8');
  return handlebars.compile(tmpl);
}

    这样一个简单的静态服务器就完成了，其中包含了静态文件服务，实现缓存，实现断点续传，分块获取，实现压缩的功能

    上面是我整理给大家的，希望今后会对大家有帮助。

    相关文章：

    Ajax实现智能提示搜索功能

    反向Ajax 30分钟快速掌握

    Ajax请求成功后打开新窗口地址

위 내용은 필기 Node 정적 자원 서버 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：nodejs의 비밀번호 암호화 처리 작업에 대한 자세한 설명다음 기사：nodejs의 비밀번호 암호화 처리 작업에 대한 자세한 설명

관련 기사

더보기