WebSocketとSSEの比較

WebSocketとServer-Sent Events (SSE)の比較

WebSocketと**Server-Sent Events (SSE)**は、サーバーからクライアントへのリアルタイム通信を実現するための技術です。両者にはそれぞれ特徴があり、使い分けが重要です。

WebSocket

• 複雑な実装
  WebSocketの仕様は複雑で、実装が難しい場合がある。
• 接続の永続性
  サーバーとクライアントの間で持続的な接続が確立されるため、複数のメッセージを送受信できる。
• 低オーバーヘッド
  HTTPプロトコルの上に構築されているため、HTTPのオーバーヘッドが少なく効率的。
• 双方向通信
  サーバーとクライアントの間で双方向の通信が可能。

Server-Sent Events (SSE)

• 制限された機能
  SSEは単方向通信のみサポートするため、複雑なリアルタイム通信には適さない場合がある。
• シンプルで軽量
  SSEの仕様はシンプルで、実装が容易。

使い分け

• 性能が重要な場合
  WebSocketを使用する。
• 実装の容易さを優先する場合
  SSEを使用する。
• 単方向通信で十分な場合
  SSEを使用する。

HTMLでの使用

• SSE
  

  <script>
  var source = new EventSource("/sse");
  source.onmessage = function(event) {
    console.log(event.data);
  };
  </script>
  

• WebSocket
  

  <script>
  var ws = new WebSocket("ws://example.com/websocket");
  ws.onmessage = function(event) {
    console.log(event.data);
  };
  </script>
  

WebSocketとSSEの比較：コード例

サーバー側 (Node.js)

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (mess   age) => {
    console.log('Received message:', message);
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(messag   e);
      }
    });
  });
});

クライアント側 (HTML)

<script>
  const ws = new WebSocket('ws://localhost:8080');

  ws.onopen = () => {
    console.log('WebSocket connection opened');
    ws.send('Hello from client!');
  };

  ws.onmessage = (event) => {
    console.log('Received message:', event.data);
  };

  ws.onclose = () => {
    console.log('WebSocket connection closed');
  };
</script>

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/event-stream' });

  setInterval(() => {
    res.write(`data: ${Date.now()}\n\n`);
  }, 1000);
});

server.listen(8081);

<script>
  const source = new EventSource('/sse');

  source.onmessage = (event) => {
    console.log('Received message:', event.data);
  };

  source.onerror = (event) => {
    console.log('SSE connection error:', event);
  };
</script>

解説

• SSE
  
  • サーバー側では、HTTPレスポンスヘッダに Content-Type: text/event-stream を設定し、定期的にイベントを送信します。
  • クライアント側では、EventSourceオブジェクトを作成し、サーバーからのイベントを受け取ります。
• WebSocket
  
  • サーバー側では、WebSocketサーバーを作成し、クライアントからの接続を受け付けます。
  • クライアントからのメッセージを受け取ったら、他のクライアントにブロードキャストします。
  • クライアント側では、WebSocket接続を確立し、サーバーにメッセージを送信し、サーバーからのメッセージを受け取ります。

WebSocketとSSEの代替手法

WebSocketとSSEは、リアルタイム通信を実現するための技術ですが、これらの代替手法として以下が挙げられます。

HTTP Long Polling

HTTP Long Pollingは、クライアントがサーバーにリクエストを送信し、サーバーがレスポンスを返さない状態を維持し続けることで、サーバーからの新しいデータがあるかどうかをポーリングする手法です。

メリット

• 既存のHTTPインフラストラクチャを利用可能
• シンプルな実装

• サーバー側の負荷が高い
• 効率が悪い

Webhooks

Webhooksは、サーバーが特定のイベントが発生したときに、事前に登録されたURLにHTTPリクエストを送信する手法です。

• サーバー側の信頼性が必要
• リアルタイム性がない

Server-Side Rendering (SSR)

SSRは、サーバー側でHTMLを生成し、クライアントに送信する手法です。これにより、ページの初期ロードが高速化され、ユーザー体験が向上します。

• SEOに有利
• ページの初期ロードが高速

• クライアント側のJavaScriptが必要

WebRTC

WebRTCは、ブラウザ間の直接通信を可能にする技術です。これにより、低遅延のリアルタイム通信を実現できます。

• プライバシー保護
• 低遅延のリアルタイム通信

• ブラウザのサポートが必要
• 複雑な実装