Node Web服务器

2,035 阅读10分钟

1. Web 服务器

  • 什么是Web服务器?

    • 当应用程序(客户端)需要某一个资源时,可以向一台服务器,通过Http请求获取到这个资源
    • 提供资源的这个服务器,就是一个Web服务器

    server.png

  • 目前有很多开源的Web服务器:Nginx、Apache(静态)、Apache Tomcat(静态、动态)、Node.js

2. http创建服务器

  • 基本使用

    const http = require('http')
    
    // 创建一个http对应的服务器
    const server = http.createServer((request, response) => {
      // request对象中包含本次客户端请求的所有信息
      // 请求的url
      // 请求的method
      // 请求的headers
      // 请求携带的数据
    
      // response对象用于给客户端返回结果的
      response.end("Hello World")
    })
    
    // 开启对应的服务器, 并且告知需要监听的端口
    // 监听端口时, 监听1024以上的端口, 666535以下的端口
    // 1025~65535之间的端口
    // 2个字节 => 256*256 => 65536 => 0~65535
    server.listen(8000, () => {
      console.log('服务器已经开启成功了~')
    })
    
  • 创建多个http服务器

    const http = require('http')
    
    // 1.创建一个服务器
    const server1 = http.createServer((req, res) => {
      res.end("2000端口服务器返回的结果~")
    })
    server1.listen(2000, () => {
      console.log('2000端口对应的服务器启动成功~')
    })
    
    // 2.创建第二个服务器
    const server2 = http.createServer((req, res) => {
      res.end("3000端口服务器返回的结果~")
    })
    server2.listen(3000, () => {
      console.log('3000端口对应的服务器启动成功~')
    })
    
    
    // 3.创建第三个服务器
    // const server3 = new http.Server()
    
    
  • 创建服务器对象,是通过 createServer 来完成的

    • http.createServer会返回服务器的对象
    • 底层其实使用直接 new Server 对象

3. 监听主机和端口号

  • Server通过listen方法来开启服务器,并且在某一个主机和端口上监听网络请求

    • 也就是当我们通过 ip:port的方式发送到我们监听的Web服务器上时;
    • 我们就可以对其进行相关的处理;
  • listen函数有三个参数:

    • 端口port: 可以不传, 系统会默认分配端, 项目中一般会写入到环境变量中

    • 主机host: 通常可以传入localhost、ip地址127.0.0.1、或者ip地址0.0.0.0,默认是0.0.0.0

      • localhost:本质上是一个域名,通常情况下会被解析成127.0.0.1
      • 127.0.0.1:回环地址(Loop Back Address),表达的意思其实是我们主机自己发出去的包,直接被自己接收
        • 正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层
        • 而回环地址,是在网络层直接就被获取到了,是不会经常数据链路层和物理层的
        • 比如我们监听 127.0.0.1时,在同一个网段下的主机中,通过ip地址是不能访问的
      • 0.0.0.0:
        • 监听IPV4上所有的地址,再根据端口找到不同的应用程序;
        • 比如我们监听 0.0.0.0时,在同一个网段下的主机中,通过ip地址是可以访问的;
  • 回调函数:服务器启动成功时的回调函数

  • server.listen(port, host, callback)
  • 细节补充
    • 在服务启动后,如果是浏览器访问,服务会被访问 2次,这是因为浏览器默认会请求当前服务上的 favicon 图标
    • 推荐使用postman来测试
    • npm install nodemon -g, 通过nodemon来启动服务可以在修改代码后自动重启服务

