بخش های اصلی

آموزش HTML 5

آموزش HTML 5 - رویدادهای فرستاده شده از سرور

رویدادهای فرستاده شده از سمت سرور در HTML5 به صفحه ی بصورت اتوماتیک وب امکان گرفتن اطلاعات، از وب سرور را میده.

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

SSE در HTML5 روشی جدید برای صفحه های وب  هستش تا با وب سرور ارتباط برقرار کنن. این امر با شیء XMLHttpRequest امکان پذیر میشه که به کد جاوا اسکریپت تان امکان ایجاد یک درخواست برای وب سرور را میده. این امر یک مبادله ی یکطرفه است – به این معنی که زمانی که وب سرور پاسخ را آماده کنه، ارتباط تمام میشه.

با این حال، در وضعیت هایی، صفحه های وب نیاز به ارتباطی طولانی مدت با وب سرور دارن. نمونه ای از این وضعیت، قیمت سهام در وب سایت های مالیاتیه که در آن قیمت ها به صورت اتوماتیک به روز میشن. مثال دیگر، اجرای رویداد های اخیر اخبار در رسانه های وب سایت های مختلفه.

می توانید چنین کارهایی را با ویژگی رویدادهای فرستاده شده از سمت سرور در HTML5 انجام بدین. این کار به صفحه های وب امکان نگهداشتنِ ارتباط با وب سرور را میده، بنابراین وب سرور می تواند در هر زمانی بصورت خودکار پاسخی جدید ارسال کنه و نیازی به برقراری دوباره ی ارتباط و اجرای دوباره ی سرور اسکریپت بصورت دوباره و دوباره، نیست.

نکته: تمام مرورگرهای مطرح و مدرن مثال Firefox، Chrome، Opera وSafariبه جزInternet Explorer  از ویژگی ِ رویدادهای فرستاده شده از سمت سرور در HTML5 پشتیبانی می کنن.

فرستادن پیام با سرور اسکریپت

بیاین یک فایل PHP به نام ‘server_time.php’ ایجاد کنیم و اسکریپتِ زیر را در آن وارد کنیم. این کار بسادگی، زمان جاریِ ساعت داخلیِ وب سرور را در بازه های زمانی مشخص، گزارش میده. بعداً این زمان را دریافت خواهیم کرد و بر اساس آن صفحه ی وب را به روز رسانی خواهیم کرد.

مثال

دانلود

<?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 . "nn";
flush();
?>

دو خط اولِ PHP script دو عنوانِ مهم را تنظیم می کنه. اول، نوع MIME را بصورت text/event-stream تنظیم می کنه، که برای استاندارد رویداد سمت سرور ضروریه. خط دوم به وب سرور میگه ذخیره سازی در حافظه ی نهان را غیرفعال کنه، در غیر این صورت، ممکنه خروجیِ اسکریپت تان در حافظه ی نهان ذخیره بشه.

هر پیامی که از طریق رویدادهای فرستاده شده از سمت سرور فرستاده میشه باید با “data:” شروع بشه و با متن اصلیِ پیام و کاراکتر خط جدید ("nn")دنبال بشه.

در آخر از تابع PHP، flush() استفاده میکنیم تا اطمینان حاصل کنیم که داده ها به روشی صحیح ارسال شده باشن، بجای این که بافر بشن تا زمانی که کدِ PHP کامل بشه.

پردازش پیام در صفحه ی وب

شیء EventSource برای دریافت پیام های رویداد فرستاده شده از سمت سرور استفاده میشه. بیاین یه سند HTML به نام 'demo_sse.html' ایجاد کنیم و آن را در پوشه ی پروژه، جایی که فایل 'server_time.php' قرار داره، بذاریم. این سند HTML به سادگی زمان جاری گزارش شده توسط وب سرور را دریافت کرده و به کاربر نمایش میده.

مثال

دانلود

<!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>

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد