http网络编程

http协议基础

所谓网络编程，指的是应用层和传输层。

<table>
<tr>
<td>层级</td>
<td>内容</td>
</tr>
<tr>
<td>应用层</td>
<td rowSpan="3"><应用层>
TELNET,SSH,HTTP,SMTP,POP,SSL/LTS,FTP,MINME,HTML,SNMP,MIB,SIP,RTP </td>
</tr>
<tr>
<td>表示层</td>
</tr>
<tr>
<td>会话</td>
</tr>
<tr>
<td>传输</td>
<td><传输层>
TCP,UDP,UDP-lite,SCTP,DCCP</td>
</tr>
<tr>
<td>网络层</td>
<td><网络层>
ipv4,ipv6,ARP,ICMP,IPsec</td>
</tr>
<tr>
<td>数据链路层</td>
<td rowSpan="2">以太网，wlan ，ppp</td>
</tr>
<tr>
<td>物理层</td>
</tr>
</table>

http全称超文本传输协议（HyperText Transfer Protocol），是当今互联网使用最为广泛的传输协议。

当前主流的版本仍然是http1.1。

常用http状态码

状态码	描述
100	继续相应剩余部分
200	成功处理请求
301	资源永久移动
302	资源临时移动
304	未修改，响应中不包含资源内容
401	未授权，要求身份验证
403	禁止，请求被拒绝
404	资源不存在
500	服务器内部错误
503	服务不可用

常用的请求方法

koa中推荐用户使用REST规范，比如下面四种请求对应了增删改查：

方法	接口地址	描述
post	http://api.test.com/users	增加用户
delete	http://api.test.com/users/:id	删除用户
put	http://api.test.com/users/:id	修改用户
get	http://api.test.com/users/:id	查询用户

http首部字段

执行以下命令行：

  curl -v http://www.baidu.com

[图片上传失败...(image-301af8-1562308370476)]

即可打印出请求到的页面代码。

[图片上传失败...(image-4800c3-1562308370476)]

首部反映的是http传输过程中的重要信息：

字段名	描述
User-Agent	http客户端的信息
Last-Midified	资源最后修改日期
Contnet-Length	实体主体大小，单位为字节
Contnet-Encoding	实体主体适用的编码方式
Content-Type	实体主体的媒体类型，如img/png，application/x-javascript，text/html
Expires	实体主体的过期时间
Set-Cookie	开始状态管理所使用的cookie信息。
Cookie	服务器接收到的cookie
Cache-Control	控制缓存的行为：如public/private/no-cache
ETag	资源匹配信息
Vary	代理服务器的缓存信息
Server	http服务器的缓存信息

http实践

接口请求

星际争霸就是用这个实现的。

写一个api服务器，规定路由和接口：

// api.js
const http=require('http');
const fs=require('fs');

http.createServer((req,res)=>{
    const {method,url}=req;
    if(method=='GET'&&url=='/'){
        fs.readFile('./index.html',(err,data)=>{
            res.setHeader('Contnent-Type','text/html');
            res.end(data);
        })
    }else if(method=='GET'&&url=='/api/users'){
        res.setHeader('Contnet-Type','application/json');
        res.end(JSON.stringify([{
            name:'djtao'
        }]));

    }
}).listen(3000)

对应的静态html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
     <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script><script src=""></script>
    <script>
        (async ()=>{
            const res=await axios.get('api/users');
            console.log(JSON.stringify(res.data))
            document.querySelector('#root').innerHTML=`Response:${JSON.stringify(res.data)}`
        })()
    </script>
    </body>
</html>

那么一个带请求的页面就实现了。

埋点

最简单的请求，无需使用axios库：

var img=new Image();
img.src='/api?name=123'；

这种请求通常用于百度统计。

跨域

浏览器的同源策略：以下三项有任意一个不等，就会引起跨域问题。

协议
端口
域名

现在制造一种不同源的情况,考虑搭建两台服务器：

修改api.js

const http=require('http');
const fs=require('fs');
const app= http.createServer((req,res)=>{
    const {method,url}=req;
    console.log(method,url)
    if(method=='GET'&&url=='/'){
        fs.readFile('./index.html',(err,data)=>{
            res.setHeader('Contnent-Type','text/html');
            res.end(data);
        })
    }else if(method=='GET'&&url=='/api/users'){
        res.setHeader('Contnet-Type','application/json');
        res.end(JSON.stringify([{
            name:'djtao'
        }]));

    }
});
module.exports=app;

