با عرض سلام خدمت کاربران سایت پی وی لرن . در ادامه دوره آموزش کامل HTML، و در مباحث آموزش API در HTML ، با موضوعات آموزشی موقعیت جغرافیایی در HTML و مبحث درگ کردن در HTML ، آشنا شدید. همچنین در آخرین مطالب آموزشی که ارائه شد، با تکنیک Web Workers د رHTML5 ، و چگونگی استفاده از کدهای جاوااسکریپت در این تکنیک نیز ، آشنا شدید. در ادامه فصل آموزشی API در HTML ، در این بخش ، قصد داریم به موضوع آموزشی آشنایی با چگونگی ارتباط با سرور در HTML و کد ارتباط با سرور در HTML ، بپردازیم.
رویداد Server-Sent در HTML ، اجازه می دهد که یک صفحه وب بروزرسانی جدید را از سرور دریافت کند.
پشتیبانی این ویژگی در مرورگرهای مختلف به صورت زیر است :
ویژگی API | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Web Storage | ۶٫۰ | پشتیبانی نمی شود! | ۶٫۰ | ۵٫۰ | ۱۱٫۵ |
server-sent زمانی رخ می دهد که ، یک صفحه وب بصورت خودکار بروزرسانی ها را از سرور دریافت می کند.
البته باید ابتدا چک کنید. که آیا بروزرسانی جدید در دسترس است.
با رویدادهای فرستاده شده توسط سرور، به روز رسانی ها به طور خودکار می آیند.
مثال: شی EventSource ، از server-sent برای دریافت اطلاعیه ها استفاده می کند:
1 2 3 4 | var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br>"; }; |
توضیح مثال بالا:
قبل از استفاده از server-sent ، ابتدا باید بررسی کنید که آیا مرورگر شما ، از server-sent ،پشتیبانی می کند یا خیر:
1 2 3 4 5 6 | if(typeof(EventSource) !== "undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. } |
اکنون باید در کد سمت سرور نیز ، فرآیند ارسال بروزرسانی ها را بنویسید:
مثال: در این مثال، کدهای لازم در سمت سرور، در زبان PHP ارائه شده است:
1 2 3 4 5 6 7 8 | <?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:
1 2 3 4 5 6 | <% Response.ContentType = "text/event-stream" Response.Expires = -1 Response.Write("data: The server time is: " & now()) Response.Flush() %> |
تشریح کدهای فوق:
در مثال های بالا ما از رویداد onmessage برای دریافت پیام ها استفاده می کنیم. اما رویدادهای دیگر نیز موجود است:
Events | Description |
---|---|
onopen | هنگامی که یک اتصال به سرور باز می شود. |
onmessage | هنگامی که پیام دریافت می شود. |
onerror | وقتی یک خطا رخ می دهد. |
در آخرین بخش از آموزش های فصل جاری و دوره HTML و HTML5 به مبحث پیاده سازی چگونگی ارتباط با سرور در HTML پرداختیم، که به شما اجازه می دهد اطلاعاتی را از سرور دریافت کرده و در کدهای HTML برای کاربران نمایش دهید.
امیدواریم که از آموزش های این دوره به خوبی استفاده کرده باشید، موفق و پیروز باشید.