<!–
main_leaderboard, all: [728,90][970,90][320,50][468,60]
–>
HTML Serversentevents – SSE API
The topic at hand is HTML serversentevents. Web pages can receive server updates through Server-Sent Events (SSE).
Server-Sent-Events – One Way Messaging:
Html server sent events occur when an automatic update from a server is sent to a web page.
This was also possible in the past; however, the web page would have to check to see whether any newer versions are now available. When using server-sent events, the updates appear on their own without any intervention.
Daily Life Examples:
Updates on Instagram, Facebook and Twitter, stock price updates, news feeds, sports scores, and so on.
Browser Compatibility:
The first browser version to fully handle server-sent events is shown by the numbers in the table.
| API |  |  |  |  |  |
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Get server-sent event notifications:
In Html serversentevents, the EventSource object receives server-sent event notifications:
Example:
Explanation of the example:
- Make a new EventSource object and indicate the URL of the page that is providing the updates (in this case, “demo-sse.php”)
- Each time an update is received, the onmessage event occurs
- As soon as an onmessage event is fired, the obtained data should be placed in the element with the id “result”.
Server-Sent Events Support Check
A few lines of code are added to the below example in order to ensure that the browser accepts server-sent events when it comes to Html serversentevents:
// Certainly! The event sends from servers are permitted!
// Some code…..
}
else {
// We’re sorry! It does not support server-sent events…
}<!–
Advertisement
–><!–
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
–>
Example Code Server-Side
When we talk about Html serversentevents, it is necessary to have a server capable of transmitting data updates (such as PHP or ASP) in order for the previous example to work.
An easy format is used on the server side for event streams. Change the “Content-Type” header to “text/event-stream”. Transmitting event streams is made accessible.
PHP code (demo-sse.php):
header(‘Content-Type: text/event-stream’);
header(‘Cache-Control: no-cache’);$time = date(‘r’);
echo “data: The server time is: {$time}”;
flush();
?>
Response.ContentType = “text/event-stream”
Response.Expires = -1
Response.Write(“data: The server time is: ” & now())
Response.Flush()
%>
Explanation of code:
- Replace the “Content-Type” header with “text/event-stream”
- Make sure the page is not cached
- Put out the data to transmit (Be sure to begin with “data: “)
- Send the final data back to the web page
EventSource Object:
Messages were received via the onmessage event in the preceding examples. Nevertheless, there are other events offered as well:
| Events | Overview |
|---|---|
| onmessage | Upon receiving a message. |
| onopen | The moment a connection is made to the server. |
| onerror | In the event of an error. |
HTML Server-Sent Events (SSE) API : Benefits and limitations
Here are the benefits and limitations of using HTML Server-Sent Events (SSE) API:
Benefits:
- Real-time updates: SSE API allows the server to send real-time updates to the client without the need for the client to request data repeatedly.
- Efficiency: SSE is more efficient than traditional polling or long-polling techniques as it reduces the number of requests made to the server.
- Lightweight: SSE messages are lightweight and can be sent in a plain-text format, reducing server load and network traffic.
- Easy to use: SSE API is easy to use and requires minimal setup on both the client and server sides.
- Compatibility: SSE API is supported by most modern web browsers and can be used with existing web technologies such as HTML, CSS, and JavaScript.
Limitations:
- Limited Browser Support: SSE API is not supported by some older browsers such as Internet Explorer 11 and older versions of Safari.
- Unidirectional communication: SSE API only allows for server-to-client communication, and not the other way around.
- Server Compatibility: SSE API requires server-side support, which may not be available on some web hosting platforms or servers.
- Connection Limits: SSE connections may be subject to limits imposed by the server, which can affect the number of clients that can be connected simultaneously.
- Security: SSE messages are sent over HTTP, which is not a secure protocol. To ensure security, HTTPS should be used instead, which requires additional setup and configuration.
