介紹

伺服器傳送事件 (SSE) 是一種 Web 技術(shù)，可讓伺服器透過 HTTP 將即時更新推送到客戶端。與 WebSocket 不同，SSE 實作起來更簡單，因為它使用從伺服器到瀏覽器的單向通訊通道，並透過常規(guī) HTTP 連線工作。它對於需要定期更新的應(yīng)用程式特別有用，例如即時比分、通知或即時監(jiān)控儀表板。

我創(chuàng)建了這個演示，因為我目前正在開發(fā)一個應(yīng)用程序，人工智慧可以在其中討論各種主題。我想實現(xiàn)一些類似流的功能，並發(fā)現(xiàn)了名為“SSE”的技術(shù)。

演示概述

此示範(fàn)展示如何使用伺服器傳送事件 (SSE) 將即時更新從 API 傳送到瀏覽器。在此範(fàn)例中，瀏覽器顯示伺服器發(fā)送的一系列範(fàn)例訊息。該演示的簡單性使其成為了解 SSE 如何運(yùn)作並將其整合到您的專案中的絕佳起點(diǎn)。

示範(fàn)影片

下面的影片示範(fàn)了伺服器發(fā)送事件 (SSE) 示範(fàn)如何即時運(yùn)作。觀看此影片將使您更了解客戶端和伺服器如何互動以提供即時更新。

執(zhí)行

伺服器發(fā)送事件（SSE）演示的核心實作分為兩部分：前端和後端。完整的原始程式碼可在 GitHub 上找到：sse-demo 儲存庫。

前端 (ui/src/app/page.tsx)

前端使用 React 構(gòu)建，提供啟動和停止 SSE 連接的按鈕，顯示來自伺服器的即時訊息。主要亮點(diǎn)如下：

1. 連接到 SSE：handleStartConnection 函數(shù)建立一個連接到 /events 端點(diǎn)的 EventSource 物件。它監(jiān)聽訊息、開啟事件和錯誤事件：

   • onmessage：處理傳入訊息並更新訊息狀態(tài)。
   • onopen：建立連線時記錄。
   • onerror：處理錯誤、記錄詳細(xì)資訊並在需要時關(guān)閉連線。

2. 停止連線：handleStopConnection函數(shù)關(guān)閉SSE連線並進(jìn)行清理。

3. UI：此頁麵包括一個簡單的介面，帶有開始/停止按鈕和一個顯示訊息的清單。
   

"use client";

import type React from "react";
import { useState } from "react";

const App: React.FC = () => {
  const [messages, setMessages] = useState<string[]>([]);
  const [eventSource, setEventSource] = useState<EventSource | null>(null);

  const handleStartConnection = () => {
    const newEventSource = new EventSource("http://localhost:8080/events");

    const handleOnMessage = (event: MessageEvent) => {
      console.log("onmessage", event.data);
      setMessages((prev) => [...prev, event.data]);
    };

    const handleOnOpen = () => {
      console.log("Connection established");
    };

    const handleOnError = (error: Event) => {
      console.error("onerror", error);
      console.log("readyState:", newEventSource.readyState);
      console.log("Connection error occurred.");
      newEventSource.close();
      setEventSource(null);
    };

    const handleOnClose = () => {
      console.log("Connection is being closed by the server.");
      newEventSource.close();
      setEventSource(null);
    };

    newEventSource.onmessage = handleOnMessage;
    newEventSource.onopen = handleOnOpen;
    newEventSource.onerror = handleOnError;
    newEventSource.addEventListener("close", handleOnClose);

    setEventSource(newEventSource);
  };

  const handleStopConnection = () => {
    if (eventSource) {
      eventSource.close();
      setEventSource(null);
      console.log("Connection closed");
    }
  };

  return (
    <div>
      <h1>Server-Sent Events Demo</h1>
      <button
        type="button"
        onClick={handleStartConnection}
        disabled={!!eventSource}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
      >
        Start Connection
      </button>
      <button
        type="button"
        onClick={handleStopConnection}
        disabled={!eventSource}
        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 ml-2"
      >
        Stop Connection
      </button>
      <ul>
        {messages.map((message, index) => (
          <li key={`${index}-${message}`}>{message}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

後端（api/main.go）

後端是使用 Go 的 Gin 框架建構(gòu)的，包括以下主要功能：

1. CORS 配置：後端使用 Gin CORS 中間件來允許調(diào)試期間的連接。

2. SSE 端點(diǎn)：/events 端點(diǎn)將一系列預(yù)先定義訊息串流傳輸?shù)娇蛻舳?，每個訊息之間存在延遲。關(guān)鍵組件：

   • 標(biāo)頭設(shè)定為指定文字/事件流內(nèi)容類型。
   • 訊息循環(huán)發(fā)送，每個訊息之間有 2 秒的延遲。
   • 最終關(guān)閉事件標(biāo)誌著連線的結(jié)束。

"use client";

import type React from "react";
import { useState } from "react";

const App: React.FC = () => {
  const [messages, setMessages] = useState<string[]>([]);
  const [eventSource, setEventSource] = useState<EventSource | null>(null);

  const handleStartConnection = () => {
    const newEventSource = new EventSource("http://localhost:8080/events");

    const handleOnMessage = (event: MessageEvent) => {
      console.log("onmessage", event.data);
      setMessages((prev) => [...prev, event.data]);
    };

    const handleOnOpen = () => {
      console.log("Connection established");
    };

    const handleOnError = (error: Event) => {
      console.error("onerror", error);
      console.log("readyState:", newEventSource.readyState);
      console.log("Connection error occurred.");
      newEventSource.close();
      setEventSource(null);
    };

    const handleOnClose = () => {
      console.log("Connection is being closed by the server.");
      newEventSource.close();
      setEventSource(null);
    };

    newEventSource.onmessage = handleOnMessage;
    newEventSource.onopen = handleOnOpen;
    newEventSource.onerror = handleOnError;
    newEventSource.addEventListener("close", handleOnClose);

    setEventSource(newEventSource);
  };

  const handleStopConnection = () => {
    if (eventSource) {
      eventSource.close();
      setEventSource(null);
      console.log("Connection closed");
    }
  };

  return (
    <div>
      <h1>Server-Sent Events Demo</h1>
      <button
        type="button"
        onClick={handleStartConnection}
        disabled={!!eventSource}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
      >
        Start Connection
      </button>
      <button
        type="button"
        onClick={handleStopConnection}
        disabled={!eventSource}
        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 ml-2"
      >
        Stop Connection
      </button>
      <ul>
        {messages.map((message, index) => (
          <li key={`${index}-${message}`}>{message}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

如何運(yùn)行它

要執(zhí)行此演示，請參閱 GitHub 儲存庫中的 README.md 檔案。它包含設(shè)定和運(yùn)行專案前端和後端的逐步說明。

結(jié)論

此示範(fàn)提供了對伺服器發(fā)送事件 (SSE) 的簡單而有效的介紹，示範(fàn)如何將即時訊息從伺服器串流傳輸?shù)綖g覽器。透過專注於基礎(chǔ)知識，它旨在幫助您快速理解核心概念並開始在自己的專案中嘗試 SSE。

如果您有興趣嘗試或基於此範(fàn)例進(jìn)行構(gòu)建，請查看 GitHub 上的完整原始程式碼：sse-demo 儲存庫。

以上是SSE最簡單的demo（伺服器傳送事件）的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！