Membuat Aplikasi Masa Nyata dengan SSE (Acara Server-Sent)-tutorial js-php.cn

Membuat Aplikasi Masa Nyata dengan SSE (Acara Server-Sent)

DDD

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

asal

176 orang telah melayarinya

Sepuluh tahun yang lalu, jika anda perlu membangunkan aplikasi masa nyata (seperti sembang atau suapan kemas kini), pelan pilihan adalah mengundi. Teknologi ini menghantar data kemas kini ke pelayan mengikut masa dan berulang kali menghantar permintaan HTTP. Walau bagaimanapun, walaupun tidak ada maklumat baru, permintaan itu masih akan dihantar, menyebabkan pembaziran jalur lebar dan keupayaan pemprosesan pelayan.

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

Untungnya, Times berubah. Sekarang menggunakan JavaScript, kita boleh menggunakan Perpustakaan Eventsource untuk menubuhkan sambungan SSE (Server Sending Event). Artikel ini akan membincangkan konsep SSE dan memberikan tutorial ringkas.

Sambungan langsung

Berbeza dengan permintaan HTTP tradisional (klien mengeluarkan permintaan, pelayan mengembalikan respons), sambungan SSE sentiasa terbuka untuk merealisasikan komunikasi satu jalan dari pelayan kepada klien. Tidak seperti WebSocket yang membolehkan komunikasi dua jalan, SSE hanya menghantar data kepada pelanggan sahaja, dan pelanggan menerima masa nyata semasa sambungan.

Criando aplicações em tempo real com SSE (Server-Sent Events) Selepas sambungan ditubuhkan, data mencapai klien JavaScript dalam bentuk acara. Pelayan bertanggungjawab untuk menghantar acara yang mengandungi data terkini apabila perlu.

Kecuali sambungan ditutup, pelanggan akan terus menunggu acara data baru yang dihantar oleh pelayan, yang menjadikannya teknologi yang ideal yang membina notis yang perlu dikemas kini secara berterusan, panel instrumen atau sembang. Criando aplicações em tempo real com SSE (Server-Sent Events)

Sambungkan sistem pengurusan

Untuk mengamalkan konsep di atas, kami akan membuat aplikasi Node.js (Back -end) untuk menyediakan titik akhir sambungan SSE untuk klien JavaScript (hujung depan).

Aplikasi adalah sistem yang perlu memasukkan userId dan mewujudkan sambungan SSE. Selepas itu, pelayan menghantar acara setiap 5 saat dan mengembalikan senarai senarai pengguna. Sekiranya pengguna menghilangkan sambungan, ia akan dikeluarkan secara automatik dari senarai pengguna yang disambungkan.

mari kita mulakan!

Buat fail index.js, tumpukan logik belakang. Di samping itu, buat folder A/awam untuk menyimpan fail index.html dan skrip.js untuk menguruskan halaman. Strukturnya adalah seperti berikut: <:>

di index.js, import perpustakaan ekspres (digunakan untuk membuat titik akhir HTTP):

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

Salin selepas log masuk

di /public/index.html, buat HTML asas untuk memaparkan tajuk dan menguji sama ada pelayan berjalan:

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

Salin selepas log masuk

Sekarang, berjalan NPM bermula di terminal, halaman harus dipaparkan dalam penyemak imbas:

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

Salin selepas log masuk

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

Salin selepas log masuk

Kembali ke hujung belakang, buat fail Connection.js untuk menguruskan sambungan antara pengguna dan pelayan:

Di dalamnya, eksport kelas sambungan, simpan pemetaan pengguna yang telah disambungkan kepada pengguna (pengguna baru yang berdaftar) dan kaedah penyingkiran (keluarkan pengguna dari pemetaan): Criando aplicações em tempo real com SSE (Server-Sent Events)

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

Salin selepas log masuk

Oleh kerana kelas sambungan mengasingkan logik pengurusan sambungan, kita perlu mengkonfigurasi titik akhir dalam pelayan (index.js) supaya pelanggan dapat memulakan komunikasi SSE.

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

Salin selepas log masuk

Berikut adalah tiga mata:

kepala. Ini membolehkan pelanggan mengenal pasti komunikasi SSE dan membuat objek Eventsource untuk mewujudkan sambungan. Content-Type: text/event-stream
req.on("close", () => {})

Oleh kerana pelayan telah menyediakan titik akhir sambungan SSE, pelanggan perlu meminta alamat ini dan menunggu acara penghantaran.

Dalam fail index.html, kami akan membuat:

medan teks untuk pengguna memasuki userId; <ul> dua butang: satu untuk permulaan, yang lain digunakan untuk mematikan sambungan SSE;

label , menunjukkan senarai pengguna yang telah disambungkan ke, senarai ini akan mengemas kini acara yang dihantar oleh pelayan.

kemudian tambahkan kod JS ke skrip.js: <ul>

Buka dua halaman Tab dalam penyemak imbas untuk menguji sambungan masa sebenar untuk memerhatikan kemas kini pengguna.

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

Salin selepas log masuk

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

Salin selepas log masuk

Ini melengkapkan sistem sambungan SSE Real -Time yang mudah. Teknologi ini sangat sesuai untuk pelayan untuk terus menghantar satu data kepada pelanggan, seperti suapan, sembang atau panel instrumen.

Criando aplicações em tempo real com SSE (Server-Sent Events) Sila ambil perhatian bahawa untuk integriti, saya menambah pemprosesan ralat dan beberapa butiran kod, seperti menambah

cek dalam fungsi

dan menambah Criando aplicações em tempo real com SSE (Server-Sent Events) prosedur pemprosesan acara ke fungsi

. Penambahbaikan ini meningkatkan keteguhan dan kebolehpercayaan kod.

Atas ialah kandungan terperinci Membuat Aplikasi Masa Nyata dengan SSE (Acara Server-Sent). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!