در جلسه قبلی آموزش HTML با Web Worker در html5 آشنا شدیم. در این بخش به SSE در html5 خواهیم پرداخت.
رویدادهای فرستاده شده از سمت سرور (Server-Sent Events) در HTML5 به صفحه بصورت اتوماتیک وب امکان گرفتن اطلاعات، از وب سرور را میدهد.
رویدادهای فرستاده شده از سمت سرور چیست
SSE در HTML5 روشی جدید برای صفحه های وب است تا با وب سرور ارتباط برقرار کند. این امر با شیء XMLHttpRequest امکان پذیر می باشد که به کد جاوا اسکریپت تان امکان ایجاد یک درخواست برای وب سرور را میدهد.
این امر یک مبادله ی یکطرفه است – به این معنی که زمانی که وب سرور پاسخ را آماده کند، ارتباط اتمام می یابد.
با این حال، در وضعیت هایی، صفحه های وب نیاز به ارتباطی طولانی مدت با وب سرور دارند. نمونه ای از این وضعیت، قیمت سهام در وب سایت های مالیاتیه که در آن قیمت ها به صورت اتوماتیک به روز میشوند.
مثال هایی دیگر برای این رویدادهای دریافتی عبارتند از :
- تغییر عناوین خبرها
- نتایج ورزشی
- تغییر در شاخص ها ونمودارهای سایت های اقتصادی و قیمت ارز
- نوشتن چت آنلاین (قسمت پشتیبانی سایتها) که نیاز به ارسال و دریافت خیلی سریع نیست.
- دریافت تعداد یوزرهای آنلاین و یا آپدیت تعداد بازدید مطالب.
- نمایش کامنتهای جدید
می توانید چنین کارهایی را با ویژگی رویدادهای فرستاده شده از سمت سرور در HTML5 انجام بدید. این کار به صفحه های وب امکان نگه داشتنِ ارتباط با وب سرور را میدهند،
بنابراین وب سرور می تواند در هر زمانی بصورت خودکار پاسخی جدید ارسال کند و نیازی به برقراری دوباره ی ارتباط و اجرای دوباره ی سرور اسکریپت بصورت دوباره و دوباره، نیست.
نکته: تمام مرورگرهای مطرح و مدرن مثال Firefox، Chrome، Opera وSafari به جزInternet Explorer از ویژگی ِ رویدادهای فرستاده شده از سمت سرور در HTML5 پشتیبانی می کنند.
مزیت رویدادهای فرستاده شده از سمت سرور
- اجرا و پیاده سازیش در حد نوشتن چند خط ساده جاوااسکریپته.
- نیاز به هیچ فایل و یا پلاگین اضافه ای نداره.
- یادگیریش خیلی خیلی راحته و نیاز به خوندن صدها خط داکیومنت نداره.
- چون native ساپورت میشه بصورت کاملا بهینه نوشته شده و با سرور ارتباط برقرار میشه.
- جایگزین عالی برای Ajax نوشتن در جی کوئری و یا خود جاوااسکریپت (البته ساز و کار همونه ولی بهتر و سریعتر).
فرستادن پیام با سرور اسکریپت
بیایید یک فایل PHP به نام ‘server_time.php’ ایجاد کنیم و اسکریپتِ زیر را در آن وارد کنیم.این کار به سادگی، زمان جاریِ ساعت داخلیِ وب سرور را در بازه های زمانی مشخص، گزارش میدهد.
بعداً این زمان را دریافت خواهیم کرد و بر اساس آن صفحه ی وب را به روز رسانی خواهیم کرد.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php header("Content-Type: text/event-stream"); header("Cache-Control: no-cache"); // Get the current time on server $currentTime = date("h:i:s", time()); // Send it in a message echo "data: " . $currentTime . "\n\n"; flush(); ?> |
دو خط اولِ PHP script دو عنوانِ مهم را تنظیم می کند.
- خط اول، نوع MIME را بصورت
text/event-streamتنظیم می کنه، که برای استاندارد رویداد سمت سرور ضروری است. - خط دوم به وب سرور میگه ذخیره سازی در حافظه ی نهان را غیرفعال کنه، در غیر این صورت، ممکنه خروجیِ اسکریپت تان در حافظه ی نهان ذخیره بشه.
هر پیامی که از طریق رویدادهای فرستاده شده از سمت سرور فرستاده میشه باید با data: شروع بشه و با متن اصلیِ پیام و کاراکتر خط جدید "n\n\" دنبال بشه.
در آخر از تابع flush() استفاده میکنیم تا اطمینان حاصل کنیم که داده ها به روشی صحیح ارسال شده باشن، بجای این که بافر بشن تا زمانی که کدِ PHP کامل بشه.
پردازش پیام در صفحه ی وب
شیء EventSource برای دریافت پیام های رویداد فرستاده شده از سمت سرور استفاده میشه. بیاین یه سند HTML به نام ‘demo_sse.html‘ ایجاد کنیم و آن را در پوشه ی پروژه، جایی که فایل ‘server_time.php‘ قرار داره، بذاریم. این سند HTML به سادگی زمان جاری گزارش شده توسط وب سرور را دریافت کرده و به کاربر نمایش میده.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5 Server-Sent Events</title> <script type="text/javascript"> window.onload = function(){ var source = new EventSource("server_time.php"); source.onmessage = function(event){ document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>"; }; }; </script> </head> <body> <div id="result"> <!--Server response will be inserted here--> </div> </body> </html> |
تفاوت SSE با Websocket
وبسوکت (WebSocket) یک ارتباط دوطرفه کلاینت سرور است، ولی SSE تقریبا یکطرفست و شما کنترل زیادی در نحوه برقراری ارتباط با سرور ندارید. خود SSE با سرور سینک میشه و اگه اتفاقی (Event) که مشخص شده افتاد بهتون خبر میده.
تفاوت SSE با AJAX
برخلاف ajax که نیاز هست مرتب و توی بازه های زمانی مشخص سمت سرور رو چک کرد، SSE بصورت اتوماتیک و از طریق کانکشنهای HTTP مرورگر رو بروزرسانی میکند.
یعنی عملا اتفاقی نمیفته مگر اینکه سرور به مرورگر کانکشنی بزنه و این رو اطلاع بده. این باعث میشه به مراتب سرعت کار بالاتر بره و منابع کمتری مصرف بشه.
امیدوارم در این بخش آموزش HTML , از SSE در html5 نهایت استفاده را برده باشید.
در بخش بعدی با موقعیت جغرافیایی در HTML آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
سلامو خسته نباشید .
الان این sse رو من برای دریافت سفارشات جدید در قسمت پنل مدیریت میخام.
میخام وقتی مشتری ثبت سفارش می کنه من متوجه بشم و صفحه صفارشات آپدیت بشه
چطوری استفاده کنم ازش
سلام. ممنون.
آموزش رو کامل انجام بدید هر جایی مشکلی خطایی داشت بفرمایید راهنمایی میشه
همینطوری دستورای شما رو می نویسم که خطا نداره.
ببینید الان این فایل فقط تایم سرور رو می فرسته.آیا می شه از این روش برای زمانی که مشتری سفارش ثبت می کنه استفاده کرد ؟
یعنی وقتی مشتری سفارش ثبت می کنه ما این طرف در پنل مدیریت سفارشات متوجه بشیم ؟
می تونید کمکم کنید ؟
این مورد رو باید با اسکریپت سمت سرور ترکیب کنید:
https://stackoverflow.com/questions/14564903/server-sent-events-and-php-what-triggers-events-on-the-server
مقاله بسیار خوبی بود حسن جان ولی میتونست جامع تر باشه.
سلام. ممنون. خیلی خوشحالم که مفید واقع شده.
چشم سعی میشه یک بروزرسانی و اصلاحاتی برای افزودن اطلاعات بیشتر به مقاله اضافه بشه .
موفق و پیروز باشید.