Il y a dix ans, si vous avez besoin de développer une application réelle (telle que Chat ou Update Feed), le plan préféré est le sondage. Cette technologie envoie les données de mise à jour au serveur à l'heure et envoie à plusieurs reprises les demandes HTTP. Cependant, même s'il n'y a pas de nouvelles informations, la demande sera toujours envoyée, provoquant un gaspillage de la bande passante et des capacités de traitement du serveur.
Connexion en direct
Une fois la connexion établie, les données atteignent le client JavaScript sous la forme d'un événement. Le serveur est responsable de l'envoi d'événements contenant des données mises à jour si nécessaire.
à moins que la connexion ne soit close, le client continuera d'attendre le nouvel événement de données envoyé par le serveur, ce qui en fait une technologie idéale qui construit un avis qui doit être mis à jour en continu, un tableau de bord ou un chat. 
Afin de pratiquer le concept ci-dessus, nous créerons une application Node.js (back -end) pour fournir le point de terminaison de la connexion SSE pour JavaScript Client (frontal).
Commençons!Créez le fichier index.js, concentrez-vous la logique arrière. De plus, créez un dossier A / public pour stocker les fichiers index.html et script.js pour gérer les pages. La structure est la suivante:
dans index.js, importez la bibliothèque express (utilisée pour créer des points de terminaison http):
<code class="language-bash">npm init -y npm i express</code>
dans /public/index.html, créez un HTML de base pour afficher le titre et tester si le serveur s'exécute:
<code>/public index.html script.js index.js package.json</code>
Maintenant, l'exécution de NPM commence dans le terminal, la page doit être affichée dans le navigateur:
<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>
<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>
dans l'informatique, exportez la classe de connexion, stockez le mappage de l'utilisateur qui a été connecté à l'utilisateur (nouveaux utilisateurs enregistrés) et la méthode de suppression (supprimez l'utilisateur de la mappage): 
<code class="language-bash">npm init -y npm i express</code>
Étant donné que la classe de connexion a isolé la logique de gestion de la connexion, nous devons configurer un point de terminaison dans le serveur (index.js) afin que le client puisse démarrer la communication SSE.
<code>/public index.html script.js index.js package.json</code>
Les points de terminaison
Content-Type: text/event-stream
req.on("close", () => {})
Étant donné que le serveur a fourni le point de terminaison de la connexion SSE, le client doit demander cette adresse et attendre l'événement d'envoi.
Dans le fichier index.html, nous créerons:
un champ de texte pour que les utilisateurs entrent en service utilisateur; <ul> Deux boutons: l'un pour le démarrage, l'autre est utilisé pour éteindre la connexion SSE;
<ul>
<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>
<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>
Ceci complète un système de connexion SSE réel SSE. Cette technologie est très adaptée au serveur pour continuer à envoyer des données d'une voie au client, telles que le flux, le chat ou le tableau de bord.
Veuillez noter que pour l'intégrité, j'ai ajouté un traitement d'erreur et certains détails de code, tels que l'ajout de
et l'ajout de procédures de traitement d'événements 
à la fonction
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment utiliser la fonction valeur
Comment résoudre l'incompatibilité de charge du serveur
Comment utiliser aspose
Ordre de priorité des opérateurs en langage C
Style de barre de défilement CSS
référencement wordpress
Comment définir des chaînes en php
Comment installer WordPress après l'avoir téléchargé
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
