%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

تبلیغات

SSE چیست؟

SSE مخفف کلمات Server-Sent Events است و امکان دریافت پیام های یک طرفه از سمت سرور بصورت اتوماتیک را فراهم می کند.


(SSE (Server-Sent Events - پیام های یک طرفه

SSE قابلیت جدیدی در Html5 است که به مرورگر این امکان را می دهد تا Updateهای ارسالی از طرف سرور را دریافت کند.

این قابلیت در گذشته بصورت دیگری وجود داشته است، هر زمان که Updateی ایجاد می شد صفحه وب برای دریافت Update مجبور بود آنرا درخواست نماید. اما با SSE این کار بصورت اتوماتیک و پشت پرده صورت می گیرد.

مثال هایی از SSE: تغییر عناوین خبرها، نتایج ورزشی، تغییر در شاخص ها و نمودارهای سایت های اقتصادی و ...


پشتیبانی مرورگرها

 Firefox Opera Google Chrome Safari

مرورگرهای Firefox, Opera, Chrome, Safari امکان دریافت پیام های یک طرفه از سمت سرور را پشتیبانی می کنند.

توجه: Internet Explorer امکان ارسال پیام های یکطرفه را پشتیبانی نمی کند.


دریافت اطلاعات ارسالی از سرور

شیء EventSource برای دریافت اطلاعات در Updateهای ارسالی از طرف سرور به کار می رود.

بلافاصله بعد از ایجاد شیء EventSource، این شیء تمام رویدادهایی که در URL تنظیم شده اتفاق می افتد را گوش می دهد (Listening).

شکل کلی استفاده از این شیء بصورت زیر است:

مثال (SSE چیست؟)

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "<br>";
  };
خودتان امتحان کنید »

توضیح کد بالا: 

  • در خط اول یک شی جدید EventSource با نام source ایجاد کرده و صفحه demo_sse.php را به عنوان URL یا آدرس فایلی که Update را به صفحه ارسال می کند تعیین کرده ایم.
  • - هر زمان که Update جدیدی دریافت شود رویداد onmessage اجرا می شود.
  • - هر زمان که رویداد onmessage اجرا می شود نتیجه خروجی در عنصر با id معادل "result" به روز رسانی می شود. (آپدیت ارسالی در شی event.data قرار دارد)

چک کردن پشتیبانی مرورگر از SSE

بهتر است قبل از هر چیز پشتیبانی مرورگر از SSE را بررسی کنیم تا در هر حالت کد خود را بر مبنای آن بنویسیم.

قطعه کد زیر بررسی می کند که آیا مرورگر از متد SSE پشتیبانی می کند یا خیر و کد لازم را در هر صورت اجرا می نماید:

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

کد سمت سرور

برای اینکه مثال بالا عمل کند باید صفحه ای وجود داشته باشد که قابلیت تولید و ارسال Update را داشته باشد. برای مثال یک صفحه PHP یا ASP

کد سمت سرور برای ارسال آپدیت بسیار ساده است. کافی است در صفحه PHP یا ASP، مقدار خاصیت Content-Type صفحه را بر روی مقدار text/event-stream تنظیم نمایید. حالا می توانید جریان ارسال اطلاعات را شروع نمایید.

کد 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 به زبان VB:

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

توضیح کد:

  • مقدار خاصیت Content-Type صفحه را بر روی مقدار text/event-stream تنظیم نمایید.
  • مشخص نمایید که صفحه نباید اطلاعات را Cashe (ذخیره) نماید.
  • داده ها را برای ارسال آماده نمایید، همواره با کلمه data شروع می شود.
  • با استفاده از متد ()Flush، نتیجه را به صفحه درخواست کننده ارسال نمایید.

شیء EventSource

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

رویداد توضیحات
onopen

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

onmessage

زمانی اتفاق می افتد که یک پیام دریافت شود.

onerror

زمانی که یک خطا رخ دهد اتفاق می افتد.

دیدگاه‌ها  

+11 # مهدی رحیمی 1393-12-29 15:58
با عرض سلام خیلی ممنون از زحماتی که برای این سایت کشیده اید

پیشنهادی که بنده دارم اینه پس از آموزش هر زبان یه آزمونی گذارده شود که خودمان را محک بزنیم

با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # میلاد نظری 1393-11-22 22:58
اقای پهلوان من تقریبا تمام زبان هایی که برا طراحی سایت نیاز هست را خوندم و در حال مرور هستم که شروع به طراحی کنم
فقظ یه سوال داشتم اگه بخواهیم جای تگهای HTML را جابه جا کنیم باید چیکار کنیم ...
مثلا منو بالای همین سایت رو نگاه کنید اگر بخوایم لینک HTML به جای "خانه" باشه یعنی جاشون عوض شه باید کد HTML تگ li که "HTML" درونش قرار داره بیاد قبل تگ li که خانه درونش قرار داره این کار رو با php باید انجام بدیم یا با Java script میدونم که نوشتن کدش ممکنه طولانی بشه ولی فقط یه راهنمایی کنید خودم پیداش میکنم ؟؟؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-11-23 09:54
آقا میلاد بهت تبریک میگم، امیدوارم که از دانش ات استفاده کامل رو ببری ...
و اما جابه جا کردن منوی "خانه" با "HTML" ...!?
1- آیتم های منو بصورت داینامیک تولید می شوند:
در این صورت داده های منو از جدولی در پایگاه داده خوانده و نمایش داده می شوند، در این حالت فیلدی با عنوان "Order" وجود دارد که ترتیب منوها را مشخص می کند، که با استفاده از آن می توان محل قرار گیری منوها در صفحه را تغییر داد.
2- آیتم های منو بصورت استاتیک تولید می شوند:
در این صورت کدی مانند زیر برای نمایش منو وجود دارد:<ul id='menu'>
<li><a href='#'>خانه</a></li>
<li><a href='#'>HTML</a></li>
<li><a href='#' >CSS</a></li>
<li><a href='#' >JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href='#'>SQL</a></li>
<li><a href='#'>ASP>NET</a></li>
</ul>
برای مثال اگر بخواهیم جای منوی "خانه" را با "HTML" عوض کنیم، فقط کافی است، liهای مربوطه را جابه جا کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # میلاد نظری 1393-11-23 10:42
در مورد منوها درست ولی اگر بخواهیم جای یک div که عناصر زیادی هم توش هست رو تغیر بدیم باید چیکار کنیم؟ برای روشن شدن سوالم به سایت www.downloadha.com برید وقتی زوم میکنیم قسمت سمت راست که فکر میکنم درون تگ div باشه میره بعد از قسمت متن اصلی و وقتی زوم میشه به جای اینکه قسمت سمت راست اول قرار بگیره قسمت وسط اول قرار میگیره به نظرتون چیکار باید کرد برای انجام این کار؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # امیر پهلوان صادق 1393-11-23 10:52
این کار با Bootstrap انجام شده ...!
bootstrap یک فریم ورک است. یک مجموعه ای از کلاس های css که از پیش تعریف شده اند تا شما بتوانید به راحتی سایت ها و قالب های خود را بصورتی که در بالا مطرح شد، طراحی کنید.
bootstrap را عده ای از برنامه نویسان سایت Twitter ساخته اند و آن را برای استفاده عموم قرار داده اند.
برای اطلاعات بیشتر به لینک روبرو مراجعه کنید: twitter.github.com/bootstrap/
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # میلاد نظری 1393-11-23 10:58
واقعا ممنونم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # میلاد نظری 1393-11-22 14:47
سلام خسته نباشید سایت خیلی خوبی دارید واقا عالی هست


فقط یه درخواست داشتم که ایمیل هم فرستادم ولی جوابی نگرفتم

اگه میشه ترجمه اموزش xml هم در سایتتون قرار بدید این اموزش ها در سایت w3school قرار داره
با تشکر از شما
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-11-22 17:11
سلام، ترجمه قسمت XML از سایت w3schools در برنامه کاری آینده مون قرار گرفت.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # میلاد نظری 1393-11-22 18:34
بی نهایت از شما ممنونم واقعا نمیدونم چی بگم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی