NEW ARTICLE
A duplicate name exists on the networkの解決方法
  1. HOME
  2. javascript
  3. SSE（サーバー送信イベント）によるJavaScriptのリアルタイムUI更新

SSE（サーバー送信イベント）によるJavaScriptのリアルタイムUI更新

SSE（サーバー送信イベント）によるJavaScriptのリアルタイムUI更新

SSE（サーバー送信イベント）は、クライアントとサーバー間でリアルタイムなデータのやり取りを実現するための技術です。特に、ユーザーインターフェイスの動的な更新を行いたい場合に有効です。本記事では、SSEを使用してJavaScriptでリアルタイムにUIを更新する方法について詳しく解説します。

目次

SSEとは？

SSEは、サーバーからクライアントへ一方向でデータを送信する仕組みで、主にリアルタイム通知やデータの更新に利用されます。SSEは、HTTPプロトコルをベースにしており、長い間接続を維持することで、サーバーからのイベントをクライアントにリアルタイムで通知できます。

基本的な構成

SSEは、サーバー側とクライアント側でそれぞれ特定の設定を行う必要があります。サーバーは、クライアントから接続があると、`text/event-stream`形式でデータを送信します。クライアントは、JavaScriptで`EventSource`を使ってこの接続を開き、イベントを受け取ります。

サーバー側の実装（Node.jsの例）

サーバー側では、HTTPレスポンスヘッダに`Content-Type: text/event-stream`を設定し、クライアントに向けてイベントを送信します。以下はNode.jsでの簡単なサーバー実装の例です。

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/events') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    let count = 0;
    setInterval(() => {
      res.write(`data: ${JSON.stringify({ message: 'Hello', count: count++ })}\n\n`);
    }, 1000);
  } else {
    res.writeHead(404);
    res.end();
  }
});

server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

クライアント側の実装（JavaScript）

クライアント側では、`EventSource`オブジェクトを使ってサーバーから送信されたイベントを受け取ります。以下のコードでは、サーバーから送信されたデータを受け取り、UIを更新します。

const eventSource = new EventSource('http://localhost:3000/events');

eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  document.getElementById('message').innerText = data.message;
  document.getElementById('count').innerText = data.count;
};

eventSource.onerror = function(error) {
  console.error('Error occurred:', error);
};

HTML側の構成

上記のクライアント側JavaScriptを動作させるためのHTMLの構成は以下の通りです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SSE Example</title>
</head>
<body>
  <div>
    <p id="message">Waiting for message...</p>
    <p id="count">Count: 0</p>
  </div>
  <script src="app.js"></script>
</body>
</html>

エラーハンドリングと再接続

SSEは接続が切れる可能性があるため、エラーハンドリングと再接続の仕組みを考慮することが重要です。`EventSource`には`onerror`イベントがあり、接続が切れた場合などに通知を受けて再接続を試みることができます。

const eventSource = new EventSource('http://localhost:3000/events');

eventSource.onerror = function() {
  console.log('Connection lost, retrying...');
  eventSource.close();
  setTimeout(() => {
    startEventSource();
  }, 5000); // 5秒後に再接続を試みる
};

SSEの利点と制約

SSEにはいくつかの利点がありますが、同時に制約も存在します。利点としては、簡単に実装できることや、サーバーとクライアント間で持続的な接続を維持できる点が挙げられます。制約としては、サーバーがHTTP/1.1またはHTTP/2をサポートしている必要があることや、双方向通信がサポートされていないことが挙げられます。

ブラウザのサポート

SSEは現代のほとんどの主要なブラウザでサポートされていますが、Internet Explorerや古いバージョンのEdgeなどではサポートされていません。そのため、対応ブラウザを確認する必要があります。

セキュリティ対策

SSEを使用する際は、セキュリティにも注意を払う必要があります。通信が暗号化されていない場合、クライアントとサーバー間のデータが盗聴される可能性があります。したがって、SSEを実装する際は、HTTPSを使用することが推奨されます。

UIのリアルタイム更新

SSEは、リアルタイムでUIを更新するのに適しています。例えば、チャットアプリケーション、スポーツの試合のスコア更新、株価のリアルタイム更新など、ユーザーに即座に反映させる必要があるデータの更新に役立ちます。

データフォーマットの選択

SSEでは、送信するデータは通常、`data: `というプレフィックスでJSON形式やテキスト形式で送信されます。適切なデータフォーマットを選択することで、クライアント側でのデータ処理がスムーズになります。

カスタムイベントの送信

SSEでは、カスタムイベントを送信することができます。これにより、特定の処理をトリガーするイベントをサーバー側からクライアントに送信できます。

setInterval(() => {
  res.write(`event: customEvent\n`);
  res.write(`data: ${JSON.stringify({ message: 'Custom event triggered' })}\n\n`);
}, 5000);

まとめ

SSEを使用することで、サーバーからクライアントにリアルタイムでデータを送信し、UIを動的に更新することができます。シンプルで効率的なこの技術は、リアルタイム機能を必要とするアプリケーションに非常に適しています。