رویدادهای ارسال شده از سرور (SSE) چگونه کار می کنند

Summarize this content to 400 words in Persian Lang
SSE (رویدادهای ارسال شده توسط سرور) به طور گسترده در دنیای توسعه وب استفاده نمی شود، این مقاله به بررسی این موضوع می پردازد که SSE چیست، چگونه کار می کند و چگونه می تواند برای برنامه شما مفید باشد.

SSE یک راه ساده و کارآمد برای ارسال به‌روزرسانی‌های بلادرنگ از سرور به مشتری از طریق اتصال HTTP است. این بخشی از مشخصات HTML5 است و توسط تمام مرورگرهای وب مدرن پشتیبانی می شود. SSE بر اساس یک جریان داده یک طرفه است، جایی که سرور پیام هایی را برای مشتری ارسال می کند، اما مشتری نمی تواند پیام ها را به سرور ارسال کند.

SSE از یک فرمت مبتنی بر متن به نام “رویدادهای ارسال شده توسط سرور” برای ارسال داده ها به مشتری استفاده می کند. داده ها به صورت مجموعه ای از رویدادها ارسال می شوند که هر کدام شامل یک پیام و یک نوع رویداد اختیاری است. نوع رویداد برای تمایز بین انواع مختلف پیام ها استفاده می شود و به مشتری اجازه می دهد آنها را به طور متفاوتی مدیریت کند.

پروتکل SSE با ایجاد یک اتصال HTTP دائمی بین سرور و مشتری کار می کند. این اتصال تا زمانی که مشتری بخواهد به‌روزرسانی‌ها را از سرور دریافت کند، باز نگه داشته می‌شود. هنگامی که سرور داده های جدیدی برای ارسال دارد، یک پاسخ HTTP با نوع MIME ویژه «متن/رویداد-جریان» ارسال می کند.

پاسخ شامل یک سری رویداد است که هر کدام با یک کاراکتر خط جدید (“\n”) از هم جدا می شوند. هر رویداد دارای قالب زیر است:

event: [event type]\n
data: [message]\n\n

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فیلد “رویداد” اختیاری است و برای ارائه یک نام برای رویداد استفاده می شود. فیلد “داده” حاوی پیام واقعی در حال ارسال است. دو کاراکتر خط جدید در پایان هر رویداد برای نشان دادن پایان رویداد استفاده می شود.

در اینجا یک مثال از یک پاسخ ساده SSE آورده شده است:

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: Hello, world!

event: message
data: This is a test message.

event: customEvent
data: {“foo”: “bar”, “baz”: 123}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، ما سه رویداد را برای مشتری ارسال می کنیم. دو رویداد اول دارای نوع رویداد “پیام” هستند و حاوی پیام های متنی ساده هستند. رویداد سوم دارای نوع رویداد “customEvent” است و حاوی یک شی JSON به عنوان پیام خود است.

هنگامی که مشتری یک پاسخ SSE دریافت می کند، از داده ها برای به روز رسانی رابط کاربری خود استفاده می کند. این را می توان با استفاده از جاوا اسکریپت برای دستکاری DOM انجام داد.

پیاده سازی SSE در برنامه شما نسبتاً ساده است. در اینجا مثالی از نحوه پیاده سازی SSE با استفاده از Node.js و چارچوب Express آورده شده است:

const express = require(‘express’);
const app = express();

// Set up SSE endpoint
app.get(‘/events’, (req, res) => {
// Set headers
res.setHeader(‘Content-Type’, ‘text/event-stream’);
res.setHeader(‘Cache-Control’, ‘no-cache’);
res.setHeader(‘Connection’, ‘keep-alive’);
// Send initial event
res.write(‘data: Connected\n\n’);
// Set interval to send periodic events
const intervalId = setInterval(() => {
res.write(‘data: Hello, world!\n\n’);
}, 1000);
// Clean up on connection close
req.on(‘close’, () => {
clearInterval(intervalId);
});
});

// Start server
app.listen(3000, () => {
console.log(‘Server started on port 3000’);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، ما یک نقطه پایانی SSE را در “/events” تنظیم می کنیم. ما هدرهای لازم را برای SSE تنظیم می کنیم و یک رویداد اولیه برای مشتری ارسال می کنیم تا تأیید کنیم که اتصال برقرار شده است.

سپس یک فاصله زمانی برای ارسال رویدادهای دوره ای به مشتری در هر ثانیه تنظیم می کنیم. در نهایت، ما در حال تمیز کردن فاصله زمانی که اتصال توسط مشتری بسته می شود.

در سمت کلاینت، می‌توانیم از کد جاوا اسکریپت زیر برای گوش دادن به رویدادهای SSE استفاده کنیم:

const source = new EventSource(‘/events’);

source.addEventListener(‘message’, (event) => {
console.log(event.data);
});
source.addEventListener(‘error’, (event) => {
console.error(‘Error:’, event);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، ما یک شیء EventSource جدید ایجاد می کنیم و URL نقطه پایانی SSE خود را ارسال می کنیم. سپس به رویداد “پیام” گوش می دهیم و داده ها را در کنسول ثبت می کنیم. همچنین در صورت وجود هرگونه مشکل اتصال، به رویداد “خطا” گوش می دهیم.

توجه داشته باشید که EventSource مسیر در قسمت جلویی فقط می تواند توسط GET درخواست ها، اگر می خواهید استفاده کنید POST و سایر روش‌های HTTP، باید داده‌های پاسخ را خودتان تجزیه کنید.

اگر می خواهید یک پیاده سازی Node.js بومی داشته باشید، در اینجا یکی وجود دارد

SSE را می توان در طیف گسترده ای از برنامه های کاربردی که نیاز به به روز رسانی در زمان واقعی دارند استفاده کرد. در اینجا چند نمونه آورده شده است:

پلتفرم‌های رسانه‌های اجتماعی: از SSE می‌توان برای ارائه به‌روزرسانی‌های بلادرنگ برای پلتفرم‌های رسانه‌های اجتماعی، مانند اعلان‌های پیام‌ها، نظرات یا لایک‌های جدید استفاده کرد.
برنامه های مالی: SSE می تواند برای ارائه به روز رسانی های بلادرنگ برای برنامه های مالی مانند قیمت سهام، نرخ تبدیل ارز یا اخبار استفاده شود.
بازی آنلاین: SSE می‌تواند برای ارائه به‌روزرسانی‌های بی‌درنگ برای برنامه‌های بازی آنلاین، مانند اعلان رویدادهای بازی، امتیازات، یا رتبه‌بندی استفاده شود.

استفاده از SSE نسبت به سایر روش های ارتباطی بلادرنگ مانند نظرسنجی یا WebSockets مزایای متعددی دارد:

کارایی

SSE از یک اتصال HTTP مداوم استفاده می کند، به این معنی که هزینه سربار برقراری و حفظ اتصال بسیار کمتر از روش های دیگر است. این امر باعث می شود SSE کارآمدتر و کمتر به منابع نیاز داشته باشد، که به ویژه در هنگام برخورد با تعداد زیادی از مشتریان مهم است.

سادگی

SSE یک پروتکل ساده است که به راحتی قابل درک و پیاده سازی است. این به هیچ کتابخانه یا چارچوب خاصی نیاز ندارد و می تواند با استفاده از فناوری های وب استاندارد مانند جاوا اسکریپت و HTTP پیاده سازی شود.

قابلیت اطمینان

SSE یک پروتکل قابل اعتماد است که اتصال مجدد خودکار را در صورت قطع شدن شبکه فراهم می کند. این تضمین می‌کند که مشتری همچنان به‌روزرسانی‌ها را دریافت می‌کند، حتی اگر اتصال به طور موقت قطع شود.

رویدادهای ارسال شده از سرور (SSE) یک روش ساده و کارآمد برای ارسال به‌روزرسانی‌های بلادرنگ از یک سرور به مشتری از طریق اتصال HTTP است. این بخشی از مشخصات HTML5 است و توسط تمام مرورگرهای وب مدرن پشتیبانی می شود. SSE از یک جریان داده یک طرفه استفاده می کند، جایی که سرور پیام ها را برای مشتری ارسال می کند، اما مشتری نمی تواند پیام ها را به سرور ارسال کند. این شما را از نظرسنجی مداوم سرور برای رویدادها نجات می دهد، که نه تنها عملکرد را بهبود می بخشد بلکه پیچیدگی را نیز کاهش می دهد.

اگر این را مفید یافتید، لطفاً در نظر بگیرید مشترک شدن در خبرنامه من برای مقالات و ابزارهای مفیدتر در مورد توسعه وب. با تشکر برای خواندن!

event: [event type]\n
data: [message]\n\n

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: Hello, world!

event: message
data: This is a test message.

event: customEvent
data: {"foo": "bar", "baz": 123}

const express = require('express');
const app = express();

// Set up SSE endpoint
app.get('/events', (req, res) => {
  // Set headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  // Send initial event
  res.write('data: Connected\n\n');
  // Set interval to send periodic events
  const intervalId = setInterval(() => {
    res.write('data: Hello, world!\n\n');
  }, 1000);
  // Clean up on connection close
  req.on('close', () => {
    clearInterval(intervalId);
  });
});

// Start server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

const source = new EventSource('/events');

source.addEventListener('message', (event) => {
  console.log(event.data);
});
source.addEventListener('error', (event) => {
  console.error('Error:', event);
});