EventSource事件流（允許網頁與伺服器之間建立一個持久的連線，伺服器可以透過這個連線向客戶端推送更新）

SimoonJia發表於2024-08-29
事件網頁伺服器客戶端

EventSource 是 JavaScript 中用於處理伺服器傳送事件（Server-Sent Events, SSE）的介面。它允許網頁與伺服器之間建立一個持久的連線，伺服器可以透過這個連線向客戶端推送更新。

EventSource 通常用於需要實時更新資料的場景，比如實時通知、股票價格更新等。

基本用法

// 建立一個 EventSource 物件，並連線到指定的 URL
const eventSource = new EventSource('https://your-server.com/sse');

// 監聽訊息事件，當伺服器傳送訊息時觸發
eventSource.onmessage = function(event) {
  console.log('New message:', event.data);
};

// 監聽連線開啟事件
eventSource.onopen = function() {
  console.log('Connection to server opened.');
};

// 監聽錯誤事件
eventSource.onerror = function(event) {
  console.error('Error occurred:', event);
  if (eventSource.readyState === EventSource.CLOSED) {
    console.log('Connection was closed.');
  }
};

// 關閉連線
// eventSource.close();

關鍵概念和屬性

  1. 建構函式

    • new EventSource(url, [options])
    • url: SSE 伺服器的 URL。
    • options: 可選引數，通常不需要。

  2. 主要事件

    • onmessage: 當伺服器傳送訊息時觸發。
    • onopen: 當連線成功開啟時觸發。
    • onerror: 當連線出現錯誤或關閉時觸發。

  3. readyState 屬性

    • EventSource.CONNECTING (0): 正在建立連線。
    • EventSource.OPEN (1): 連線已建立，可以接收事件。
    • EventSource.CLOSED (2): 連線已關閉，不會接收更多事件。

  4. close() 方法

    • eventSource.close(): 手動關閉連線。

示例解釋

new EventSource(sseAlarmUrl, { reconnectTime: 3000 });

這個示例建立了一個 EventSource 例項，連線到 sseAlarmUrl 指定的伺服器 URL，選項 { reconnectTime: 3000 } 表示在連線斷開後，客戶端會在 3000 毫秒（3 秒）後嘗試重新連線。

伺服器端實現（簡單示例）

在伺服器端，你需要支援 SSE。例如，使用 Node.js 實現 SSE：

const http = require('http');

http.createServer((req, res) => {
  if (req.url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    });
    
    setInterval(() => {
      res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
    }, 1000);
  }
}).listen(3000);

console.log('Server running at http://localhost:3000/sse');

這個示例會每秒鐘向客戶端推送當前時間。

總結

EventSource 是一種輕量級的技術，用於從伺服器推送實時更新到客戶端。它透過簡單的介面讓你輕鬆實現實時資料流，特別適合需要頻繁更新的應用。

相關文章