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