web-dev-qa-db-ja.com

ブラウザにHTTP / 2ストリーム接続を実装する方法は？

現在、HTTP/2はそのパフォーマンスに関して上昇しています。

Node.jsの最新バージョンはHTTP/2を非常によくサポートしています。

https://nodejs.org/api/http2.html

しかし、ブラウザ環境でHTTP/2クライアントを実装する方法がわかりません。

https://nodejs.org/api/http2.html#http2_client_side_example

上記のリンクは、Node.jsクライアントでの使用方法を示しています。

同じクライアントをブラウザに実装するにはどうすればよいですか？

javascriptnode.jshttp2
7
Valeri

現在、これを行うことはできません。一般に、HTTP/2はWebページとWebアプリケーションに対して透過的に使用する必要があるため、低レベルのHTTP/2ストリームと接続の詳細を実装する必要はありません。これが実装方法の美しさの一部です。ブラウザがすべてを処理し、WebページとWebアプリケーションはHTTP/1.1とHTTP/2のどちらが使用されたかを知る必要がありません。

これに対する可能な例外は、HTTP/2プッシュであり、Webハイパーテキストアプリケーションテクノロジーワーキンググループ（WHATWG）の一部としてプログラムでHTTP/2プッシュを公開するという提案がありました： https://github.com/ whatwg/fetch/issues/51 。その上での活動は完全に落ちたようですが。プッシュ通知APIの実装にはいくつかの複雑な問題があるためです。結局のところ HTTP/2プッシュは複雑で、特にブラウザの実装やバグが異なるため なので、プッシュメッセージをWebアプリケーションに公開しようとすると、複雑になります。また、HTTP/2プッシュの使用が制限されていると感じている人も多く、 リソースヒント （HTTPリソースを要求する場合）またはWebソケット（双方向通信の場合）など、ほとんどのユースケースに適したテクノロジーがあります。 Chromeは完全にオフにする実験も行っています 。

プッシュ以外の優先順位付けは、低レベルのHTTP/2の詳細をWebアプリケーションに公開するためのもう1つの使用例である可能性があり、おそらく priority hints は、HTTP/2に関連付けることなく最終的にそのマッピングを提供します（したがって、 HTTP/1.1、QUICなど、将来的には何でも使用できます）。

だから私は、TCPを作成する簡単な方法（AFAIK）がないのと同じ方法で、WebアプリケーションからのHTTP/2接続の作成または管理を許可する差し迫った必要性を見たことがありません。またはJavaScriptからのUDP接続。それは事実ですが、そのような実装を作成するための多くの努力が見られるとは思いません。リンク先のHTTP/2クライアントも非常に基本的で、HTTPリクエストを作成するだけです。これは、ブラウザーが既に許可しているものです（ただし、ブラウザーが実行していないときに、これよりも低いレベルにしたい場合は、ノードが詳細を公開することを理解しています。 ）。ほとんどの場合、HTTP/2ストリームの処理とプロトコルの他の低レベルの詳細は、ブラウザー自体が透過的に処理するのが最善です。

5
Barry Pollard

クライアント側：

ブラウザで何もする必要はありません。すでにHTTP 2.0プロトコルをサポートしているものを使用してください https://caniuse.com/#search=http2

サーバー側：

使用しているサーバーによって異なりますが、いくつかのモジュールをアクティブ化し、いくつかのファイルを構成する必要があります。ここで、サーバー構成へのリンクを確認できます。 https://github.com/http2/http2-spec/wiki/Implementations

Server Push機能について：

同じですが、サーバーによって異なりますが、次の構成が可能であることに注意してください。手動プッシュまたは自動プッシュ（自動プッシュ）

例：

手動プッシュ

server {    
    # whenever a client requests demo.html, also Push
    # /style.css, /image1.jpg and /image2.jpg
    location = /demo.html {
        http2_Push /style.css;
        http2_Push /image1.jpg;
        http2_Push /image2.jpg;
    }
}

自動プッシュ

server { 
    # Intercept Link header and initiate requested Pushes
    location = /myapp {
        proxy_pass http://upstream;
        http2_Push_preload on;
    }
}

//httpd.conf or .htaccess (cuando se cargue un html)
<FilesMatch "\.html$">
    Header set Link "</css/styles.css>; rel=preload; as=style"
<FilesMatch>
1
Juanma Menendez