4. request请求对象

  • 在向服务器发送请求时,会携带很多信息,比如:

    • 本次请求的URL,服务器需要根据不同的URL进行不同的处理
    • 本次请求的请求方式,比如GET、POST请求传入的参数和处理的方式是不同的
    • 本次请求的headers中也会携带一些信息,比如客户端信息、接受数据的格式、支持的编码格式等
  • 这些信息,Node会帮助我们封装到一个request的对象中,我们可以直接来处理这个request对象

    const http = require('http')
    
    // 1.创建server服务器
    const server = http.createServer((req, res) => {
      // request对象中包含哪些信息?
      // 1.url信息
      console.log(req.url)
      // 2.method信息(请求方式)
      console.log(req.method)
      // 3.headers信息(请求信息)
      console.log(req.headers)
    
      res.end('hello world aaaa')
    })
    
    
    // 2.开启server服务器
    server.listen(8000, () => {
      console.log('服务器开启成功~')
    })
    

4.1 URL 的处理

  • 客户端在发送请求时,会请求不同的数据,那么会传入不同的请求地址:

    • 比如 http://localhost:8000/login
    • 比如 http://localhost:8000/products
  • 服务器端需要根据不同的请求地址,作出不同的响应

    const http = require('http')
    
    // 1.创建server服务器
    const server = http.createServer((req, res) => {
      const url = req.url
    
      if (url === '/login') {
        res.end('登录成功~')
      } else if (url === '/products') {
        res.end('商品列表~')
      } else if (url === '/lyric') {
        res.end('天空好想下雨, 我好想住你隔壁!')
      }
    })
    
    
    // 2.开启server服务器
    server.listen(8000, () => {
      console.log('服务器开启成功~')
    })
    

4.2 method的处理

  • 在Restful规范(设计风格)中,对于数据的增删改查应该通过不同的请求方式:

    • GET:查询数据
    • POST:新建数据
    • PATCH:更新数据
    • DELETE:删除数据
  • 所以,我们可以通过判断不同的请求方式进行不同的处理

    • 比如创建一个用户:
    • 请求接口为 /users
    • 请求方式为 POST请求
    • 携带数据 username和password
    const http = require('http')
    
    // 1.创建server服务器
    const server = http.createServer((req, res) => {
      const url = req.url
      const method = req.method
    
      if (url === '/login') {
        if (method === 'POST') {
          res.end('登录成功~')
        } else {
          res.end('不支持的请求方式, 请检测你的请求方式~')
        }
      } else if (url === '/products') {
        res.end('商品列表~')
      } else if (url === '/lyric') {
        res.end('天空好想下雨, 我好想住你隔壁!')
      }
    })
    
    // 2.开启server服务器
    server.listen(8000, () => {
      console.log('服务器开启成功~')
    })
    

5. request携带参数

5.1 query 参数

const http = require('http')
const url = require('url')
const qs = require('querystring')

// 1.创建server服务器
const server = http.createServer((req, res) => {
  // 1.参数一: query类型参数
  // /home/list?offset=100&size=20
  // 1.1.解析url
  const urlString = req.url
  const urlInfo = url.parse(urlString)

  // 1.2.解析query: offset=100&size=20
  const queryString = urlInfo.query
  const queryInfo = qs.parse(queryString)
  console.log(queryInfo.offset, queryInfo.size) // 100 20

  res.end('hello world aaaa bbb')
})


// 2.开启server服务器
server.listen(8000, () => {
  console.log('服务器开启成功~')
})

5.2 body 参数

const http = require('http')

// 1.创建server服务器
const server = http.createServer((req, res) => {
  // 获取参数: body参数
  req.setEncoding('utf-8')

  // request对象本质是上一个readable可读流
  let isLogin = false
  req.on('data', (data) => {
    const dataString = data
    // 对数据进行转换
    const loginInfo = JSON.parse(dataString)
    if (loginInfo.name === 'zhangsan' && loginInfo.password === '123456') {
      isLogin = true
    } else {
      isLogin = false
    }
  })

  req.on('end', () => {
    if (isLogin) {
      res.end('登录成功, 欢迎回来~')
    } else {
      res.end('账号或者密码错误, 请检测登录信息~')
    }
  })
})


// 2.开启server服务器
server.listen(8000, () => {
  console.log('服务器开启成功~')
})

