HTTP2特性预览和抓包分析,一分钟预览

一分钟预览 HTTP2 特征和抓包分析

2016/09/26 · JavaScript
· HTTP/2

原文出处: 段隆贤   

背景

日前,http网络请求量日益增加,以下是httparchive统计,从2012-11-01到2016-09-01的呼吁数量和传导大小的大方向图:

亚洲必赢官网 1

眼前超过半数份客户端&服务端架构的应用程序,都是用http/1.1接连的,现代浏览器与单个域最卢萨卡接数,都在4-6个左右,由上图Total
Requests数据,即使不用CDN分流,平均有20个左右的串行请求。
HTTP2
是1999年发表http1.1后的三遍重大的革新,在研商层面革新了上述问题,减少资源占用,来,直接感受一下差别:

HTTP/2 is the future of the Web, and it is
here!
这是 Akamai 集团创制的一个法定的演示,用以注解 HTTP/2 比较于事先的
HTTP/1.1 在性能上的偌大进步。 同时呼吁 379 张图纸,从Load time
的对峙统一可以观望 HTTP/2 在速度上的优势。

亚洲必赢官网 2

正文所有源码和抓包文件在github

http2 协议

HTTP/2 源自 SPDY/2,正式版http2规格标准叫做RFC
7540,宣布于二零一五年十一月15日。

  • RFC 7540 – Hypertext Transfer Protocol Version 2
    (HTTP/2)

  • RFC 7541 – HPACK: Header Compression for
    HTTP/2

  • fex-team翻译的 htt2
    中国和英国文对照.md)

HTTP/2 跟 SPDY 仍有两样的地点,首要是以下两点:

  1. HTTP/2 匡助明文 HTTP 传输,而 SPDY 强制行使 HTTPS

  2. HTTP/2 音信头的压缩算法选择 HPACK,而非 SPDY 选取的 DELEFT

前言

互联网世界中,HTTP协议毕竟使用最常见的商谈。近期Http2.0诞生再度使得互联网技术变成关怀的问题。接下来大家一道看看关于HTTP的那些事。

背景

前不久,http网络请求量日益增进,以下是httparchive统计,从2012-11-01到2016-09-01的请求数量和传导大小的矛头图:

亚洲必赢官网 3

 

近来大多数份客户端&服务端架构的应用程序,都是用http/1.1三番五次的,现代浏览器与单个域最菲尼克斯接数,都在4-6个左右,由上图Total
Requests数据,要是不用CDN分流,平均有20个左右的串行请求。
HTTP2
是1999年揭晓http1.1后的几遍主要的考订,在商议层面改革了以上问题,减少资源占用,来,直接感受一下差距:

HTTP/2 is the future of the Web, and it is
here!
那是 Akamai 集团确立的一个官方的以身作则,用以表明 HTTP/2 相比较于事先的
HTTP/1.1 在性质上的高大提高。 同时请求 379 张图片,从Load time
的对照可以见见 HTTP/2 在速度上的优势。

亚洲必赢官网 4

 

正文所有源码和抓包文件在github

HTTP/2 源自 SPDY/2

SPDY 种类协议由谷歌(谷歌(Google))支付,于 2009 年公开。它的设计目的是下落 50%
的页面加载时间。当下无数盛名的互联网公司都在协调的网站或 APP 中运用了
SPDY 连串协议(当前时尚版本是
SPDY/3.1),因为它对性能的升级是妇孺皆知的。主流的浏览器(谷歌(Google)、火狐、Opera)也都早已经支撑
SPDY,它早已改为了工业标准,HTTP Working-Group 最后决定以 SPDY/2
为底蕴,开发 HTTP/2。HTTP/2标准于二零一五年1十二月以RFC 7540规范公布。

然则,HTTP/2 跟 SPDY 仍有两样的地点,首借使以下两点:

HTTP/2 扶助明文 HTTP 传输,而 SPDY 强制行使 HTTPS
HTTP/2 新闻头的压缩算法选取 HPACK ,而非 SPDY 选择的 DEFLATE(感谢网友
逸风之狐指正)

