Demo yang paling mudah di SSE(Server-Send Events)

pengenalan

Peristiwa Dihantar Pelayan (SSE) ialah teknologi web yang membolehkan pelayan menolak kemas kini masa nyata kepada klien melalui HTTP. Tidak seperti WebSockets, SSE lebih mudah untuk dilaksanakan kerana ia menggunakan saluran komunikasi sehala dari pelayan ke penyemak imbas dan berfungsi melalui sambungan HTTP biasa. Ia amat berguna untuk aplikasi yang memerlukan kemas kini berkala, seperti skor langsung, pemberitahuan atau papan pemuka pemantauan masa nyata.

Saya mencipta demo ini kerana saya sedang membangunkan aplikasi di mana AI membincangkan pelbagai topik. Saya ingin melaksanakan beberapa ciri seperti strim dan menemui teknologi yang dipanggil "SSE".

Gambaran Keseluruhan Demo

Demo ini mempamerkan cara Peristiwa Dihantar Pelayan (SSE) boleh digunakan untuk menghantar kemas kini masa nyata daripada API kepada penyemak imbas. Dalam contoh ini, penyemak imbas memaparkan satu siri sampel mesej yang dihantar oleh pelayan. Kesederhanaan demo ini menjadikannya titik permulaan yang sangat baik untuk memahami cara SSE berfungsi dan menyepadukannya ke dalam projek anda.

Video Demo

Di bawah ialah video yang menunjukkan cara tunjuk cara Acara Dihantar Pelayan (SSE) berfungsi dalam masa nyata. Menonton video ini akan memberi anda pemahaman yang lebih baik tentang cara pelanggan dan pelayan berinteraksi untuk memberikan kemas kini masa nyata.

Perlaksanaan

Pelaksanaan teras demo Acara Dihantar Pelayan (SSE) dibahagikan kepada dua bahagian: bahagian hadapan dan bahagian belakang. Kod sumber penuh tersedia di GitHub: repositori sse-demo.

Bahagian hadapan (ui/src/app/page.tsx)

Halaman hadapan dibina dengan React dan menyediakan butang untuk memulakan dan menghentikan sambungan SSE, memaparkan mesej masa nyata daripada pelayan. Berikut ialah sorotan utama:

1. Menyambung ke SSE: Fungsi handleStartConnection mencipta objek EventSource yang disambungkan ke titik akhir /events. Ia mendengar mesej, acara terbuka dan acara ralat:

   • onmessage: Mengendalikan mesej masuk dan mengemas kini keadaan mesej.
   • onopen: Log apabila sambungan diwujudkan.
   • onerror: Mengendalikan ralat, butiran pengelogan dan menutup sambungan jika perlu.

2. Menghentikan Sambungan: Fungsi handleStopConnection menutup sambungan SSE dan membersihkannya.

3. UI: Halaman ini termasuk antara muka ringkas dengan butang mula/henti dan senarai untuk memaparkan mesej.
   

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

Bahagian belakang (api/main.go)

Halaman belakang dibina menggunakan rangka kerja Gin untuk Go dan termasuk ciri utama berikut:

1. Konfigurasi CORS: Bahagian belakang menggunakan perisian tengah Gin CORS untuk membenarkan sambungan semasa nyahpepijat.

2. Titik Akhir SSE: Titik akhir /events menstrim satu siri mesej yang dipratakrifkan kepada klien dengan kelewatan antara setiap mesej. Komponen utama:

   • Pengepala ditetapkan untuk menentukan jenis kandungan teks/strim acara.
   • Mesej dihantar dalam satu gelung, dengan kelewatan 2 saat antara setiap mesej.
   • Acara penutupan terakhir menandakan sambungan tamat.

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

Cara Menjalankannya

Untuk menjalankan demo ini, sila rujuk fail README.md dalam repositori GitHub. Ia mengandungi arahan langkah demi langkah untuk menyediakan dan menjalankan kedua-dua bahagian hadapan dan bahagian belakang projek.

Kesimpulan

Demo ini menyediakan pengenalan ringkas tetapi berkesan kepada Acara Dihantar Pelayan (SSE), menunjukkan cara menstrim mesej masa nyata daripada pelayan ke penyemak imbas. Dengan memfokuskan pada asas, ia direka untuk membantu anda memahami konsep teras dengan cepat dan mula bereksperimen dengan SSE dalam projek anda sendiri.

Jika anda berminat untuk mencubanya atau membina contoh ini, lihat kod sumber penuh pada GitHub: repositori sse-demo.

Atas ialah kandungan terperinci Demo yang paling mudah di SSE(Server-Send Events). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!