1、Http2优势

信道复用

分帧传输

Server Push

如下图： 上面是http1，下面是http2

Http2_chrome

 

2、搭建http2

1)配置前端

文件结构

Http2_nginx_02

 

 

server.js



const http = require('http');
const fs = require('fs')

http.createServer(function(request, response){
    console.log('request come', request.url)

    const html = fs.readFileSync("test.html",'utf-8')
    const img = fs.readFileSync("test.jpg");
    if(request.url === '/'){
        response.writeHead(200,{
            'Content-Type':'text/html',
            'Connection':'close',
            'Link': '</test.jpg>; as=image; rel=preload'
        })
        response.end(html)
    }else{
        response.writeHead(200,{
            'Content-Type':'text/html',
            'Connection':'close'
        })
        response.end(img)
    }






}).listen(7080);

console.log('server listening on 7080')


　　

test.html



<html>
    <head>
        <title>Document</title>
    </head>
    <body>

    </body>


</html>


　　

test.jpg是一张图片

 

2）配置nginx

test.conf



server{
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name test.com;
  return 302 https://$server_name$request_uri;
}


server{
  listen 443 http2;
  server_name test.com;
  http2_push_preload on;

  ssl on;
  ssl_certificate_key ../certs/localhost-privkey.pem;
  ssl_certificate ../certs/localhost-cert.pem;

  location / {
  proxy_pass http://127.0.0.1:7080;
    proxy_set_header Host $host;
  }
}


　　

启动nginx，这里nginx需要大于一定的版本才支持http2

Http2_git_03

 

 

3）、访问test.com

Http2_nginx_04

 

 可以看到Protocol为h2，它就是http2. 看上去是一个请求，因为这是一个demo，在本地运行。那如何查看是push呢？

 

4）、如何查看是push？

Chrome打开chrome://net-internals/#http2，

Http2_git_05

 

 可以看到，有一条Pushed。

 

3、http和http2的性能比较


 

4、curl -v -k https://test.com



$  curl -v -k https://test.com
* Rebuilt URL to: https://test.com/
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to test.com (127.0.0.1) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* Cipher selection: ALL:!EXPORT:!EXPORT40:!EXPORT56:!aNULL:!LOW:!RC4:@STRENGTH
* successfully set certificate verify locations:
*   CAfile: C:/Program Files/Git/mingw64/ssl/certs/ca-bundle.crt
  CApath: none
* TLSv1.2 (OUT), TLS header, Certificate Status (22):
} [5 bytes data]
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
} [512 bytes data]
* TLSv1.2 (IN), TLS handshake, Server hello (2):
{ [103 bytes data]
* TLSv1.2 (IN), TLS handshake, Certificate (11):
{ [875 bytes data]
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
{ [333 bytes data]
* TLSv1.2 (IN), TLS handshake, Server finished (14):
{ [4 bytes data]
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
} [70 bytes data]
* TLSv1.2 (OUT), TLS change cipher, Client hello (1):
} [1 bytes data]
* TLSv1.2 (OUT), TLS handshake, Finished (20):
} [16 bytes data]
* TLSv1.2 (IN), TLS change cipher, Client hello (1):
{ [1 bytes data]
* TLSv1.2 (IN), TLS handshake, Finished (20):
{ [16 bytes data]
* SSL connection using TLSv1.2 / ECDHE-RSA-AES256-GCM-SHA384
* ALPN, server accepted to use h2
* Server certificate:
*  subject: C=AU; ST=Some-State; O=Internet Widgits Pty Ltd
*  start date: Jan 28 12:31:03 2020 GMT
*  expire date: Feb 27 12:31:03 2020 GMT
*  issuer: C=AU; ST=Some-State; O=Internet Widgits Pty Ltd
*  SSL certificate verify result: self signed certificate (18), continuing anyway.
* Using HTTP2, server supports multi-use
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
} [5 bytes data]
* Using Stream ID: 1 (easy handle 0xe2f160)
} [5 bytes data]
> GET / HTTP/2
> Host: test.com
> User-Agent: curl/7.60.0
> Accept: */*
>
{ [5 bytes data]
* Connection state changed (MAX_CONCURRENT_STREAMS == 128)!
} [5 bytes data]
< HTTP/2 200
< server: nginx/1.14.2
< date: Wed, 29 Jan 2020 09:04:57 GMT
< content-type: text/html
< link: </test.jpg>; as=image; rel=preload
<
{ [105 bytes data]
100   105    0   105    0     0    353      0 --:--:-- --:--:-- --:--:--   353<html>
    <head>
        <title>Document</title>
    </head>
    <body>

    </body>


</html>
* Connection #0 to host test.com left intact


　　

* ALPN, offering h2
* ALPN, offering http/1.1
说明服务端支持http和http2
* ALPN, server accepted to use h2
说明客户端支持http2，服务端就使用的http2
指定使用http1.1  curl -v -k --http1.1 https://test.com


Http2_nginx_06