5.3 headers 参数

  • content-type是这次请求携带的数据的类型:

    • application/x-www-form-urlencoded:表示数据被编码成以 '&' 分隔的键 - 值对,同时以 '=' 分隔键和值
    • application/json:表示是一个json类型
    • text/plain:表示是文本类型
    • application/xml:表示是xml类型
    • multipart/form-data:表示是上传文件
  • content-length:文件的大小长度

  • keep-alive:

    • http是基于TCP协议的,但是通常在进行一次请求和响应结束后会立刻中断
    • 在http1.0中,如果想要继续保持连接:
      • 浏览器需要在请求头中添加 connection: keep-alive;
      • 服务器需要在响应头中添加 connection: keey-alive;
      • 当客户端再次放请求时,就会使用同一个连接,直接一方中断连接
    • 在http1.1中,所有连接默认是 connection: keep-alive的
      • 不同的Web服务器会有不同的保持 keep-alive的时间
      • Node中默认是5s钟
  • accept-encoding:告知服务器,客户端支持的文件压缩格式,比如js文件可以使用gzip编码,对应 .gz文件;

  • accept:告知服务器,客户端可接受文件的格式类型

  • user-agent:客户端相关的信息

    const http = require('http')
    
    // 1.创建server服务器
    const server = http.createServer((req, res) => {
      console.log(req.headers)
      console.log(req.headers['content-type'])
    
      // cookie/session/token
      const token = req.headers['authorization']
      console.log(token)
    
      res.end('查看header的信息~')
    })
    
    // 2.开启server服务器
    server.listen(8000, () => {
      console.log('服务器开启成功~')
    })
    

6. response响应对象

6.1 响应方式

  • 给客户端响应的结果数据,可以通过两种方式:

    • Write方法:这种方式是直接写出数据,但是并没有关闭流
    • end方法:这种方式是写出最后的数据,并且写出后会关闭流
  • 如果没有调用 end和close,客户端将会一直等待结果

    • 所以客户端在发送网络请求时,都会设置超时时间
    const http = require('http')
    
    // 1.创建server服务器
    const server = http.createServer((req, res) => {
      // res: response对象 => Writable可写流
      // 1.响应数据方式一: write
      res.write("Hello World")
      res.write("哈哈哈哈")
    
      // // 2.响应数据方式二: end
      res.end("本次写出已经结束")
    })
    
    
    // 2.开启server服务器
    server.listen(8000, () => {
      console.log('服务器开启成功~')
    })
    

6.2 响应状态码

  • Http状态码(Http Status Code)是用来表示Http响应状态的数字代码:

    • Http状态码非常多,可以根据不同的情况,给客户端返回不同的状态码;
    • MDN响应码解析地址

    状态码.png

    const http = require('http')
    
    // 1.创建server服务器
    const server = http.createServer((req, res) => {  
      // 响应状态码
      // 1.方式一: statusCode
      // res.statusCode = 403
    
      // 2.方式二: setHead 响应头
      res.writeHead(401)
    
      res.end('hello world aaaa')
    })
    
    
    // 2.开启server服务器
    server.listen(8000, () => {
      console.log('服务器开启成功~')
    })
    

6.3 响应的headers

  • 返回头部信息,主要有两种方式:

    • res.setHeader:一次写入一个头部信息
    • res.writeHead:同时写入header和status
    const http = require('http')
    
    // 1.创建server服务器
    const server = http.createServer((req, res) => {
    
      // 设置header信息: 数据的类型以及数据的编码格式
      // 1.单独设置某一个header
      // res.setHeader('Content-Type', 'text/plain;charset=utf8;')
    
      // 2.和http status code一起设置
      res.writeHead(200, {
        'Content-Type': 'application/json;charset=utf8;'
      })
    
      const list = [
        { name: "lilei", age: 18 },
        { name: "hanmeimei", age: 17 },
      ]
      res.end(JSON.stringify(list))
    })
    
    
    // 2.开启server服务器
    server.listen(8000, () => {
      console.log('服务器开启成功~')
    })
    

7. http 发送网络请求

  • axios 在node中本质就是 http模块
  • axios 在浏览器中本质就是 xhr
  • http 发送网络请求

    const http = require('http')
    
    // 1.使用http模块发送get请求
    // http.get('http://localhost:8000', (res) => {
    //   // 从可读流中获取数据
    //   res.on('data', (data) => {
    //     const dataString = data.toString()
    //     const dataInfo = JSON.parse(dataString)
    //     console.log(dataInfo)
    //   })
    // })
    
    // 2.使用http模块发送post请求
    const req = http.request({
      method: 'POST',
      hostname: 'localhost',
      port: 8000
    }, (res) => {
      res.on('data', (data) => {
        const dataString = data.toString()
        const dataInfo = JSON.parse(dataString)
        console.log(dataInfo)
      })
    })
    
    // 必须调用end, 表示写入内容完成
    req.end()
    

8. http 模块文件上传

  • 错误的方法(以上传图片为例,这种方法生成的图片是打不开的)
    • 以表单的形式上传文件,下面的方法会将非图片内容也写入到 foo.png中,会导致文件有问题
    const http = require("http");
    const fs = require('fs')
    
    // 1.创建server服务器
    const server = http.createServer((req, res) => {
      // 创建writable的stream
      const writeStream = fs.createWriteStream('./foo.png', {
        flags: 'a+'
      })
    
      // req.pipe(writeStream)
    
      // 客户端传递的数据是表单数据(请求体)
      req.on("data", (data) => {
        console.log(data);
        writeStream.write(data)
      });
    
      req.on("end", () => {
        // console.log("数据传输完成~");
        // writeStream.close()
        res.end("文件上传成功~");
      });
    });
    
    // 2.开启server服务器
    server.listen(8000, () => {
      console.log("服务器开启成功~");
    });
    
  • 正确的做法
    • 获取data, 对data进行截取, 拿到数据存储到文件中
    const http = require("http");
    const fs = require('fs')
    
    // 1.创建server服务器
    const server = http.createServer((req, res) => {
      req.setEncoding('binary')
    
      const boundary = req.headers['content-type'].split('; ')[1].replace('boundary=', '')
      console.log(boundary)
    
      // 客户端传递的数据是表单数据(请求体)
      let formData = ''
      req.on("data", (data) => {
        formData += data
      });
    
      req.on("end", () => {
        console.log(formData)
        // 1.截图从image/jpeg位置开始后面所有的数据
        const imgType = 'image/jpeg'
        const imageTypePosition = formData.indexOf(imgType) + imgType.length
        let imageData = formData.substring(imageTypePosition)
    
        // 2.imageData开始位置会有两个空格
        imageData = imageData.replace(/^\s\s*/, '')
    
        // 3.替换最后的boundary
        imageData = imageData.substring(0, imageData.indexOf(`--${boundary}--`))
    
        // 4.将imageData的数据存储到文件中
        fs.writeFile('./bar.png', imageData, 'binary', () => {
          console.log('文件存储成功')
          res.end("文件上传成功~");
        })
      });
    });
    
    // 2.开启server服务器
    server.listen(8000, () => {
      console.log("服务器开启成功~");
    });
    
  • 浏览器中axios文件上传的操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    
      <input type="file">
      <button>上传</button>
    
      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      <script>
        // 文件上传的逻辑
        const btnEl = document.querySelector('button')
        btnEl.onclick = function() {
          // 1.创建表单对象
          const formData = new FormData()
    
          // 2.将选中的图标文件放入表单
          const inputEl = document.querySelector('input')
          formData.set('photo', inputEl.files[0])
    
          // 3.发送post请求, 将表单数据携带到服务器(axios)
          axios({
            method: 'post',
            url: 'http://localhost:8000',
            data: formData,
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
        }
      </script>
    </body>
    </html>