SSE (Server-Sent Events) یک تکنولوژی در وب است که به سرور این امکان را می دهد که به ظور یک طرفه داده ها را به مرورگرها ارسال کند. این تکنولوژی به خصوص برای اپلیکیشن هایی که نیاز به بروزرسانی مداوم اطلاعات دارند، مانند سیستم های نظارت، شبکه های اجتماعی و اعلان ها، بسیار مفید است.
در ادامه به بررسی نحوه استفاده از SSE در Node.js خواهیم پرداخت.
مفهوم Server-Sent Events
SSE به مرورگرها این امکان را می دهد که به صورت مداوم به سرور متصل باشند و هر زمان که سرور داده ای جدید داشته باشد، آن را به صورت اتوماتیک دریافت کنند. این فرآیند بر اساس HTTP و بدون نیاز به تکنیک های پیچیده ای مانند WebSockets انجام می شود.
نحوه پیاده‌سازی SSE در Node.js
برای پیاده سازی SSE در Node.js مراحل زیر را دنبال خواهیم کرد.
ایجاد یک پروژه Node.js
ابتدا یک پروژه جدید Node.js می سازیم.
mkdir sse-example
cd sse-example
npm init -yنصب Express.js
به عنوان فریم ورک وب از Express.js استفاده می کنیم.
npm install expressایجاد یک سرور ساده با SSE
فایل server.js را ایجاد می کنیم و کد زیر را در آن قرار دهید.
const express = require('express');
const app = express();
const PORT = 3000;
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
const intervalId = setInterval(() => {
const data = JSON.stringify({ message: 'Hello from server', timestamp: new Date() });
res.write(`data: ${data}\n\n`);
}, 5000);
req.on('close', () => {
clearInterval(intervalId);
});
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});ایجاد کلاینت HTML
حالا یک فایل HTML به نام index.html ایجاد می کنیم که به سرور SSE متصل شود.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE Example</title>
</head>
<body>
<h1>Server-Sent Events</h1>
<div id="messages"></div>
<script>
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
const messageDiv = document.getElementById('messages');
messageDiv.innerHTML += `<p>${data.message} at ${data.timestamp}</p>`;
};
eventSource.onerror = function(err) {
console.error("EventSource failed:", err);
};
</script>
</body>
</html>اجرای سرور و تست
حالا سرور را با استفاده از دستور زیر اجرا می کنیم.
node server.jsسپس مرورگر خود را باز می کنیم و به http://localhost:3000 می رویم و اکنون پیام هایی که هر 5 ثانیه از سرور دریافت می شوند را مشاهده می کنیم.
مزایا و معایب SSE
مزایا
- سادگی: استفاده از SSE بسیار ساده است و نیازی به پروتکل های پیچیده ندارد.
- اتصال یک طرفه: مناسب برای مواردی که نیاز به ارسال داده ها از سرور به کلاینت وجود دارد.
- پشتیبانی از مرورگر: اکثر مرورگرهای مدرن از SSE پشتیبانی می کنند.
معایب
- عدم پشتیبانی از اتصال دوطرفه: برای ارسال داده ها از کلاینت به سرور، باید از روش های دیگر مانند AJAX استفاده کرد.
- محدودیت در مرورگرهای قدیمی: برخی از مرورگرهای قدیمی ممکن است از SSE پشتیبانی نکنند.
نتیجه گیری
SSE یک راهکار ساده و موثر برای برقراری ارتباط بین سرور و کلاینت به صورت Real-Time است. با استفاده از Node.js و Express.js می توانید به راحتی این تکنولوژی را پیاده سازی کنید و تجربه ای به روز و کاربرپسند برای کاربران خود فراهم آورید.
دیدگاهتان را بنویسید