目录
- 一、概念
- 二、请求报文的组成
- 三、响应报文的组成
- 四、创建http服务
-
- [4.1 操作步骤](#4.1 操作步骤)
- [4.2 注意事项](#4.2 注意事项)
- [五、获取 HTTP 请求报文](#五、获取 HTTP 请求报文)
-
- [5.1 获取请求报文](#5.1 获取请求报文)
- [5.2 提取路径和查询字符串](#5.2 提取路径和查询字符串)
- [六、设置 HTTP 响应报文](#六、设置 HTTP 响应报文)
- 七、MIME设置资源类型
一、概念
HTTP(hypertext transport protocol)协议;中文叫超文本传输协议
是一种基于TCP/IP的应用层通信协议
这个协议详细规定了 浏览器 和万维网 服务器 之间互相通信的规则。
协议中主要规定了两个方面的内容
- 客户端:用来向服务器发送数据,可以被称之为请求报文
- 服务端:向客户端返回数据,可以被称之为响应报文
二、请求报文的组成
- 请求行
- 请求头
- 空行
- 请求体
三、响应报文的组成
-
响应行
HTTP/1.1 200 ok
还有一些状态码,参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
-
响应头
Cache-Control:缓存控制 private 私有的,只允许客户端缓存数据 Connection 链接设置 Content-Type:text/html;charset=utf-8 设置响应体的数据类型以及字符集,响应体为html,字符集 utf-8 Content-Length:响应体的长度,单位为字节
-
空行
-
响应体
-
响应体内容的类型是非常灵活的,常见的类型有 HTML、CSS、JS、图片、JSON
四、创建http服务
使用 nodejs 创建 HTTP 服务
4.1 操作步骤
js
//1. 导入 http 模块
const http = require('http');
//2. 创建服务对象 create 创建 server 服务
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
//解决中文乱码
response.setHeader("Content-Type","text/html;charset=utf-8")
response.end('Hello HTTP server');
});
//3. 监听端口, 启动服务
server.listen(9000, () => {
console.log('服务已经启动, 端口 9000 监听中...');
});
http.createServer 里的回调函数的执行时机: 当接收到 HTTP 请求的时候,就会执行
4.2 注意事项
-
命令行 ctrl + c 停止服务
-
当服务启动后,更新代码 必须重启服务才能生效
-
响应内容中文乱码的解决办法
jsresponse.setHeader('content-type','text/html;charset=utf-8');
-
端口号被占用
Error: listen EADDRINUSE: address already in use :::9000
1)关闭当前正在运行监听端口的服务 ( 使用较多 )
2)修改其他端口号
-
HTTP 协议默认端口是 80 。HTTPS 协议的默认端口是 443, HTTP 服务开发常用端口有 3000,
8080,8090,9000
五、获取 HTTP 请求报文
想要获取请求的数据,需要通过 request 对象
含义 | 语法 |
---|---|
请求方法 | request.method |
请求版本 | request.httpVersion |
请求路径 | request.url |
URL 路径 | require('url').parse(request.url).pathname |
URL 查询字符串 | require('url').parse(request.url, true).query |
请求头 | request.headers |
请求体 | request.on('data', function(chunk){}) |
请求方法 | request.method request.on('end', function(){}); |
注意事项:
- request.url 只能获取路径以及查询字符串,无法获取 URL 中的域名以及协议的内容
- request.headers 将请求信息转化成一个对象,并将属性名都转化成了『小写』
- 关于路径:如果访问网站的时候,只填写了 IP 地址或者是域名信息,此时请求的路径为『 / 』
- 关于 favicon.ico:这个请求是属于浏览器自动发送的请求
5.1 获取请求报文
js
//1. 导入http模块
const http = require('http');
//2.创建服务对象 create 创建 server 服务
const server = http.createServer((request,response)=>{
//1.获取请求方法
console.log(request.method);
//2.获取http版本
console.log(request.httpVersion);
//3.获取请求路径
console.log(request.url);
//4.获取请求头
console.log(request.headers);
// 响应内容中文乱码的解决办法
response.setHeader('content-type','text/html;charset=utf-8');
response.end("你好啊");
})
//3.监听端口,启动服务
server.listen(8080,()=>{
console.log("服务已经启动");
})
5.2 提取路径和查询字符串
方法一:引入url模块
js
//1. 导入http模块
const http = require('http');
//导入url模块
const url = require('url');
//2.创建服务对象 create 创建 server 服务
const server = http.createServer((request,response)=>{
//解析request.url
// console.log(request.url);
let res = url.parse(request.url,true);
//路径
console.log(res.pathname);
//查询字符串
console.log(res.query.wd);
response.end('url')
})
//3.监听端口,启动服务
server.listen(9000,()=>{
console.log("服务已经启动");
})
方法二:实例化URL对象
js
//1. 导入http模块
const http = require('http');
//2.创建服务对象 create 创建 server 服务
const server = http.createServer((request,response)=>{
//实例化url对象
let url = new URL(request.url,'http://127.0.0.1:9000');
//路径
console.log(url.pathname);
//查询字符串
console.log(url.searchParams.get('wd'));
response.end('url new ')
})
//3.监听端口,启动服务
server.listen(9000,()=>{
console.log("服务已经启动");
})
六、设置 HTTP 响应报文
作用 | 语法 |
---|---|
设置响应状态码 | response.statusCode |
设置响应状态描述 | response.statusMessage ( 用的非常少 ) |
设置响应头信息 | response.setHeader('头名', '头值') |
设置响应体 | response.write('xx') or response.end('xxx') |
js
write 和 end 的两种使用情况:
//1. write 和 end 的结合使用 响应体相对分散
response.write('xx');
response.write('xx');
response.write('xx');
response.end(); //每一个请求,在处理的时候必须要执行 end 方法的
//2. 单独使用 end 方法 响应体相对集中
response.end('xxx');
示例代码:
js
//1.导入http模块
const http = require('http');
//2.创建对象
const server = http.createServer((request,response)=>{
//设置响应状态码
response.statusCode = 203;
//响应状态描述
response.statusMessage = "hello world"
//设置响应头
response.setHeader('content-type','text/html;charset=utf-8');
response.setHeader('test',['a','b','c']);
//设置响应体 ,write可以写多次,end只能出现一次
response.write("write写入");
response.write("write写入");
response.write("write写入");
response.end('end写入')
})
//3.监听端口,开启服务
server.listen(9000,()=>{
console.log("服务已启动")
})
七、MIME设置资源类型
js
//1.导入http模块
const http = require('http');
//引入fs
const fs = require('fs');
//引入path模块
const path = require('path');
//mime类型数组
let mime = {
html: 'text/html',
css: 'text/css',
js: 'text/javascript',
png: 'image/png',
jpg: 'image/jpeg',
gif: 'image/gif',
mp4: 'video/mp4',
mp3: 'audio/mpeg',
json: 'application/json'
}
//2.创建对象
const server = http.createServer((request,response)=>{
let {pathname} = new URL(request.url,'http://127.0.0.1:9000')
//拼接路径
let filepath = __dirname + pathname;
//异步fs读取
fs.readFile(filepath,(err,data)=>{
if(err){
response.end('响应失败');
return;
}
//获取文件后缀
let ext = path.extname(filepath).slice(1);
//获取mime类型
let type = mime[ext];
type?response.setHeader("content-type",type+';charset=utf-8'):
response.setHeader("content-type","application/octet-stream");
response.end(data);
})
})
//3.监听端口,开启服务
server.listen(9000,()=>{
console.log("服务已启动")
})