网络相册

本小节,将实现一个简单的在线相册,效果如下所示: 简易在线相册

:stars: 要实现 :point_up: 的网络相册,这里以两种方式来实现这个效果,一种是传统的http与使用connect中间件来实现的,这里这个服务实现的功能主要有:

  • 托管静态文件;
  • 处理错误以及损坏或者不存在的URL;
  • 处理不同类型的请求

:point_down: 将对比一下其实现过程

使用nodejs的http模块实现

按照 :point_down: 的步骤来一步步实现

  1. 先创建一个服务,并监听3000端口;
    const http = require('node:http');
    const fs = require('node:fs');
    const server = http.createServer((req, res) => {});
    server.listen(3000);
    
  2. 针对每一个客户端的连接做监听,判断req.url是否是满足的链接,并根据匹配的链接返回对应的文件(通过读取文件流的方式经过管道输出到可写入流中,即res);
    if(req.url === '/'){
    res.writeHead(200, { 'Content-Type': 'text/html' });
    fs.createReadStream(`${__dirname}/index.html`).pipe(res);
    }
    
  3. 判断符合的图片连接请求,并在匹配后,判断文件是否存在,针对存在的文件,进行图片文件流的输出;
    if(req.method === 'GET' && req.url.indexOf('png') > -1){
     // png图片类型
     fs.stat(`${__dirname}${req.url}`, (err, stat) => {
     if(err || !stat.isFile()){
       res.writeHead(404);
       res.end('Not Found');
     }
     res.writeHead(200, { 'Content-Type': 'application/png' });
     fs.createReadStream(`${__dirname}${req.url}`).pipe(res);
    })
    }
    

:poing_down: 是完整的代码 简易在线相册完整代码

使用connect中间件实现

基于http模块API之上的connect库,提供了一些工具方法能够让这些重复性的处理便于实现,以至于让开发者能够更加专注于业务应用本身 由于后续的connect的版本将库本身自带的其他功能都拆成一个个的模块了,因此这边直接采用最新的版本来实现,具体代码实现如下:

const connect = require('connect');
const http = require('http');
const path = require('path');
const serveStatic = require('serve-static');

const app = connect();
app.use(serveStatic(path.join(__dirname, '/images')));

http.createServer(app).listen(3000);

:stars: 这里为方便演示,将图片以及html文件都放在同一个目录下,然后借助于serve-static库,将当前images目录映射成为一个静态资源目录,然后直接访问,就可以达到这样子的一个效果, :confused: 那么这里的connect库它是如何做到的呢?这里很有必要学习一波关于connect库的代码实现逻辑,还有它是如何做到支持一堆的中间件热拔插的方式来实现业务的,我觉得这里应该有很大的学习空间,是时候上演一波关于connect源代码的分析了,这里就不在本章节中单独阐述了,这边将在另外一篇文章中来具体分析!!!

results matching ""

    No results matching ""