新建一个proxy.js，为方便处理，此处调用了express：

const express=require('express');
const app=express();

app.use(express.static(__dirname+'/'));
module.exports=app;

Html内的信息改为：

(async ()=>{
                    axios.defaults.baseURL='http://localhost:4000';
            const res=await axios.get('/api/users');
            console.log(JSON.stringify(res.data))
            document.querySelector('#root').innerHTML=`Response:${JSON.stringify(res.data)}`
        })()

这时访问localhost:4000就触发了协议相同，端口不同的跨域错误。

[图片上传失败...(image-730a08-1562308370476)]

此时network是200，但仍然被浏览器阻拦。

出于安全考虑，浏览器会限制从脚本发起的跨域HTTP请求，像XMLHttpRequest和Fetch都遵循同源策略。
浏览器限制跨域请求一般有两种方式：

浏览器限制发起跨域请求
跨域请求可以正常发起，但是返回的结果被浏览器拦截了

怎么解决呢？

后端设置报头

可以在后端设置请求例外（在这里是http://localhost:3000）：

res.setHeader('Access-Control-Allow-Origin','http://localhost:3000');
        res.setHeader('Contnet-Type','application/json');
        res.end(JSON.stringify([{
            name:'djtao'
        }]));

预检请求(preflight)

作为前端，我想在header中带上token：

const res=await axios.get('/api/users',{
                headers:{'X-Token':'token'}
            });

那么请求又没有结果了。（请求无应答）

[图片上传失败...(image-fdf943-1562308370476)]

如果打印出来。会发现req.method是OPTION.

一般的跨域都是浏览器拦截，那就是说请求已到达服务器，并有可能对数据库里的数据进行了操作，但是返回的结果被浏览器拦截了，那么我们就获取不到返回结果，这是一次失败的请求，但是可能对数据库里的数据产生了影响。

为了防止这种情况的发生，规范要求，对这种可能对服务器数据产生副作用的HTTP请求方法，浏览器必须先使用OPTIONS方法发起一个预检请求，从而获知服务器是否允许该跨域请求：如果允许，就发送带数据的真实请求；如果不允许，则阻止发送带数据的真实请求。

哪些情况需要预检：

首先需要明确，简单请求 不会触发CORS预检请求，“简属于单请求”术语并不属于Fetch(其中定义了CORS)规范。若满足所有下述条件，则该请求可视为“简单请求”：get，head，post。

使用了下面任一 HTTP 方法，都会触发预检：

PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH

或者人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。

我们自定义了一个X-Token,触发了预检请求，所以需要特殊判断：

else if(method=='OPTION'&&url=='/api/users'){
  res.writeHead(200,{
    'Access-Control-Allow-Origin':'http://localhost:3000',
    'Access-Control-Allow-Headers':'X-Token,Contnet-Type',
    'Access-Control-Allow-Methods':'PUT'
  });
  res.end();
}

请求头也带上了：

[图片上传失败...(image-163d09-1562308370476)]

鉴权（携带cookie信息）

// 预检options中和/users接口中均需添加 
res.setHeader('Access-Control-Allow-Credentials', 'true'); 
// get请求中设置cookie
res.setHeader('Set-Cookie', 'cookie1=va222;')
// 观察cookie存在 
console.log('cookie',req.headers.cookie) 
// ajax服务
axios.defaults.withCredentials = true

第二次请求中cookie就打印出来了。

Proxy代理模式

使用代理中间件：http-proxy-middleware

简单说就是把4000的端口反向代理到3000:

// proxy.js
const express=require('express');
const proxy=require('http-proxy-middleware');

const app=express();
app.use(express.static(__dirname+'/'));
app.use('/api',proxy({
  target:'http://localhost:4000',
  changeOrigin:false
}))
module.exports=app;

把axios的请求改为3000端口，就完事了！

bodyparser

现在研究下post，改写index.html，注释掉ajax请求：

<form action="/api/save" method="post">
            <input type="text" name="name">
            <input type="submit" value="save">
        </form>

