リアルタイム通信の未来：WebSockets、Server-Sent Events、そしてWebTransport

2024-04-02

WebSocketsとServer-Sent Events/EventSource：リアルタイム通信の2つの巨人

通信方向：双方向 vs 一方向

WebSockets: 双方向通信が可能。サーバーとクライアント間で自由にデータを送受信できます。
SSE/EventSource: 一方向通信のみ。サーバーからクライアントへのみデータを送信できます。

複雑性：複雑 vs シンプル

WebSockets: より複雑な技術。専用のAPIを使用し、サーバー側もWebSocket対応が必要です。
SSE/EventSource: 比較的シンプルな技術。HTML5標準のEventSource APIを使用できます。

ユースケース：双方向通信 vs 更新通知

WebSockets: チャット、オンラインゲーム、リアルタイム編集など、双方向通信が必要なアプリケーションに最適です。
SSE/EventSource: ニュースフィード、株価情報、ソーシャルメディアの更新通知など、サーバーからクライアントへの更新通知に最適です。

接続数：多数 vs 少数

WebSockets: ブラウザごとに接続できる数に制限がある場合があります。
SSE/EventSource: ブラウザごとの接続数制限は比較的緩いです。

ブラウザサポート：広く対応 vs 一部対応

WebSockets: 主要なブラウザで広くサポートされています。
SSE/EventSource: 一部の古いブラウザではサポートされていません。

要素	WebSockets	SSE/EventSource
通信方向	双方向	一方向
複雑性	複雑	シンプル
ユースケース	双方向通信	更新通知
接続数	制限あり	制限少なめ
ブラウザサポート	広く対応	一部未対応

上記の表を参考に、ご自身のアプリケーションの要件に合わせて最適な技術を選びましょう。

WebSockets

import asyncio
import websockets

async def handler(websocket, path):
    while True:
        message = await websocket.recv()
        await websocket.send(message)

async def main():
    async with websockets.serve(handler, "localhost", 8765):
        await asyncio.Future()  # run forever

asyncio.run(main())

クライアント側 (JavaScript)

const socket = new WebSocket("ws://localhost:8765");

socket.onopen = function() {
    console.log("WebSocket connection opened");
};

socket.onmessage = function(event) {
    console.log("Received message: " + event.data);
};

socket.onclose = function() {
    console.log("WebSocket connection closed");
};

socket.send("Hello from the client!");

Server-Sent Events

サーバー側 (Python)

import time

from flask import Flask, render_template, Response

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/events")
def events():
    def generate():
        for i in range(10):
            time.sleep(1)
            yield "event: message {}\n\n".format(i)

    return Response(generate(), mimetype="text/event-stream")

if __name__ == "__main__":
    app.run()

クライアント側 (HTML)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>SSE Example</title>
</head>
<body>
    <script>
        const eventSource = new EventSource("/events");

        eventSource.onmessage = function(event) {
            console.log("Received message: " + event.data);
        };
    </script>
</body>
</html>