شنبه ۳۱ شهريور ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش HTML - SSE

HTML SSE (Server-Sent Events) API یک فناوری سمت سرویس گیرنده است که به برنامه های کاربردی وب امکان می دهد تا به روز رسانی های بلادرنگ را از یک سرور از طریق یک اتصال طولانی مدت، بدون نیاز به درخواست از کاربر یا راه حل های دیگر دریافت کنند. SSE به توسعه دهندگان وب اجازه می دهد تا داده ها را از سرور به کاربر به روشی مقیاس پذیر، کارآمد و قابل اعتماد انتقال دهند.

SSE با ایجاد یک ارتباط دائمی بین کاربر و سرور و ارسال رویدادها به عنوان پیام‌های متنی ساده از طریق این اتصال کار می‌کند. سرور می‌تواند در هر زمانی پیام‌هایی را برای کاربر ارسال کند، بدون اینکه کاربر مستقیما آنها را درخواست کند.

در اینجا یک مثال ساده از نحوه استفاده از HTML SSE API آورده شده است:

<!DOCTYPE html>
<html>
<head>
	<title>SSE Example</title>
	<script>
		// Create a new EventSource object and specify the URL of the server endpoint
		var source = new EventSource("server.php");

		// Listen for messages from the server
		source.onmessage = function(event) {
			// Display the message in the page
			document.getElementById("result").textContent = event.data;
		};
	</script>
</head>
<body>
	<p id="result"></p>
</body>
</html>

این مثال یک شیء EventSource جدید را با استفاده از سازنده EventSource ایجاد می‌کند و به آن نشانی اینترنتی نقطه پایانی سرور ("server.php") ارسال می‌کند که پیام‌های SSE را برای مشتری ارسال می‌کند. سپس با استفاده از کنترل کننده رویداد onmessage به پیام های سرور گوش می دهد.

هنگامی که سرور یک پیام SSE را برای مشتری ارسال می کند، پیام در مدیریت رویداد onmessage دریافت می شود که محتوای پاراگراف "نتیجه" را با داده های دریافتی به روز می کند.

در اینجا نمونه ای از اسکریپت سمت سرور ("server.php") است که پیام های SSE را به مشتری ارسال می کند:

<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");

// Send a message every 5 seconds
while (true) {
	$message = "Server time: " . date("H:i:s");
	echo "data: {$message}\n\n";
	ob_flush();
	flush();
	sleep(5);
}
?>

این اسکریپت هر 5 ثانیه یکبار پیام های SSE را به مشتری ارسال می کند که شامل زمان سرور فعلی به عنوان یک پیام متنی ساده است. پیام ها با استفاده از فیلد داده ارسال می شوند و به دنبال آن یک کاراکتر دو خط جدید (\n\n) برای نشان دادن پایان پیام ارسال می شود.

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