然后配置api.js:

else if(url=='/api/save'&&method=='POST'){
        let reqData=[];
        let size=0;

        req.on('data',data=>{
            console.log('>>>req on ',data);
            // 接收buffer
            reqData.push(data);
            size+=data.length
        });

        req.on('end',()=>{
            console.log('end');
            const data=Buffer.concat(reqData,size);
            console.log('data',size,data.toString());
            res.end('formdata:'+data.toString())
        })
    }

执行结果为：

[图片上传失败...(image-804818-1562308370476)]

[图片上传失败...(image-d25684-1562308370476)]

吧很多歌buffer字节连接起来。这样就拿到了post请求数据。

这实在是太麻烦了。还记得bodyparser吗？装一个epress版的呗

新建api2.js

const http = require('http');
const fs = require('fs');
const bodyParser = require('body-parser');
const express=require('express');

const app=express();

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

app.post('/api/save',(req,res)=>{
    console.log(req.body.name);
    res.end(req.body.name)
})


module.exports = app;

好了，req.body就可以拿到请求。

上传文件

主要指的是上传文件。

改写上传文件的逻辑：

<input type="file" name="file" id="upload">
<script>
        const file = document.querySelector('#upload');
        file.addEventListener('change', function (e) {
            let _files = this.files;
            const formData=new FormData();
            if (!_files.length) {
                return;
            }
            if (_files.length == 1) {
                formData.append('file',_files[0])
                // 只考虑选择单个文件
                let xhr = new XMLHttpRequest();             
                xhr.open('POST', 'http://localhost:3000/api/upload');
                xhr.send(formData);
            }else{
                                
            }
        })
</script>

后端处理bodyparser只能处理简单的请求，如果上传文件，需要装multer

var path=require('path')
var multer  = require('multer')
var upload = multer()

app.post('/api/upload',upload.single('file'),async (req,res)=>{
    let file=req.file
    console.log(file)
    // 以原文件名写入！
    await fs.writeFile(path.resolve(__dirname,file.originalname), file.buffer, err => {    
        console.log('写入成功');
    })
    res.end('1')
})

应用

爬虫爬取豆瓣电影top250

爬虫是一个很有魅力的话题，它意味着不用什么努力就拿到了别人辛苦付出的的劳动成果。

其原理就是：服务端请求数据，然后爬取页面内容。常用的请求库是request，常用的爬虫工具是cheerio——它可以像jq一样爬取你想要的东西。

npm i cheerio request iconv-lite -S

很多大网站都会反爬虫。但是豆瓣top250的还不错。看完这些电影，应该就不是250了。

下面就将实现这个功能。

访问https://movie.douban.com/top250?start=0&filter=

页面的编码是utf-8.

点击分页器，可知连接请求随着start字段变化。start为0时，请求的是top1-25的电影。

电影内容是所有class=title（每页25个）。cheerio拿到的类选择器可以直接做循环。

当我收集了全部数据后，可存放到本地的data.json中。

// spider.js
const fs = require('fs');
const path = require('path')
const originRequest = require("request");
const cheerio = require("cheerio");
const iconv = require("iconv-lite");

// 封装request
function request(url, callback) {
    const options = {
        url: url,
        encoding: null
    };
    originRequest(url, options, callback);
}

//data作为参数加入到迭代中。
const getData = function (i, data) {
    data = data ? data : [];
    const url = `https://movie.douban.com/top250?start=${i * 25}`;
    request(url, function (err, res, body) {
        const html = iconv.decode(body, "utf-8");
        const $ = cheerio.load(body);
        let dataItem = []
        for (let j = 0; j < $('.item .title:first-of-type').length; j++) {
            dataItem.push({
                title: $('.item .title:first-of-type')[j].children[0].data,
                rank: i * 25 + j + 1
            })
        }
        // 衔接数组
        data.push(...dataItem);
        if (i < 11) {
            return getData(i + 1, data)
        } else {
            console.log('获取数据完成')
            fs.writeFile('data.json', JSON.stringify(data), (err) => {
                if (!err) {
                    console.log('写入成功')
                } else {
                    console.log('写入失败')
                }
            })
        }
    });
}

getData(0)

