شما ، پلی که نیازی به نیازهای نیاز ندارید.

خانه Github

شما ممکن است به WebSockets نیاز نداشته باشید: قدرت ساده رویدادها با یک سرور

همیشه چند ابزار ستاره در جعبه ابزار ما وجود دارد. 🛠 در ارتباطات وب وب در زمان واقعی ، WebSocket بدون شک درخشان ترین ستاره است. این قدرتمند است ، ارتباطات دو راه را حفظ می کند و تقریباً برای تمام نیازهای واقعی به یک “پاسخ پیش فرض” تبدیل شده است. بنابراین وقتی یک مدیر محصول به شما می آید و می گوید ، “سلام ، ما به یک هیئت مدیره نیاز داریم که در زمان واقعی به روز شود!” اولین چیزی که در ذهن بسیاری از برنامه نویسان قرار می گیرد این است: “خوب ، بیایید از WebSockets استفاده کنیم!”

اما ، کمی صبر کنید. ✋ مانند یک زمان قدیمی که ده ها سال است که در این دنیا حرکت می کند ، می خواهم بپرسم: آیا ما همیشه به “چاقوی ارتش سوئیس” برای پوست کردن سیب احتیاج داریم؟ 🍎

من سناریوهای زیادی را دیده ام که در آن یک ویژگی ساده که فقط به داده های یک طرفه نیاز دارد تا از سرور به مشتری فشار بیاورد-به عنوان یک اعلان های سایت ، قیمت قیمت سهام یا نتایج ورزشی از Live-On در WebSocket کامل Duplex. این فقط استفاده از سایه بان برای ترکیدن یک مهره نیست. این یک گودال پیچیدگی برای خودتان است. امروز می خواهم پرونده ای را برای یک شخصیت کم ارزش دیگر انجام دهم: رویدادهای سرور (SSE)S این ساده ، مؤثر و در بسیاری از سناریوها است – یک راه حل ظریف تر و مناسب تر از شبکه های وب.

دو تصور غلط رایج برای “زمان واقعی”

قبل از پذیرش SSE ، بیایید به دو توسعه دهنده گودال مشترک که سعی در دستیابی به “پرس سرور” دارند ، نگاهی بیندازیم.

بازپرداخت بدبختی 1: زیبایی شناسی “قدرت براک” نظرسنجی توسط مشتری

این بدوی ترین و بصری ترین روش است. مشتری تایمر را تنظیم می کند و هر چند ثانیه درخواست AJAX را به سرور می فرستد ، می پرسد ، “سلام ، دوست من ، آیا داده های جدیدی دارید؟”

// The polling nightmare 😫
setInterval(async () => {
  try {
    const response = await fetch('/api/updates');
    const data = await response.json();
    // Update the UI with the new data
    console.log('New data:', data);
  } catch (error) {
    console.error('Error fetching updates:', error);
  }
}, 5000); // Ask every 5 seconds

مشکلات این رویکرد بسیار واضح است:

1. بالایی: ممکن است کاربر برای دیدن به روزرسانی تا 5 ثانیه صبر کند. آیا می خواهید تأخیر را کاهش دهید؟ فاصله را کوتاه کنید؟ این فشار بیشتری به سرور وارد می کند.
2. منابع مرتکب شده: بیشتر درخواست ها احتمالاً دست خالی بازگردانده می شوند زیرا داده ها در هر لحظه به روز نمی شوند. هر درخواست ، با یا بدون داده های جدید ، هزینه کامل عناوین HTTP را شامل می شود. مثل این است که هر پنج دقیقه با کسی تماس بگیرید تا بپرسید “آیا شام آماده است؟” آزار دهنده و ناکارآمد. 📞
3. مقیاس: تصور کنید هزاران مشتری خستگی ناپذیر سرور خود را مانند این “آزار” می کنند. سرور شما تعداد زیادی پردازنده و منابع شبکه این دست و درخواست های تکراری ، خالی را می سوزاند.

گمراهی 2: “بیش از حد” از وب سایت ها

برای حل مشکلات نظرسنجی ، بسیاری از توسعه دهندگان به طور طبیعی به وب سایت ها روی می آورند. این یک اتصال ثابت و دو راه را ایجاد می کند ، که به سرور اجازه می دهد تا در هر زمان به طور فعال داده ها را فشار دهد. عالی! 🎉

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

مهمتر از همه ، شما می توانید سهواً منطق برنامه خود را دوباره تقسیم کنید (همانطور که در مقاله قبلی بحث کردیم). شما می توانید مجموعه ای از منطق جداگانه برای پردازش WebSockets ایجاد کنید وقتی که می تواند کاملاً با منطق HTTP موجود شما یکپارچه شود.

ظرافت SSE: بازگشت به قلب HTTP