协和文档请见:rfc7540:HTTP2

http2 特点

http2 性能,http2
demo

  • HTTP/2’s binary framing layer

  • Streams, messages, and frames

  • Request and response multiplexing

  • Stream prioritization

  • One connection per origin

  • Flow control

  • Server push

  • Header compression

(1)二进制

HTTP/2 采用二进制格式传输数据,而非 HTTP/1.x
的文本格式。二进制协议分析起来更快捷。

(2)二进制格式

HTTP/1
的呼吁和响应报文,都是由发轫行、首部和实业正文(可选)组成,各部分之间以文件换行符分隔。

HTTP/2 将呼吁和响应数据分割为更小的帧,并对它们利用二进制编码。

帧(Frame):HTTP/2 数据通讯的纤维单位。

新闻(Message):指 HTTP/2 中逻辑上的 HTTP
信息。例如请求和响应等,音信由一个或多少个帧组成

流(Stream):存在于连接中的一个虚构通道。流可以承接双向音讯,每个流都有一个唯一的整数
ID。

HTTP/2
中,同域名下所有通讯都在单个连接上做到,那几个连续可以承接任意数量的双向数据流。每个数据流都以音信的款型发送,而新闻又由一个或四个帧组成。多少个帧之间可以乱序发送,因为依据帧首部的流标识可以另行组建。

Frame 是 HTTP/2 二进制格式的基础,Frame 的主导格式如下

+-----------------------------------------------+
|                 Length (24)                   |
+---------------+---------------+---------------+
|   Type (8)    |   Flags (8)   |
+-+-------------+---------------+-------------------------------+
|R|                 Stream Identifier (31)                      |
+=+=============================================================+
|                   Frame Payload (0...)                      ...
+---------------------------------------------------------------+

字段含义可查看协议

亚洲必赢官网 5

http2.png

(3)多路复用

HTTP/1.X 存在线端阻塞(head-of-line blocking)的问题。HTTP/1.1
试过用流水线(pipelining)来解决那个题目,
不过功效并不理想(数据量较大如故速度较慢的响应,
会阻碍排在他后边的哀求)。HTTP 管道技术不能大规模利用。

多路复用,代替本来的队列和围堵机制。就是享有的乞求都是由此一个 TCP延续出现已毕。流辅助优先级流量控制

HTTP/2
的多路复用特性,使得能够在一个两次三番上还要打开三个流,双向传输数据。每一遍请求/响应使用区其余Stream ID。通过 Stream ID 标识,所有的呼吁和响应都同时跑在一条 TCP
链接上。
当流并发时,就会涉及到流的优先级和依靠。优先级高的流会被事头阵送。图片请求的先期级要自愧不如
CSS 和
SCRIPT,那么些企划可以确保重点的事物可以被事先加载完。http2上边每个流都拥有自己的公示的流量窗口,它可以限制另一端发送数据。

(4)头压缩

HTTP
1.1伸手的高低变得越来越大,有时甚至会超出TCP窗口的启幕大小,那会严重拖累发送请求的进程。因为它们需求等待带着ACK的响应回来之后,才能继续被发送。

HTTP/2 对信息头选拔 HPACK
(专为http2尾部设计的压缩格式)举行削减传输,可以节省音讯头占用的网络的流量。而
HTTP/1.x 每一次请求,都会带走多量冗余头音讯,浪费了重重带宽资源。

(5)服务端推送

服务端可以在殡葬页面 HTML
时积极推送其他资源,而不用等到浏览器解析到对应岗位,发起呼吁再响应。例如服务端可以积极把
JS 和 CSS 文件推送给客户端,而不必要客户端解析 HTML 再发送这几个请求。

服务端可以主动推送,客户端也有义务挑选收取与否。即使服务端推送的资源已经被浏览器缓存过,浏览器可以通过发送
RST_STREAM 帧来拒收。

HTTP

磋商HTTP难免会提及TCP协议,HTTP是确立在TCP协议之上的,TCP协议作为传输层协议其实离应用层并不远。

