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という機能もあり、その用途はビデオ通話に限らない。

詳しくはこちらの記事で書きました。

ブラウザのリアルタイム通信の変遷