حال ، بیایید از شخصیت اصلی امروز استقبال زیادی کنیم: SSE. SSE یک جادوی سیاه کاملاً جدید نیست. این بخشی از پروتکل HTTP ، استاندارد W3C است. ایده اصلی او برای افراطی ساده است: مشتری درخواست GET را آغاز می کند ، سرور به این اتصال پایبند است و سپس داده ها را به طور مداوم “جریان” را از طریق این اتصال به مشتری می اندازد.

این مانند یک تماس تلفنی است که هرگز بسته نمی شود. مشتری فقط گوش می دهد و سرور صحبت می کند. این مسئله کاملاً مشکل انگیزه داده های یک طرفه را حل می کند و کاملاً در بالای پروتکل استاندارد HTTP کار می کند.

استفاده از نقطه پایانی SSE در Hyperlane یک تکه کیک است. این کد را ببینید:

use crate::{tokio::time::sleep, *};
use std::time::Duration;

pub async fn sse_route(ctx: Context) {
    // 1. Set the correct Content-Type to tell the browser this is an event stream
    let _ = ctx
        .set_response_header(CONTENT_TYPE, TEXT_EVENT_STREAM)
        .await
        .set_response_status_code(200)
        .await
        .send() // Send the headers first to establish the connection
        .await;

    // 2. Enter a loop to continuously push data
    for i in 0..10 {
        // Construct the `data:` field according to the SSE specification
        let event_data = format!("data: Event number {}{}", i, HTTP_DOUBLE_BR);

        // 3. Use our familiar send_body to send the event
        let _ = ctx
            .set_response_body(event_data)
            .await
            .send_body()
            .await;

        // Simulate waiting for new data
        sleep(Duration::from_secs(1)).await;
    }

    // 4. When we want to end, we just close the connection
    let _ = ctx.closed().await;
    println!("SSE stream finished.");
}

این کد به اندازه یک شعر زیبا است. 😍 بیایید از ظرافت او لذت ببریم:

• این فقط http است: این یک مسیر HTTP استاندارد است. این به چه معنی است؟ این بدان معنی است که ما می توانیم از تمام دانش هایی که قبلاً داریم استفاده کنیم! ما می توانیم اضافه کنیم auth_middleware برای احراز هویت ، log_middleware برای ثبت نام امنیت و مدیریت آن یکپارچه در سیستم HTTP موجود ادغام شده است.
• API متحد: ببینید send_body()؟ او برگشت! Hyperlane از یک API واحد برای پردازش انواع عملیات “ارسال” استفاده می کند ، خواه یک پاسخ HTTP ، پیام WebSocket یا یک رویداد باشد. این دنباله به طرز چشمگیری باعث کاهش سربار ذهنی توسعه دهنده می شود.
• ساده و واضح: همه منطق کاملاً واضح است. عناوین را تنظیم کنید -> ارسال هدرها -> چرخه و ارسال بدنه های داده -> اتصال بسته. هیچ جادویی وجود ندارد و همه چیز تحت کنترل است.

اکنون به کد مشتری نگاه کنید ، که این نیز مسخره است:

// The browser's native EventSource API
const eventSource = new EventSource('http://127.0.0.1:60000/sse');

// Callback for when the connection is successfully opened
eventSource.onopen = function (event) {
  console.log('SSE Connection opened. Waiting for events... 📡');
};

// Callback for when a message is received
eventSource.onmessage = function (event) {
  // event.data is the content of the `data:` field sent by our server
  console.log('Received event:', event.data);
};

// Callback for when an error occurs
eventSource.onerror = function (event) {
  if (event.target.readyState === EventSource.CLOSED) {
    console.log('SSE Connection was closed. 👋');
  } else {
    console.error('SSE Error occurred:', event);
  }
};

و بهترین قسمت؟ او EventSource API Potile به طور خودکار از اتصال مجدد پشتیبانی می کند! 🤯 اگر اتصال به دلیل شبکه شبکه قطع شود ، مرورگر به طور خودکار سعی می کند در عرض چند ثانیه دوباره به هم وصل شود. شما باید تقریباً برای این قدرت کد اضافی بنویسید. این اثری است که نیاز به معرفی دستی منطق ضربان قلب و تقویت در وب سایت ها دارد!

ابزار مناسب را به جای مشهورترین انتخاب کنید

من نمی گویم که SSE می تواند به طور کامل WebSockets را جایگزین کند. وقتی برنامه شما نیاز دارد مشتری برای ارسال داده به سرور فرکانس بالایا نیاز به ارتباط دو طرفه پیچیده دارد ، WebSockets هنوز پادشاه غیرقابل انکار است. 👑

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

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

بنابراین دفعه بعد که با نیاز به زمان واقعی روبرو می شوید ، لطفاً متوقف شوید و فکر کنید: آیا من واقعاً به یک گاو کامل احتیاج دارم یا یک لیوان شیر تازه است؟ انتخاب عاقلانه ای انجام دهید و متوجه خواهید شد که کد شما ساده تر است ، سیستم شما پایدارتر است و بسیار خوشحال تر هستید. 😌

خانه Github

Source link