Erstellen von Echtzeit-Anwendungen mit SSE (Server-Sent-Ereignisse)-js-Tutorial-php.cn

Erstellen von Echtzeit-Anwendungen mit SSE (Server-Sent-Ereignisse)

DDD

Freigeben： 2025-01-28 08:31:12

Original

176 Leute haben es durchsucht

Vor zehn Jahren, wenn Sie eine echte Zeitanwendung entwickeln müssen (z. B. Chat- oder Update -Feed), ist der bevorzugte Plan die Wahl. Diese Technologie sendet die Aktualisierungsdaten nach Zeit an den Server und sendet wiederholt HTTP -Anforderungen. Selbst wenn es keine neuen Informationen gibt, wird die Anfrage weiterhin gesendet, was zu einer Verschwendung von Bandbreiten- und Serververarbeitungsfunktionen führt.

Criando aplicações em tempo real com SSE (Server-Sent Events)

Glücklicherweise ändert sich die Zeiten. Mit JavaScript können wir nun die EventSource -Bibliothek verwenden, um eine SSE -Verbindung (Server -Senden -Ereignis) herzustellen. In diesem Artikel werden das Konzept von SSE erörtert und ein kurzes Tutorial bereitgestellt.

Live Connection

Unterscheidet sich von der herkömmlichen HTTP -Anforderung (Client hat eine Anforderung ausgestellt, der Server gibt die Antwort zurück), die SSE -Verbindung bleibt immer geöffnet, um die eine Kommunikation vom Server zum Client zu realisieren. Im Gegensatz zum WebSocket, mit dem zweiwegs Kommunikation ermöglicht, sendet SSE nur Daten allein an den Client, und der Client erhält während der Verbindung eine Echtzeit.

Criando aplicações em tempo real com SSE (Server-Sent Events) Nachdem die Verbindung hergestellt wurde, erreicht die Daten den JavaScript -Client in Form eines Ereignisses. Der Server ist für das Senden von Ereignissen verantwortlich, die bei Bedarf aktualisierte Daten enthalten.

Sofern die Verbindung nicht geschlossen ist, wartet der Client weiterhin auf das vom Server gesendete neue Datenereignis, was es zu einer idealen Technologie macht, die eine Mitteilung erstellt, die kontinuierlich aktualisiert werden muss, Instrumenten -Panel oder Chat. Criando aplicações em tempo real com SSE (Server-Sent Events)

Verbinden Sie das Verwaltungssystem

Um das obige Konzept zu praktizieren, erstellen wir eine Node.js -Anwendung (Back -End), um den SSE -Verbindungsendpunkt für den JavaScript -Client (Frontend) bereitzustellen.

Anwendung ist ein System, das Benutzer ID eingeben und eine SSE -Verbindung herstellen muss. Danach sendet der Server alle 5 Sekunden ein Ereignis und gibt eine Liste von Benutzerlisten zurück. Wenn der Benutzer die Verbindung ausgeht, wird er automatisch aus der angeschlossenen Benutzerliste entfernt.

Beginnen wir!

Erstellen Sie die Datei index.js und konzentrieren Sie die Back -end -Logik. Erstellen Sie außerdem einen/öffentlichen Ordner, um index.html und script.js -Dateien zu speichern, um Seiten zu verwalten. Die Struktur lautet wie folgt:

Im INDEX.JS die Express -Bibliothek importieren (zum Erstellen von HTTP -Endpunkten):

<code class="language-bash">npm init -y
npm i express</code>

Nach dem Login kopieren

in /public/index.html erstellen Sie ein grundlegendes HTML, um den Titel anzuzeigen und zu testen, ob der Server ausgeführt wird:

<code>/public
  index.html
  script.js
index.js
package.json</code>

Nach dem Login kopieren

Wenn Sie npm im Terminal ausführen, sollte die Seite im Browser angezeigt werden:

<code class="language-javascript">import express from "express"
import fs from "fs"
import path from "path"