TCP协议的特性直接影响了HTTP:

  • TCP建立连接时索要五遍握手1.5个RTT
  • 慢启动(slow start)

眼下,影响网路请求的七个基本点要素:
带宽和延缓。随着网络基础设备建设带宽得到大幅度提高,半数以上是延迟在潜移默化响应速度。
HTTP 1.0 最大题材:

  • 连日不可以复用
  • head-of-line blocking (队头阻塞)

连日来无法复用会导致每回都亟需展开两次握手和慢启动。

head-of-line blocking 则会导致带宽不可能充裕利用,以及继续健康请求阻塞。

HTTP/2 源自 SPDY/2

SPDY 体系协议由谷歌(谷歌)支付,于 2009 年堂而皇之。它的安插目标是下跌 50%
的页面加载时间。当下无数老牌的互联网公司都在融洽的网站或 APP 中选取了
SPDY 序列协议(当前风行版本是
SPDY/3.1),因为它对性能的升官是醒目的。主流的浏览器(谷歌(谷歌(Google))、火狐、Opera)也都早已经扶助SPDY,它早已改为了工业标准,HTTP Working-Group 末了决定以 SPDY/2
为根基,开发 HTTP/2。HTTP/2标准于二〇一五年5月以RFC 7540正经刊出。

而是,HTTP/2 跟 SPDY 仍有例外的地点,重倘若以下两点:

HTTP2特性预览和抓包分析,一分钟预览。HTTP/2 匡助明文 HTTP 传输,而 SPDY 强制行使 HTTPS
HTTP/2 新闻头的压缩算法采取 HPACK ,而非 SPDY 选拔的 DEFLATE(感谢网友
逸风之狐指正)

协商文档请见:rfc7540:HTTP2

HTTP2特性概览

浏览器和web服务支撑情形

http2
接济清单

解决连接无法复用问题

在HTTP
1.0说道里设置Connection: Keep-Alive。可以在自然时间内复用连接。对于PC端浏览器来说意义显著,对移动APP来说成效不大。

方案一: 依照TCP的长链接

按照TCP协议,使用TCP的Socket编程技术。 成熟方案如:谷歌的protobuf。
症结:已毕难度大,须求团结制定协商。
稍加:音讯的申报和推送变及时,减轻服务器压力。

方案二: http long-polling

客户端在上马状态就会发送一个polling请求到服务器,服务器并不会应声回到工作数据,而是等待有新的事务数据爆发的时候再回到。
难度:链接增多会大增服务器压力,移动网络不稳定要求考虑重建链接,稳定性不佳,需求工作数据过期机制。

方案三: http streaming

同long-polling分化的是,server并不会为止初叶的streaming请求,而是不断的经过这一个通道重返最新的工作数据。

方案四:web socket

可取:双向的数据通道,提供了http所缺乏的长连接功效。
缺陷:较新,半数以上浏览器不协助。

HTTP2特性概览

1. 二进制协议

HTTP/2 拔取二进制格式传输数据,而非 HTTP/1.x 的文本格式

亚洲必赢官网 6

由上图能够观望HTTP2在本来的应用层和HTTP层添加了一层二进制传输。

二进制协议的一个利益是,可以定义额外的帧。

HTTP/2
定义了近十种帧(详情可分析抓包文件),为未来的高档应用打好了根基。若是应用文本完毕那种效果,解析数据将会变得要命劳苦,二进制解析则有利于得多。
RFC7540:Frame
Definitions
亚洲必赢官网 7
商事中定义的帧

设置配备

从 Nginx 1.9.5 开始,http_v2_module 已经替换了
ngx_http_spdy_module,安装版本用1.10.1

nginx

./configure --with-http_v2_module

mac

brew options nginx
brew install nginx --with-http2

head-of-line blocking

http pipelining
症结:只适用于http1.1,绝一大半http代理服务器不支持等

1. 二进制协议

HTTP/2 接纳二进制格式传输数据,而非 HTTP/1.x 的文本格式

