منظور از رویداد های ارسالی سرور چیست؟ منظور از 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 استفاده کرده باشید.
اگر سوالی، پیشنهاد یا انتقادی داشتید، آن را با من درمیان بگذارید و من در اولین فرصت به آن پاسخ خواهم داد. تا مقاله بعدی فعلا…
5 پاسخ
امار ها نوسانات خبری تیتر ها مجله ها ارز وطلا مورد استفاده قرار میگیرد
پاسخ سوال :
بروز کردن تیترهای خبری
نوشتن چت آنلاین که نیاز به ارسال و دریافت خیلی سریع نباشد.
بروز کردن اطلاعاتی مثل قیمت نرخ ارز و …
نمایش کامنتهای جدید
تعداد کاربران آنلاین
آپدیت تعداد بازدید مطالب
و….
سلام محمد ممنون از توضیحات خوبت. درست گفتی.
عااااااالی بود. خیلی ممنون
سلامت باشی میلاد.