这里考虑到异步循环，所以使用递归来实现。

执行完毕后，内容就存放到data,json中了。

格式化之后：

[图片上传失败...(image-c68905-1562308370476)]

tcp/ip协议：socket实现——一个即时终端聊天室

net模块提供一个异步api能够创建基于流的tcp服务器，客户端和服务端建立连接之后，服务器可以获得一个双工socket对象，服务器可以保存socket对象列表，在接受某客户端消息时，推送给其他客户端。

// socket.js
const net=require('net');
const chatServer=net.createServer();
const clientList=[];

chatServer.on('connection',client=>{
    client.write('Hi\n');
    clientList.push(client);
    // 当接收到数据时：
    client.on('data',data=>{
        console.log(`receive:${data.toString()}`);
        clientList.forEach(v=>{
            v.write(data);
        })
    })
});
chatServer.listen(9000);

如何测试呢？这里用到telnet：

telnet本来是mac os 10.13之前的内置服务，在高级版本中，需要本地安装一下:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install telnet

安装完成之后：

telnet localhost 9000

打印出'hi'

[图片上传失败...(image-44c73a-1562308370476)]

假设再建立一个客户端：同样也能收到消息。

网络聊天室

http的一个重要弱点在于，只能拉取，不能主动推送。所以后端扯皮时会说：'"你不穿东西给我，我就没东西给你。"这个时候只好做轮询（苦了前端）。

从项目角度说，HTTP协议是非持久化的，单向的网络协议，在建立连接后只允许浏览器向服务器发出请求后，服务器才能返回相应的数据。当需要即时通讯时，通过轮询在特定的时间间隔（如1秒），由浏览器向服务器发送Request请求，然后将最新的数据返回给浏览器。这样的方法最明显的缺点就是需要不断的发送请求，而且通常HTTP request的Header是非常长的，为了传输一个很小的数据需要付出巨大的代价，是很不合算的，占用了很多的宽带

但如果有了socket.io，事情就好办多了。

Socket.io是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5

npm i socket.io -S

在后端基本上不需要做什么处理：

// 服务端:chat-socketio.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
    console.log('a user connected');
    io.emit('chat message', {
        type:'notice',
        time:new Date().toLocaleString(),
        name:'新用户',
        msg:'加入了群聊'
    });


    //响应某用户发送消息
    socket.on('chat message', function (msg) {
        console.log('chat message:' + msg);
        // 广播给所有人
        io.emit('chat message', msg);
        // 广播给除了发送者外所有人
        // socket.broadcast.emit('chat message', msg)
    });
    socket.on('disconnect', function () {
        io.emit('chat message', {
            msg:'用户退出了群聊',
            type:'notice',
            name:'有用户',
            time:new Date().toLocaleString(),
        });
        console.log('user disconnected');
    });
});


http.listen(3000, function () {
    console.log('listening on *:3000');
});

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
            /* blabla */
    </style>
</head>

<body>
    <div id="root">
        <!-- <input type="file" name="file" id="upload"> -->
        <div id="dialog">

        </div>

        <div id="control">
            <input id="username" type="text">
            <textarea id="msg" cols="30" rows="10"></textarea>
            <button id="send">发送</button>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script>
        var dialog = document.querySelector('#dialog');
        var send = document.querySelector('#send');
        var msg = document.querySelector('#msg');
        var socket = io();
        send.addEventListener('click', (e) => {
            socket.emit("chat message", {
                name:document.querySelector('#username').value,
                msg:msg.value,
                time:new Date().toLocaleString(),
                type:'normal'
            });
        })
        socket.on("chat message", function (msg) {
            let html=``;

            switch (msg.type) {
                case 'notice':
                    html=`<div class="notice">
                    ${msg.name} ${msg.msg} <small>${msg.time}</small>
                </div>`;
                    break;
            
                default:
                    html=`<div class="msg-wrap">
                    <div class="name">${msg.name} <small>${msg.time}</small></div>
                    <div class=""msg">${msg.msg}</div>
                </div>`
                    break;
            }
            dialog.innerHTML+=html;
            dialog.scrollTop = dialog.scrollHeight;
        });

    </script>
</body>

</html>

[图片上传失败...(image-1c97b7-1562308370476)]

那么就实现了。