亚洲必赢官网 8

 

由上图可以见见HTTP2在原先的应用层和HTTP层添加了一层二进制传输。

二进制协议的一个功利是,能够定义额外的帧。

HTTP/2
定义了近十种帧(详情可分析抓包文件),为未来的高等应用打好了基础。假如采纳文本完毕那种作用,解析数据将会变得很是麻烦,二进制解析则有利于得多。
RFC7540:Frame Definitions

亚洲必赢官网 9

商讨中定义的帧

2. 多路复用

HTTP/2
复用TCP连接,在一个延续里,客户端和浏览器都可以同时发送多少个请求或应对,而且并非根据顺序依次对应,那样就幸免了”队头堵塞”(见TCP/IP详解卷一)。
各种 Frame Header 都有一个 Stream ID
就是被用来落实该特性。每便请求/响应使用不一样的 Stream ID。就好像同一个 TCP
链接上的数目包通过 IP: PORT 来分别出多少包去往哪个地方一样。
亚洲必赢官网 10

rfc7540: HTTP2
Multiplexing中对Multiplexing的说明

Streams and Multiplexing

   A "stream" is an independent, bidirectional sequence of frames
   exchanged between the client and server within an HTTP/2 connection.
   Streams have several important characteristics:

   o  A single HTTP/2 connection can contain multiple concurrently open
      streams, with either endpoint interleaving frames from multiple
      streams.

   o  Streams can be established and used unilaterally or shared by
      either the client or server.

   o  Streams can be closed by either endpoint.

   o  The order in which frames are sent on a stream is significant.
      Recipients process frames in the order they are received.  In
      particular, the order of HEADERS and DATA frames is semantically
      significant.

   o  Streams are identified by an integer.  Stream identifiers are
      assigned to streams by the endpoint initiating the stream.

配置https

HTTP/2 共商本身并不曾要求必须按照 TLS 计划,然而 Chrome 和 Firefox
均代表只支持 HTTP/2 Over
TLS。一方面更安全,希望保养以及偏重用户的隐衷,一方面采用 TLS
的加密机制得以更好地穿透网络中间节点。需求先配备https。

# 创建一个私钥文件:

openssl genrsa -des3 -out server.key 1024

openssl req -new -key server.key -out server.csr

openssl rsa -in server.key -out server_nopass.key

# 结合密钥和证书生成请求,创建一个自签署的CA证书

openssl req -new -x509 -days 3650 -key server_nopass.key -out server.crt

配置nginx

server
{
    listen 443 ssl http2;
    server_name  www.kailian.com;
    index index.php index.html;
    root  /data/web/www;
    ssl on;
    ssl_certificate /usr/local/etc/nginx/server.crt;
    ssl_certificate_key /usr/local/etc/nginx/server_nopass.key;
    ssl_prefer_server_ciphers on;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !RC4";
    keepalive_timeout 70;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m; 

    charset utf-8;
    location ~ .*\.php$
    {
        include fastcgi.conf;
        fastcgi_pass  127.0.0.1:9000;
        fastcgi_index index.php;
    }

}

其他技术

  • Spriting (图片合并)
  • Inlining (内容内嵌)
  • Concatenation (文件合并)
  • Domain Sharding (域名分片)

2. 多路复用

HTTP/2
复用TCP连接,在一个老是里,客户端和浏览器都可以而且发送多个请求或应对,而且不要依照顺序依次对应,那样就防止了”队头堵塞”(见TCP/IP详解卷一)。
种种 Frame Header 都有一个 Stream ID
就是被用来落到实处该特性。每一趟请求/响应使用分化的 Stream ID。就好像同一个 TCP
链接上的数码包通过 IP: PORT 来分别出多少包去往哪儿一样。

亚洲必赢官网 11

rfc7540: HTTP2
Multiplexing中对Multiplexing的说明

