介紹

服務(wù)器發(fā)送事件 (SSE) 是一種 Web 技術(shù)，允許服務(wù)器通過 HTTP 將實時更新推送到客戶端。與 WebSocket 不同，SSE 實現(xiàn)起來更簡單，因為它使用從服務(wù)器到瀏覽器的單向通信通道，并通過常規(guī) HTTP 連接工作。它對于需要定期更新的應(yīng)用程序特別有用，例如實時比分、通知或?qū)崟r監(jiān)控儀表板。

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

演示概述

此演示展示了如何使用服務(wù)器發(fā)送事件 (SSE) 將實時更新從 API 發(fā)送到瀏覽器。在此示例中，瀏覽器顯示服務(wù)器發(fā)送的一系列示例消息。該演示的簡單性使其成為了解 SSE 如何工作并將其集成到您的項目中的絕佳起點。

演示視頻

下面的視頻演示了服務(wù)器發(fā)送事件 (SSE) 演示如何實時工作。觀看此視頻將使您更好地了解客戶端和服務(wù)器如何交互以提供實時更新。

執(zhí)行

服務(wù)器發(fā)送事件（SSE）演示的核心實現(xiàn)分為兩部分：前端和后端。完整的源代碼可在 GitHub 上找到：sse-demo 存儲庫。

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

前端使用 React 構(gòu)建，提供啟動和停止 SSE 連接的按鈕，顯示來自服務(wù)器的實時消息。主要亮點如下：

1. 連接到 SSE：handleStartConnection 函數(shù)創(chuàng)建一個連接到 /events 端點的 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 端點：/events 端點將一系列預(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)行它

要運(yùn)行此演示，請參閱 GitHub 存儲庫中的 README.md 文件。它包含設(shè)置和運(yùn)行項目前端和后端的分步說明。

結(jié)論

此演示提供了對服務(wù)器發(fā)送事件 (SSE) 的簡單而有效的介紹，演示了如何將實時消息從服務(wù)器流式傳輸?shù)綖g覽器。通過關(guān)注基礎(chǔ)知識，它旨在幫助您快速理解核心概念并開始在自己的項目中嘗試 SSE。

如果您有興趣嘗試或基于此示例進(jìn)行構(gòu)建，請查看 GitHub 上的完整源代碼：sse-demo 存儲庫。

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