HTML Server-Sent Events API – in Hindi

Modern web applications में real-time data की requirement बहुत common हो चुकी है, जैसे live notifications, stock price updates, live scores या progress updates। HTML Server-Sent Events API (SSE) browser को server से one-way real-time updates receive करने की सुविधा देती है।

SSE में server continuously client को data भेज सकता है, बिना बार-बार request किए। यह lightweight, simple और HTTP-based solution है।

HTML Server-Sent Events API क्या है?

HTML Server-Sent Events API एक Web API है जो browser और server के बीच persistent HTTP connection establish करती है। इस connection के जरिए server automatically client को events push करता है।

Key points:

• One-way communication (server → client)
• Text-based data stream
• HTTP protocol पर based

SSE कैसे काम करता है?

SSE में browser एक special request send करता है और server उस connection को open रखता है। Server जब भी नया data available होता है, client को push कर देता है।

Flow:

• Client EventSource object create करता है
• Server text/event-stream response भेजता है
• Client events को listen करता है

EventSource Object

JavaScript में SSE use करने के लिए EventSource object का use किया जाता है।

Basic Syntax

const source = new EventSource('events.php');

Receiving Messages

Default Message Event

source.onmessage = function (event) {
  console.log(event.data);
};

Server से आने वाला data event.data में receive होता है।

Custom Events

Server custom event names भी send कर सकता है।

Client-side

source.addEventListener('update', function (event) {
  console.log(event.data);
});

Server-side Format

event: update
data: New update received

Server-side Example

PHP Example

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

while (true) {
  echo "data: Server time: " . date('H:i:s') . "\n\n";
  ob_flush();
  flush();
  sleep(1);
}

Server continuously data send करता रहता है।

Connection Handling

Error Handling

source.onerror = function () {
  console.log('Connection error');
};

Browser automatically reconnect करने की कोशिश करता है।

Closing Connection

source.close();

जब real-time updates की जरूरत न हो, connection close कर देना चाहिए।

Data Format Rules

SSE data कुछ rules follow करता है:

• Each message data: से start होता है
• Events newline से separate होते हैं
• UTF-8 encoding required

Browser Support

HTML Server-Sent Events API modern browsers में supported है:

• Chrome
• Firefox
• Edge
• Safari

Internet Explorer में native support नहीं है।

SSE vs WebSocket

• SSE one-way communication है
• WebSocket two-way communication provide करता है
• SSE simpler और HTTP-based है
• WebSocket complex but more powerful है

Use Cases

• Live notifications
• News feed updates
• Live sports scores
• Server monitoring dashboards
• Progress indicators

Limitations

• Only server to client communication
• Binary data support नहीं
• Old browsers में support limited

Security Considerations

• Same-origin policy apply होती है
• Authentication headers use करें
• Sensitive data encrypt करें

Best Practices

• SSE lightweight updates के लिए use करें
• Long-running heavy tasks avoid करें
• Proper error handling implement करें
• Connection close करना न भूलें

Conclusion

HTML Server-Sent Events API real-time web applications के लिए एक simple और efficient solution है। जब आपको server से client तक continuous updates चाहिए और two-way communication की जरूरत नहीं है, तब SSE एक ideal choice है।