آموزش طراحی سایتآموزش HTML

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

آموزش رویداد های ارسالی سرور در 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هنگام برخوردن به یک خطا

نتیجه گیری

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

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

برچسب ها

علی اسمعیلی

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

نوشته های مشابه

‫2 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر