HTTP/1.1（1997年）
ロングポーリング
クライアントがサーバーにリクエストを送信し、serverはデータが利用可能になった時点で応答する方式。
クライアントはサーバーからの応答を受け取ったら、すぐに新しいリクエストを送信することで、双方向通信を実現する。
function longPolling() {
fetch('サーバーのエンドポイント').then(response => {
return response.json();
}).then(data => {
console.log(data);
longPolling();
})
}
longPolling(); // 最初のリクエストを開始
この方式はリクエストのたびに、毎回TCP接続を確立するためオーバーヘッドが大きい。
HTTP/2（2015年）
SPDY
HTTP/2の前身となったSPDYプロトコルは、Googleによって開発された実験的なプロトコルで、Webページのロード時間を短縮することを目的としていた。
もともとSPDYはHTTPの代替ではなく、HTTPの上で動作するアプリケーション層のプロトコルであり、HTTPを改善することで、パフォーマンスの向上を図っていた。
SPDYの主な機能
- ストリームの多重化: 単一のTCP接続上で複数のリクエストとレスポンスを同時に送受信する
- 優先順位付け: リクエストに優先順位をつけ、重要なリソースのロードを優先する
- ヘッダー圧縮: HTTPヘッダーの冗長性を減らし、データの送信量を削減する
HTTP/2はSPDYの技術をベースにして設計されていた。HTTP/2が標準化された後、SPDYは徐々に廃れていった。
現在、主流のWebブラウザやサーバーはHTTP/2をサポートしており、SPDYは過去の技術となりましたが、そのアイデアと技術はHTTP/2の形で生き続けています。
ストリームの多重化
HTTP/2が導入した主な機能の一つに「ストリームの多重化」がある。これは単一のTCP接続上で複数のリクエストとレスポンスが同時に、かつ非同期に行うことができる。
これは、HTTP/1.1におけるロングポーリングの主な課題の一つであった、同時接続数の制限とヘッド・オブ・ライン・ブロッキング（HOLB）を解決することになった。
Server Sent Events（2006年）
Server Sent Events (SSE) は、サーバーからクライアントへのリアルタイムデータのプッシュをするためのAP
SSEはHTML5標準の一部として設計された。サーバー側では新しい情報が利用可能になった際に、クライアントに対して即座にデータを送信することができる。
var eventSource = new EventSource('サーバーのエンドポイント');
eventSource.onmessage = function(event) {
console.log('New message from server:', event.data);
};
WebSockets（2011年）
WebSocketsは、クライアントとサーバー間で双方向通信を行うためのプロトコルです。Socketという名前が示すように、WebSocketsはTCP/IPソケットの通信をブラウザ上で実現することができます。
WebSocketは2024年現在、さまざまなアプリケーションで使用されています。しかしその下位レイヤではTCP/IPを使用しているため、映像や音声などをリアルタイムに配信する場合は、次に述べるWebRTCがより適しています。
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Test</title>
</head>
<body>
<script>
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('Connected to the server');
ws.send('Hello! Message From Client!!');
};
ws.onmessage = function(e) {
console.log('Received message from server: ' + e.data);
};
ws.onerror = function(error) {
console.log('WebSocket Error: ' + error);
};
</script>
</body>
</html>
WebRTC (2011年～)
リアルタイム通信に特化したプロトコルで、Web上でUDPを使うことができる唯一の手段であり、主にブラウザ上で使われている。Google MeetやZoomなどのビデオ会議システムの内部ではWebRTCが使われている。
もともと映像/音声通信のために生まれたプロトコルだが、データ通信のためのDataChannelという機能もあり、その用途はビデオ通話に限らない。
詳しくはこちらの記事で書きました。