SSE最简单的demo（服务器发送事件）-Golang-PHP中文网

介绍

服务器发送事件 (SSE) 是一种 Web 技术，允许服务器通过 HTTP 将实时更新推送到客户端。与 WebSocket 不同，SSE 实现起来更简单，因为它使用从服务器到浏览器的单向通信通道，并通过常规 HTTP 连接工作。它对于需要定期更新的应用程序特别有用，例如实时比分、通知或实时监控仪表板。

我创建了这个演示，因为我目前正在开发一个应用程序，人工智能可以在其中讨论各种主题。我想实现一些类似流的功能，并发现了名为“SSE”的技术。

演示概述

此演示展示了如何使用服务器发送事件 (SSE) 将实时更新从 API 发送到浏览器。在此示例中，浏览器显示服务器发送的一系列示例消息。该演示的简单性使其成为了解 SSE 如何工作并将其集成到您的项目中的绝佳起点。

演示视频

下面的视频演示了服务器发送事件 (SSE) 演示如何实时工作。观看此视频将使您更好地了解客户端和服务器如何交互以提供实时更新。

The simplest demo on SSE(Server-Send Events)

执行

服务器发送事件（SSE）演示的核心实现分为两部分：前端和后端。完整的源代码可在 GitHub 上找到：sse-demo 存储库。

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

前端使用 React 构建，提供启动和停止 SSE 连接的按钮，显示来自服务器的实时消息。主要亮点如下：

连接到 SSE：handleStartConnection 函数创建一个连接到 /events 端点的 EventSource 对象。它监听消息、打开事件和错误事件：
- onmessage：处理传入消息并更新消息状态。
- onopen：建立连接时记录。
- onerror：处理错误、记录详细信息并在需要时关闭连接。
停止连接：handleStopConnection函数关闭SSE连接并进行清理。
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 框架构建的，包括以下主要功能：

CORS 配置：后端使用 Gin CORS 中间件来允许调试期间的连接。
SSE 端点：/events 端点将一系列预定义消息流式传输到客户端，每条消息之间存在延迟。关键组件：
- 标头设置为指定文本/事件流内容类型。
- 消息循环发送，每条消息之间有 2 秒的延迟。
- 最终关闭事件标志着连接的结束。

"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;

登录后复制