const app = express()
app.use(express.json())
app.use(express.static(path.join(path.resolve(path.dirname("")), "public")))

app.get("/", (_, res) => {
  res.writeHead(200, { "content-language": "text/html" })
  const streamIndexHtml = fs.createReadStream("index.html")
  streamIndexHtml.pipe(res)
})

const PORT = 3000
app.listen(PORT, () => console.log(`Server is running on ${PORT} port`))</code>

Nach dem Login kopieren

<code class="language-html"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Server Sent Events Demo</title>
  <h1>Server Sent Events Demo (SSE)</h1>
</head>
<body>
</body>
</html></code>

Nach dem Login kopieren

Zurück zum Back -End erstellen Sie eine Verbindung von Connection.js, um die Verbindung zwischen dem Benutzer und dem Server zu verwalten:

In IT exportieren

<code class="language-bash">npm init -y
npm i express</code>

Nach dem Login kopieren

Da die Verbindungsklasse die Verbindungsverwaltungslogik isoliert hat, müssen wir einen Endpunkt auf dem Server (INDEX.JS) konfigurieren, damit der Client die SSE -Kommunikation starten kann.

<code>/public
  index.html
  script.js
index.js
package.json</code>

Nach dem Login kopieren

Hier sind drei Punkte:

Kopf reagieren. Auf diese Weise können Kunden die SSE -Kommunikation identifizieren und EventSource -Objekte erstellen, um Verbindungen herzustellen. Content-Type: text/event-stream
req.on("close", () => {})

Da der Server den SSE -Verbindungsendpunkt bereitgestellt hat, muss der Client diese Adresse anfordern und auf das Sendenereignis warten.

In der Datei index.html erstellen wir:

ein Textfeld für Benutzer, um Benutzer ID einzugeben; <ul> Zwei Schaltflächen: Eines für das Start, das andere wird verwendet, um die SSE -Verbindung auszuschalten

a Etikett, die die Benutzerliste zeigt, mit der diese Liste angeschlossen wurde, aktualisiert diese Liste die vom Server gesendeten Ereignisse.

Fügen Sie dann dem script.js: <ul> JS -Code hinzu:

<code class="language-javascript">import express from "express"
import fs from "fs"
import path from "path"

const app = express()
app.use(express.json())
app.use(express.static(path.join(path.resolve(path.dirname("")), "public")))

app.get("/", (_, res) => {
  res.writeHead(200, { "content-language": "text/html" })
  const streamIndexHtml = fs.createReadStream("index.html")
  streamIndexHtml.pipe(res)
})

const PORT = 3000
app.listen(PORT, () => console.log(`Server is running on ${PORT} port`))</code>

Nach dem Login kopieren

Öffnen Sie die beiden Registerkartenseiten im Browser, um die reale Zeitverbindung zu testen, um die Aktualisierung des Benutzers zu beobachten.

<code class="language-html"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Server Sent Events Demo</title>
  <h1>Server Sent Events Demo (SSE)</h1>
</head>
<body>
</body>
</html></code>

Nach dem Login kopieren

Dies vervollständigt ein einfaches SSE Real -Time -Verbindungssystem. Diese Technologie ist sehr geeignet, damit der Server weiterhin ein Way -Daten an den Client sendet, z. B. Feed-, Chat- oder Instrumenten -Panel. Criando aplicações em tempo real com SSE (Server-Sent Events)

Bitte beachten Sie, dass ich für die Integrität die Fehlerverarbeitung und einige Codedetails hinzugefügt habe, z. B. für die Funktion

Überprüfungen in der Funktion Criando aplicações em tempo real com SSE (Server-Sent Events) und der Funktion

hinzuzufügen. Diese Verbesserungen verbessern die Robustheit und Zuverlässigkeit des Codes.

Das obige ist der detaillierte Inhalt vonErstellen von Echtzeit-Anwendungen mit SSE (Server-Sent-Ereignisse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!