HTML Server-Sent Events API
Server-Sent Events (SSE) یا رویدادهای ارسالشده از سرور را مشاهده میکنید:
✅ ویژگیهای اصلی SSE (رویدادهای ارسالشده از سرور):
-
یکطرفه: فقط از سمت سرور به سمت کلاینت (مرورگر) داده ارسال میشود.
-
بر پایه HTTP: بدون نیاز به پروتکلهای پیچیده مثل WebSocket.
-
اتصال خودکار مجدد: اگر اتصال قطع شود، مرورگر به صورت خودکار تلاش میکند دوباره وصل شود.
-
پشتیبانی در مرورگرها: بیشتر مرورگرهای مدرن مثل Chrome، Firefox، Safari و Edge از آن پشتیبانی میکنند (اما IE پشتیبانی نمیکند).
📦 استفاده ساده
۱. سمت کلاینت (HTML + JavaScript):
<!DOCTYPE html>
<html>
<head>
<title>SSE Example</title>
</head>
<body>
<h1>نمونه رویدادهای ارسالشده از سرور</h1>
<div id=“messages”></div>
<script>
if (!!window.EventSource) {
const source = new EventSource(“/events”);
source.onmessage = function(event) {
const messagesDiv = document.getElementById(“messages”);
messagesDiv.innerHTML += `<p>${event.data}</p>`;
};
source.onerror = function() {
console.error(“ارتباط با EventSource قطع شد.”);
};
} else {
alert(“مرورگر شما از SSE پشتیبانی نمیکند.”);
}
</script>
</body>
</html>
۲. سمت سرور (مثال با Node.js و Express):
const express = require(“express”);
const app = express();
app.get(“/events”, (req, res) => {
res.setHeader(“Content-Type”, “text/event-stream”);
res.setHeader(“Cache-Control”, “no-cache”);
res.setHeader(“Connection”, “keep-alive”);
const sendData = () => {
res.write(`data: زمان فعلی: ${new Date().toLocaleTimeString()}\n\n`);
};
const interval = setInterval(sendData, 5000);
req.on(“close”, () => {
clearInterval(interval);
res.end();
});
});
app.listen(3000, () => {
console.log(“سرور SSE روی پورت ۳۰۰۰ در حال اجراست”);
});
📄 فرمت پیام در SSE
پیامهایی که سرور ارسال میکند باید این ساختار را داشته باشند:
data: پیام شما
میتوان پیامها را با بخشهای زیر تکمیل کرد:
id: 123
event: customEvent
data: یک متن
🔁 اتصال مجدد خودکار
-
مرورگر به صورت پیشفرض در صورت قطع اتصال، دوباره وصل میشود.
-
میتوانید زمان تلاش مجدد را تنظیم کنید:
retry: 10000 // تلاش مجدد پس از ۱۰ ثانیه
دیدگاهتان را بنویسید