使用Node.js原生API写一个web服务器

Node.jsJavaScript基础上发展起来的语言,因此前端开发者应该天生就会一点。通常咱们会用它来作CLI工具或者Web服务器,作Web服务器也有不少成熟的框架,好比ExpressKoa。可是ExpressKoa都是对Node.js原生API的封装,因此其实不借助任何框架,只用原生API咱们也能写一个Web服务器出来。本文要讲的就是不借助框架,只用原生API怎么写一个Web服务器。由于在个人计划中,后面会写ExpressKoa的源码解析,他们都是使用原生API来实现的。因此本文实际上是这两个源码解析的前置知识,能够帮咱们更好的理解ExpressKoa这种框架的意义和源码。本文仅为说明原生API的使用方法,代码较丑,请不要在实际工做中模仿!javascript

本文可运行代码示例已经上传GitHub,你们能够拿下来玩玩:https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Node.js/HttpServer前端

Hello World

要搭建一个简单的Web服务器,使用原生的http模块就够了,一个简单的Hello World程序几行代码就够了:java

const http = require('http')

const port = 3000

const server = http.createServer((req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'text/plain')
  res.end('Hello World')
})

server.listen(port, () => {
  console.log(`Server is running on http://127.0.0.1:${port}/`)
})

这个例子就很简单,直接用http.createServer建立了一个服务器,这个服务器也没啥逻辑,只是在访问的时候返回Hello World。服务器建立后,使用server.listen运行在3000端口就行。git

这个例子确实简单,可是他貌似除了输出一个Hello World以外,啥也干不了,离咱们通常使用的Web服务器还差了很远,主要是差了这几块:github

  1. 不支持HTTP动词,好比GETPOST
  2. 不支持路由
  3. 没有静态资源托管
  4. 不能持久化数据

前面三点是一个Web服务器必备的基础功能,第四点是否须要要看状况,毕竟目前不少NodeWeb服务器只是做为一个中间层,真正跟数据库打交道作持久化的仍是各类微服务,可是咱们也应该知道持久化怎么作。web

因此下面咱们来写一个真正能用的Web服务器,也就是说把前面缺的几点都补上。数据库

处理路由和HTTP动词

前面咱们的那个Hello World也不是彻底不能用,由于代码位置仍是得在http.createServer里面,咱们就在里面添加路由的功能。为了跟后面的静态资源作区分,咱们的API请求都以/api开头。要作路由匹配也不难,最简单的就是直接用if条件判断就行。为了能拿到请求地址,咱们须要使用url模块来解析传过来的地址。而Http动词直接能够用req.method拿到。因此http.createServer改造以下:json

const url = require('url');

const server = http.createServer((req, res) => {
  // 获取url的各个部分
  // url.parse能够将req.url解析成一个对象
  // 里面包含有pathname和querystring等
  const urlObject = url.parse(req.url);
  const { pathname } = urlObject;

  // api开头的是API请求
  if (pathname.startsWith('/api')) {
    // 再判断路由
    if (pathname === '/api/users') {
      // 获取HTTP动词
      const method = req.method;
      if (method === 'GET') {
        // 写一个假数据
        const resData = [
          {
            id: 1,
            name: '小明',
            age: 18
          },
          {
            id: 2,
            name: '小红',
            age: 19
          }
        ];
        res.setHeader('Content-Type', 'application/json')
        res.end(JSON.stringify(resData));
        return;
      }
    }
  }
});

如今咱们访问/api/users就能够拿到用户列表了:api

image.png

支持静态文件

上面说了API请求是以/api开头,也就是说不是以这个开头的能够认为都是静态文件,不一样文件有不一样的Content-Type,咱们这个例子里面暂时只支持一种.jpg吧。其实就是给咱们的if (pathname.startsWith('/api'))加一个else就行。返回静态文件须要:服务器

  1. 使用fs模块读取文件。
  2. 返回文件的时候根据不一样的文件类型设置不一样的Content-Type

因此咱们这个else就长这个样子:

// ... 省略先后代码 ...

else {
  // 使用path模块获取文件后缀名
  const extName = path.extname(pathname);

  if (extName === '.jpg') {
    // 使用fs模块读取文件
    fs.readFile(pathname, (err, data) => {
      res.setHeader('Content-Type', 'image/jpeg');
      res.write(data);
      res.end();
    })
  }
}

而后咱们在同级目录下放一个图片试一下:

image.png

数据持久化

数据持久化的方式有好几种,通常都是存数据库,少数状况下也有存文件的。存数据库比较麻烦,还须要建立和链接数据库,咱们这里很差demo,咱们这里演示一个存文件的例子。通常POST请求是用来存新数据的,咱们在前面的基础上再添加一个POST /api/users来新增一条数据,只须要在前面的if (method === 'GET')后面加一个POST的判断就行:

// ... 省略其余代码 ...

else if (method === 'POST') {
  // 注意数据传过来可能有多个chunk
  // 咱们须要拼接这些chunk
  let postData = '';
  req.on('data', chunk => {
    postData = postData + chunk;
  })

  req.on('end', () => {
    // 数据传完后往db.txt插入内容
    fs.appendFile(path.join(__dirname, 'db.txt'), postData, () => {
      res.end(postData);  // 数据写完后将数据再次返回
    });
  })
}

而后咱们测试一下这个API:

image-20201007165330636

再去看看文件里面写进去没有:

image-20201007165506756

总结

到这里咱们就完成了一个具备基本功能的web服务器,代码不复杂,可是对于帮咱们理解Node web服务器的原理颇有帮助。可是上述代码还有个很大的问题就是:代码很丑!全部代码都写在一堆,并且HTTP动词和路由匹配所有是使用if条件判断,若是有几百个API,再配合十来个动词,那代码简直就是个灾难!因此咱们应该将路由处理HTTP动词静态文件数据持久化这些功能所有抽离出来,让整个应用变得更优雅,更好扩展。这就是ExpressKoa这些框架存在的意义,下一篇文章咱们就去Express的源码看看他是怎么解决这个问题的,点个关注不迷路~

本文可运行代码示例已经上传GitHub,你们能够拿下来玩玩:https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Node.js/HttpServer

文章的最后,感谢你花费宝贵的时间阅读本文,若是本文给了你一点点帮助或者启发,请不要吝啬你的赞和GitHub小星星,你的支持是做者持续创做的动力。

做者博文GitHub项目地址: https://github.com/dennis-jiang/Front-End-Knowledges

我也搞了个公众号[进击的大前端],不打广告,不写水文,只发高质量原创,欢迎关注~

相关文章
相关标签/搜索