Streams and Multiplexing A “stream” is an independent, bidirectional
sequence of frames exchanged between the client and server within an
HTTP/2 connection. Streams have several important characteristics: o A
single HTTP/2 connection can contain multiple concurrently open streams,
with either endpoint interleaving frames from multiple streams. o
Streams can be established and used unilaterally or shared by either the
client or server. o Streams can be closed by either endpoint. o The
order in which frames are sent on a stream is significant. Recipients
process frames in the order they are received. In particular, the order
of HEADERS and DATA frames is semantically significant. o Streams are
identified by an integer. Stream identifiers are assigned to streams by
the endpoint initiating the stream.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Streams and Multiplexing
 
   A "stream" is an independent, bidirectional sequence of frames
   exchanged between the client and server within an HTTP/2 connection.
   Streams have several important characteristics:
 
   o  A single HTTP/2 connection can contain multiple concurrently open
      streams, with either endpoint interleaving frames from multiple
      streams.
 
   o  Streams can be established and used unilaterally or shared by
      either the client or server.
 
   o  Streams can be closed by either endpoint.
 
   o  The order in which frames are sent on a stream is significant.
      Recipients process frames in the order they are received.  In
      particular, the order of HEADERS and DATA frames is semantically
      significant.
 
   o  Streams are identified by an integer.  Stream identifiers are
      assigned to streams by the endpoint initiating the stream.

3. 数据流

多少流发送到一半的时候,客户端和服务器都得以发送信号(RST_STREAM帧),裁撤以此数据流。1.1版废除数据流的唯一方法,就是倒闭TCP连接。这就是说,HTTP/2
可以废除某三回呼吁,同时保险TCP连接还开辟着,可以被此外请求使用。

测试

chrome插件

ssllabs查看https配置是或不是够快

在 Chrome 地址栏输入chrome://net-internals/#http2,打开 Chrome 自带的
HTTP/2 查看工具,可查看 HTTP/2 帧音讯

Wireshark抓包查看

SPDY

为了化解http1.0和1.1设有的问题,谷歌(Google)在二〇一二年提出了SPDY方案。

目标:

  • 下落延迟,客户单的单链接单请求,server的FIFO响应队列都是延迟的大洋。
  • http 最初是客户端发请求,服务器响应,服务器不能主动push内容。
  • 压缩http header。

SPDY设计:

置身HTTP之下,TCP和SSL之上,兼容老版本,还足以应用已有些SSL功能。SPDY分为根基效率和高档功用,基础意义默许开启,高级效率手动开启。

3. 数据流

多少流发送到一半的时候,客户端和服务器都得以发送信号(RST_STREAM帧),撤除以此数据流。1.1版撤除数据流的绝无仅有格局,就是倒闭TCP连接。那就是说,HTTP/2
可以打消某一遍呼吁,同时确保TCP连接还开辟着,可以被其余请求使用。

4. 头音讯压缩:

HTTP/2 对新闻头接纳
HPACK
进行削减传输,可以节省新闻头占用的网络的流量。而 HTTP/1.x
每一次请求,都会带走大批量冗余头音信,浪费了很多带宽资源。
HTTP2对http头建立索引表,相同的头只发送hash
table 的index, 同时还用了霍夫曼编码和观念的gzip压缩。

连带资料

  • http2
    讲解

  • http2 home

  • http2
    专题

  • 【协议分析】HTTP2优势分析

基本功成效

  • 多路复用(multiplexing)。多路复用通过多少个请求stream共享一个tcp连接的措施。解决了队头阻塞,下降了推迟升高带宽利用率。
  • 恳请优先级(request
    prioritization)。在多路复用的时候会冒出首要请求被卡住。SPDY
    允许每便request设置优先级。
  • header压缩。压缩率达到80%之上。

4. 头音信压缩:

HTTP/2 对信息头选择
HPACK
举办压缩传输,可以节约信息头占用的网络的流量。而 HTTP/1.x
每便请求,都会引导多量冗余头音信,浪费了许多带宽资源。
亚洲必赢官网 ,HTTP2对http头建立索引表,相同的头只发送hash
table 的index, 同时还用了霍夫曼编码和观念的gzip压缩。

5. 服务器推送

