SSE in HTML

SSE in HTML (Server-Sent Events) ek API hai jo server ko allow karta hai ki wo HTTP connection ke through web page ko messages ya updates push kare. SSE in HTML ka use real-time updates receive karne ke liye kiya jata hai.


Server-Sent Events – One Way Messaging

SSE in HTML ka matlab hai jab web page automatically server se messages ya updates receive karta hai.

Normally web page ko server se data lene ke liye request bhejni padti hai. Lekin SSE in HTML me updates automatically server se push hote hain, bina baar-baar request bheje.

Examples

SSE in HTML ka use real-time updates ke liye hota hai, jaise:

  • Facebook / Twitter updates

  • Stock market updates

  • News feeds

  • Sports results


Receive Server-Sent Event Notifications

SSE in HTML me server se updates receive karne ke liye EventSource object ka use kiya jata hai.

Example:

SSE in HTML

Example Explained

  • Ek naya EventSource object create kiya jata hai

  • Usme URL diya jata hai jo updates bhej raha hota hai (jaise "demo_sse.php")

  • Jab bhi koi update receive hota hai, onmessage event trigger hota hai

  • Received data ko webpage par display kiya jata hai


Check Browser Support

SSE in HTML use karne se pehle check karna chahiye ki browser Server-Sent Events support karta hai ya nahi.

Example :

Check Browser Support


Server-Side Code Example

SSE tabhi work karta hai jab server data updates bhejne ke capable ho, jaise:

  • PHP

  • ASP

Server-side event stream ka syntax simple hota hai.

Important Steps

  1. Sabse pehle "Content-Type" header ko "text/event-stream" set karna hota hai

  2. Uske baad event stream bhejna start kiya jata hai

Example:

PHP Code (demo_sse.php)

ASP (VB) Code (demo_sse.asp)

Code Explained:

  • "Content-Type" header ko "text/event-stream" set kiya gaya

  • Page ko cache na karne ke liye specify kiya gaya

  • Jo data bhejna hai wo output kiya gaya (hamesha "data:" se start hota hai)

  • flush() use kiya jata hai taaki data turant web page par send ho jaye


The EventSource Object

SSE in HTML me messages receive karne ke liye onmessage event use hota hai.

Lekin EventSource object me aur bhi events available hote hain.

Events

  • onopen → Jab server ke saath connection open hota hai

  • onmessage → Jab message receive hota hai

  • onerror → Jab koi error hota hai

Leave a Comment