HTML Server-Sent ਈਵੈਂਟ

Server-Sent ਈਵੈਂਟ ਵੈੱਬਸਾਈਟ ਨੂੰ ਸਰਵਰ ਤੋਂ ਅੱਪਡੇਟ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ。

Server-Sent ਈਵੈਂਟ - ਏਕ ਤਰਫ਼ ਸੰਦੇਸ਼ ਭੇਜਣਾ

Server-Sent ਈਵੈਂਟ ਇਹ ਹੈ ਕਿ ਵੈੱਬਸਾਈਟ ਸਵੈਚਾਲਿਤ ਤੌਰ 'ਤੇ ਸਰਵਰ ਤੋਂ ਅੱਪਡੇਟ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ。

ਇਹ ਪਹਿਲਾਂ ਵੀ ਕੀਤਾ ਜਾ ਸਕਦਾ ਸੀ, ਪਰ ਇਸ ਲਈ ਵੈੱਬਸਾਈਟ ਨੂੰ ਅੱਪਡੇਟ ਦੀ ਉਪਲੱਬਧਤਾ ਪੁੱਛਣੀ ਪਈ ਸੀ। Server-Sent ਈਵੈਂਟ ਦੇ ਮਾਧਿਅਮ ਨਾਲ, ਅੱਪਡੇਟ ਸਵੈਚਾਲਿਤ ਤੌਰ 'ਤੇ ਪਹੁੰਚਦੇ ਹਨ。

ਉਦਾਹਰਣਾਂ ਵਜੋਂ: Facebook/Twitter ਅੱਪਡੇਟ, ਸ਼ੇਅਰ ਕੀਮਤਾਂ ਦੇ ਅੱਪਡੇਟ, ਨਵੇਂ ਪੋਸਟ, ਮੁਕਾਬਲਾ ਨਤੀਜੇ, ਆਦਿ

ਬਰਾਉਜ਼ਰ ਸਮਰਥਾ

ਸਾਰੀਆਂ ਸਤਰਾਂ ਵਿੱਚ ਸੰਖਿਆ ਪਹਿਲੀ ਵਾਰੀ server-sent ਈਵੈਂਟ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਨੂੰ ਸੂਚਿਤ ਕਰਦੀ ਹੈ。

API
SSE 6.0 ਸਮਰਥਨ ਨਹੀਂ 6.0 5.0 11.5

Server-Sent ਈਵੈਂਟ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ

EventSource ਵਸਤੂ ਸਰਵਰ ਭੇਜੇ ਗਏ ਈਵੈਂਟ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ:

ਉਦਾਹਰਣ

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

ਸੁਭਾਵਿਕ ਤੌਰ 'ਤੇ ਕੀਤਾ ਫਿਰ

ਉਦਾਹਰਣ ਵਿਸਥਾਰ:

  • ਇੱਕ ਨਵਾਂ EventSource ਅਧਾਰਿਤ ਵਸਤੂ ਬਣਾਓ, ਫਿਰ ਅੱਪਡੇਟ ਭੇਜਣ ਵਾਲੀ ਪੰਨੇ ਦੀ URL ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ (ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ "demo_sse.php")
  • ਹਰ ਵਾਰੀ ਜਦੋਂ ਇੱਕ ਅੱਪਡੇਟ ਮਿਲਦਾ ਹੈ, onmessage ਈਵੈਂਟ ਆਉਂਦਾ ਹੈ
  • ਜਦੋਂ onmessage ਈਵੈਂਟ ਆਇਆ ਹੋਵੇ, ਜਾਂਚ ਕੀਤੇ ਗਏ ਡਾਟਾ ਨੂੰ id ਵਾਲੇ "result" ਐਲੀਮੈਂਟ ਵਿੱਚ ਭੇਜਿਆ ਜਾਵੇ

Server-Sent ਈਵੈਂਟ ਸਮਰਥਾ ਜਾਂਚ

TIY ਉਦਾਹਰਣ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਵਾਧੂ ਕੋਡ ਲਿਖਿਆ ਹੈ ਤਾਂਕਿ ਸਰਵਰ ਭੇਜੇ ਗਏ ਈਵੈਂਟਾਂ ਦੀ ਬਰਾਉਜ਼ਰ ਸਮਰਥਾ ਨੂੰ ਜਾਂਚ ਕੀਤਾ ਜਾ ਸਕੇ:

if(typeof(EventSource) !== "undefined") {
    // ਹਾਂ! ਸਰਵਰ ਭੇਜੇ ਗਏ ਈਵੈਂਟਾਂ ਨੂੰ ਸਮਰਥਨ ਹੈ!
    // ਕੁਝ ਕੋਡ.....
}
    // ਮਾਫ ਕਰੋ! ਸਰਵਰ ਭੇਜੇ ਗਏ ਈਵੈਂਟਾਂ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਹੈ!
}

ਸਰਵਰ ਪੱਖ ਕੋਡ ਉਦਾਹਰਣ

ਜਦੋਂਕਿ ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਚਲਣ ਲਈ, ਤੁਹਾਨੂੰ ਸੇਵਰ ਤੋਂ ਡਾਟਾ ਅੱਪਡੇਟ ਭੇਜਣ ਦੀ ਸਮਰੱਥਾ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ (ਉਦਾਹਰਣ ਵਜੋਂ PHP ਜਾਂ ASP)।

سرور سائیڈ ایونٹ سٹریم کا جملہ بہت سادا ہے۔ سر میگس کو "Content-Type" رکھیں "text/event-stream"۔ اب، آپ ایونٹ سٹریم بھیج سکتے ہیں۔

PHP میں کد (demo_sse.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 میں کد (VB) (demo_sse.asp)：

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

کد توضیح:

  • قومی سر میگس کو "text/event-stream" رکھیں
  • صفحے کو کچن نہ کریں
  • جاری دینا کو یقینی بنائیں (سب سے پہلے "data: " سے شروع ہونا چاہئے)
  • وائب کی برسٹ آؤٹ میں اشارتی اشارتی دینا

EventSource آئیسی

درج بالا مثال میں، ہم نے onmessage ایونٹ کا استعمال کیا ہے تاکہ پیغام حاصل کیا جائے، لیکن دیگر ایونٹ بھی استعمال کئے جا سکتے ہیں:

ایونٹ وصف
onopen وقتی سروسر کے ساتھ کنکشن کھول دیا جاتا ہے
onmessage وقتی پیغام مل جاتا ہے
onerror وقتی خاطی کاری آتی ہے