服务端可以更快的把资源推送给客户端。例如服务端能够积极把 JS 和 CSS
文件推送给客户端,而不需求客户端解析 HTML
再发送那一个请求。当客户端须求的时候,它早已在客户端了。

那就是说存在一个题材,借使客户端设置了缓存如何是好。有三种办法(来自社区)

  • 客户端可以由此安装SETTINGS_ENABLE_PUSH为0值布告服务器端禁用推送
  • 察觉缓存后,客户端和服务器都足以发送信号(RST_STREAM帧),撤除以此数据流。
  • cache-digest(提案)

    rfc7540: HTTP2 Server
    Push

    #### 6. 流优先级

    HTTP2允许浏览器指定资源的事先级。

    rfc7540: Stream
    Priority

尖端作用

  • server推送(server push) 。开启server push
    之后,服务器通过X-Associated-Content header告知客户端有新内容推送过来。
  • server暗示(server hint) 。不推送,只提示有新情节。

5. 服务器推送

服务端可以更快的把资源推送给客户端。例如服务端能够积极把 JS 和 CSS
文件推送给客户端,而不需求客户端解析 HTML
再发送这一个请求。当客户端必要的时候,它曾经在客户端了。

那么存在一个问题,即使客户端设置了缓存如何做。有三种方法(来自社区)

  • 客户端可以由此设置SETTINGS_ENABLE_PUSH为0值布告服务器端禁用推送
  • 意识缓存后,客户端和服务器都足以发送信号(RST_STREAM帧),撤消这一个数据流。
  • cache-digest(提案)

    rfc7540: HTTP2 Server
    Push

    #### 6. 流优先级

    HTTP2允许浏览器指定资源的预先级。

    rfc7540: Stream
    Priority

浏览器协理

亚洲必赢官网 12

主流浏览器都只扶助 HTTP/2 Over TLS

HTTP 2.0

SPDY的诞生和显示表达了两件事:

  • 一是水土保持互联网设备基础和http协议广泛使用的前提下,可以经过改动协议层来优化http1.x。
  • 本着http1.x的修改业界反馈很好

亮点: 多路复用,请求压缩,优先级控制,server push等优点。

浏览器帮助

主流浏览器都只支持 HTTP/2 Over TLS

node中启用http2

node中得以用spdy模块来启动应用,spdy的api,与https是同一的且主流浏览器只协助HTTP/2
Over TLS,必要配置 私钥和证书,本地自签定服务器配置可参照引用6,7

const express = require('express');
const fs =  require('fs');
const http2 = require('spdy');
const path = require('path');
const options = {
    key: fs.readFileSync('./keys/privatekey.pem'),
    cert: fs.readFileSync('./keys/certificate.pem')
};
const app = new express();
http2
  .createServer(options, app)
  .listen(8080, ()=>{
    console.log(`Server is listening on https://localhost:8080.
     You can open the URL in the browser.`)
  }
)
app.use("/",(req,res)=>{

  res.send("hello http2!");
})

如上,对于已存在的品类只要修改几行代码就足以应用http2.0了。

请求头和响应头:
亚洲必赢官网 13

证实:新版的Chrome,对不安全的证件(如本地的自签约服务)会降级到http1.1,firefox不会出现此题材。

启动server push

app.get("/",(req,res)=>{
    var stream = res.push('/app.js', {   //服务器推送
    status: 200, // optional
    method: 'GET', // optional
    request: {
      accept: '*/*'
    },
    response: {
      'content-type': 'application/javascript'
    }
  })
  stream.on('error', function() {
  })
  stream.end('console.log("http2 push stream, by Lucien ");')

  res.send(`hello http2!
    <script src="/app.js"></script>`);//express 并没有host static ,这个app.js 来自push 
})

源码在github

响应

亚洲必赢官网 14

亚洲必赢官网 15

