آشنایی با SSE در HTML

آموزش رویداد های ارسالی سرور در HTML

آشنایی با SSE در HTML
آشنایی با SSE در HTML

منظور از رویداد های ارسالی سرور چیست؟ منظور از SSE چیست؟ چگونه می‌توانیم از SSE در HTML استفاده کنیم؟ SSE چیست؟ منظور از API SSE چیست؟ در این مقاله می‌خواهیم در رابطه با رویداد های ارسال شده سرور یا SSE صحبت کنیم.

رویداد های ارسال شده سرور یا sse

رویداد های ارسال شده سرور اجازه می دهند تا یک صفحه از سرور به روز شود.

یک رویداد ارسال شده سرور زمانی اتفاق می افتد که صفحه وب به صورت خودکار از سمت سرور به روز شود. این آپدیت ها قبلا هم امکان پذیر بود اما صفحه وب باید یک درخواست برای سرور ارسال می کرد تا اطلاعات به روز در دسترس را دریافت کند. توسط sse این به روز رسانی ها به صورت یک طرفه و خودکار انجام می شود.

نمونه های sse : facebook/twitter، به روز رسانی قیمت ارز و طلا، خبرخوان ها، اخبار ورزشی و …

دریافت اعلان های sse

از آبجکت eventsource برای دریافت اعلان های sse استفاده می شود.

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

ساخت یک آبجکت eventsource جدید و تعیین url صفحه که آپدیت ها از آن ارسال می شوند.

هر بار که یک آپدیت دریافت می شود، رویداد onmessage اجرا می شود.

هنگامی که رویداد onmessage اتفاق می افتد، داده های دریافت شده برروی عنصر با شناسه result قرار می گیرند.

بررسی پشتیبانی sse

از کد های زیر برای بررسی پشتیبانی مرورگر کاربر برای قابلیت sse استفاده می شود.

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}

مثال کد سمت سرور

برای به کار انداختن مثال بالا، باید یک سرور توانا در ارسال داده استفاده کنید(php یا asp)

قواعد ارسال داده مستمر سمت سرور ساده هستند. با تنظیم مقدار content-type به “text/event-stream”، شما می توانید اقدام به ارسال داده کنید.

کد های php در فایل (demo_sse.php)

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

کد در asp  (فایل demo_sse.asp)

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

خط اول برای تنظیم content-type به “text/event-steam” استفاده شده است.

خط دوم برای نتظیم تعیین صفحه ای که نباید داده ها را در cache ثبت کند.

در خط سوم برای تنظیم خروج داده ها برای ارسال (همیشه با عبارت “data: ” شروع می شود.) از Write استفاده شده است.

و در خط آخر هم برای تراز کردن داده ها به سمت صفحه وب از Flush استفاده شده است.

آبجکت eventsource

در مثال بالا ما از رویداد onmessage برای دریافت پیام ها استفاده کردیم، اما رویداد های دیگری نیز در دسترس هستند:

رویداد توضیح
Onopen هنگام باز شدن یک اتصال به سرور
Onmessage هنگام دریافت داده از سرور
onerror هنگام برخوردن به یک خطا

پایان ترم

[box type=”info” class=”question-from-users” width=””]

SSE در چه مواردی استفاده می‌شود؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

در این مقاله با API جدید در HTML5 مربوط به سرور ها یعنی SSE آشنا شدیم. امیدوارم از این مقاله از سری آموزش‌های HTML استفاده کرده باشید.

اگر سوالی، پیشنهاد یا انتقادی داشتید، آن را با من درمیان بگذارید و من در اولین فرصت به آن پاسخ خواهم داد. تا مقاله بعدی فعلا…

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

5 نظر

5 پاسخ

  1. امار ها نوسانات خبری تیتر ها مجله ها ارز وطلا مورد استفاده قرار میگیرد

  2. پاسخ سوال :
    بروز کردن تیترهای خبری
    نوشتن چت آنلاین که نیاز به ارسال و دریافت خیلی سریع نباشد.
    بروز کردن اطلاعاتی مثل قیمت نرخ ارز و …
    نمایش کامنتهای جدید
    تعداد کاربران آنلاین
    آپدیت تعداد بازدید مطالب
    و….

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=