HTTP2.0敬重改动

  1. 新的二进制格式
    http1.x落地的时候使用公开协议,三片段组成:start line, header,
    body。协议分析,基于文本的,基于文本的磋商分析存在缺陷,须要考虑的气象很多。

    http2.0
    选取二进制格式,完成方便且健壮。http2.0的格式定义更如同tcp层的办法。

    • length:定义了百分之百frame的始发到停止。
    • type:定义frame的类型(一共10种)
    • flags: 用bit位定义一些重中之重的参数
    • stream ID 用作流控制
    • payload: request的正文
  2. 连天共享(多路复用)

    应用方面提到的Stream
    id用来作连接共享机制的。一个request对应一个stream并分配一个id,接收方可以依据id区分frame归属哪个分歧的frame。可以调整优先级,并且可以动态调整。

  3. header压缩

  4. 重置连接表现更好

  5. Server Push

    http2.0能透过push格局将客户端须求的始末预先推送出去,所以也叫“cache
    push”.

  6. 流量控制(Flow control)

  7. 更安全的SSL

node中启用http2

node中得以用spdy模块来启动应用,spdy的api,与https是如出一辙的且主流浏览器只襄助HTTP/2
Over TLS,须要布署 私钥和证书,本地自签署服务器配置可参照引用6,7

JavaScript

const express = require(‘express’); const fs = require(‘fs’); const
http2 = require(‘spdy’); const path = require(‘path’); const options = {
key: fs.readFileSync(‘./keys/privatekey.pem’), cert:
fs.readFileSync(‘./keys/certificate.pem’) }; const app = new express();
http2 .createServer(options, app) .listen(8080, ()=>{
console.log(`Server is listening on . You can
open the URL in the browser.`) } ) app.use(“/”,(req,res)=>{
res.send(“hello http2!”); })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const express = require(‘express’);
const fs =  require(‘fs’);
const http2 = require(‘spdy’);
const path = require(‘path’);
const options = {
    key: fs.readFileSync(‘./keys/privatekey.pem’),
    cert: fs.readFileSync(‘./keys/certificate.pem’)
};
const app = new express();
http2
  .createServer(options, app)
  .listen(8080, ()=>{
    console.log(`Server is listening on https://localhost:8080.
     You can open the URL in the browser.`)
  }
)
app.use("/",(req,res)=>{
    
  res.send("hello http2!");
})

如上,对于已存在的门类只要修改几行代码就足以应用http2.0了。

请求头和响应头:

声明:新版的Chrome,对不安全的讲明(如本地的自签定服务)会降级到http1.1,firefox不会出现此问题。

启动server push

JavaScript

app.get(“/”,(req,res)=>{ var stream = res.push(‘/app.js’, {
//服务器推送 status: 200, // optional method: ‘GET’, // optional
request: { accept: ‘*/*’ }, response: { ‘content-type’:
‘application/javascript’ } }) stream.on(‘error’, function() { })
stream.end(‘console.log(“http2 push stream, by Lucien “);’)
res.send(`hello http2! <script
src=”/app.js”></script>`);//express 并没有host static
,这个app.js 来自push })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
app.get("/",(req,res)=>{
    var stream = res.push(‘/app.js’, {   //服务器推送
    status: 200, // optional
    method: ‘GET’, // optional
    request: {
      accept: ‘*/*’
    },
    response: {
      ‘content-type’: ‘application/javascript’
    }
  })
  stream.on(‘error’, function() {
  })
  stream.end(‘console.log("http2 push stream, by Lucien ");’)
 
  res.send(`hello http2!
    <script src="/app.js"></script>`);//express 并没有host static ,这个app.js 来自push
})

源码在github

响应

抓包分析

可以用chrome
内部自带的工具(chrome://net-internals/)查看http2流量,但以此包音信量相比较少,结构不如我们熟知的Fiddler%E6%9F%A5%E7%9C%8Bhttp2%E6%B5%81%E9%87%8F,%E4%BD%86%E8%BF%99%E4%B8%AA%E5%8C%85%E4%BF%A1%E6%81%AF%E9%87%8F%E6%AF%94%E8%BE%83%E5%B0%91%EF%BC%8C%E7%BB%93%E6%9E%84%E4%B8%8D%E5%A6%82%E6%88%91%E4%BB%AC%E7%86%9F%E6%82%89%E7%9A%84Fiddler)
or Wireshark清晰。

Fiddler是一贯作为中间代理,可以当做客户端间接与服务端通讯,可以像浏览器那样直接解密https,直接看到https报文,
不过由于受限于.NET
Framework暂不接济Http2.

用wireshark直接抓包 https:443端口的流量是这样的:
亚洲必赢官网 16

多少被加密了,协议细节完全看不到。
这里介绍了一种艺术得到私钥解包。
抓包https包时要把代理关了,不然私钥不是同一个,wireshark不可能解包(被那么些坑了两时辰T
T)。

亚洲必赢官网 17

亚洲必赢官网 18

一个包内有五个不等的Steam ID

亚洲必赢官网 19

追踪解密后TCP流能够看来,由于多路复用,各种区其他伸手交替传输不一样的帧,所以流数据是乱的。但在相同帧内数据照旧如常的。

挪动端的HTTP现状

抓包分析

可以用chrome
内部自带的工具(chrome://net-internals/)查看http2流量,但以此包音信量相比较少,结构不如大家熟稔的Fiddler%E6%9F%A5%E7%9C%8Bhttp2%E6%B5%81%E9%87%8F,%E4%BD%86%E8%BF%99%E4%B8%AA%E5%8C%85%E4%BF%A1%E6%81%AF%E9%87%8F%E6%AF%94%E8%BE%83%E5%B0%91%EF%BC%8C%E7%BB%93%E6%9E%84%E4%B8%8D%E5%A6%82%E6%88%91%E4%BB%AC%E7%86%9F%E6%82%89%E7%9A%84Fiddler)
or Wireshark清晰。

Fiddler是直接当做中间代理,能够视作客户端间接与服务端通信,可以像浏览器那样直接解密https,直接观望https报文,
不过出于受限于.NET
Framework暂不协理Http2.

用wireshark间接抓包 https:443端口的流量是那般的:

数量被加密了,协议细节完全看不到。
这里介绍了一种形式赢得私钥解包。
抓包https包时要把代理关了,不然私钥不是同一个,wireshark不可能解包(被这些坑了两小时T
T)。

一个包内有多少个不等的Steam ID

追踪解密后TCP流可以看出,由于多路复用,各类差其余伸手交替传输区其余帧,所以流数据是乱的。但在平等帧内数据或者正常的。

最后

最后,HTTP2有更高的传输速度,更少的资源占用,可以去除种种性能优化tricks(如css
sprite,inline-image.)
转载WEB开发的美好往后T.T

iOS下http现状

iOS系统从iOS8始发通过NSURLSession来支撑SPDY,在iOS9+开始扶助HTTP2.0.新本子的ATS默许协助https进行网络传输。

最后

最后,HTTP2有更高的传输速度,更少的资源占用,可以去除各个性能优化tricks(如css
sprite,inline-image.)
转载WEB开发的美好未来T.T

参考资料

  1. Turn-on HTTP/2 today!
  2. Hypertext Transfer Protocol Version 2
    (HTTP/2)
  3. npm spdy
  4. npm spdy push
  5. How to create a self-signed SSL
    Certificate
  6. HPACK: Header Compression for
    HTTP/2
  7. 用Node.js创制自签署的HTTPS服务器

Android下HTTP现状

http2.0只好在新系统中辅助,SPDY作为过渡方案存在。

参考资料

  1. Turn-on HTTP/2 today!
  2. Hypertext Transfer Protocol Version 2
    (HTTP/2)
  3. npm spdy
  4. npm spdy push
  5. How to create a self-signed SSL
    Certificate
  6. HPACK: Header Compression for
    HTTP/2
  7. 用Node.js成立自签署的HTTPS服务器

    1 赞 收藏
    评论

亚洲必赢官网 20

结束

HTTP1.x到SPDY,再到HTTP2.0的局地重大变化技术点。

网站地图xml地图