HTML SSE
Updates can be sent from a server to a web page via HTML Server-Sent Events (HTML SSE).
Server-Sent Events - One Way Messaging
When a web page automatically receives updates from a server, it’s known as a server-sent event.
In the past, this was also feasible, but the website would have to inquire as to whether any updates were available. When events are sent by the server, updates occur automatically.
Examples include news feeds, sporting outcomes, stock price updates, and updates from Facebook and Twitter.
Browser Support
The first version of the browser that fully supports server-sent events is indicated by the numbers in the table.
CODE MUKVO
Receive Server-Sent Event Notifications
Event notifications supplied by the server are received via the EventSource object:
CODE MUKVO
An explanation of the example:
- Make a new instance of an EventSource object and provide the URL (“demo_sse.php”) of the webpage that is providing the changes.
- The onmessage event happens every time an update is received.
- Insert the received data into the element with id=”result” when an onmessage event takes place.
Check Server-Sent Events Support
A few extra lines of code were added to the tryit example above to verify that the browser supported server-sent events:
CODE MUKVO
Server-Side Code Example
You will require a server (such as PHP or ASP) that can communicate data updates in order for the preceding example to function.
Simple syntax is used for the server-side event stream. Put “text/event-stream” in the “Content-Type” header. You are now able to send event streams.
PHP code (demo_sse.php):
CODE MUKVO
Code in ASP (VB) (demo_sse.asp):
CODE MUKVO
Code description:
- Put “text/event-stream” in the “Content-Type” header.
- Indicate that the page must not be cached.
- Send the data as an output (always begin with “data:”).
- Refresh the web page with the output data.
The EventSource Object
We obtained messages in the aforementioned cases by using the onmessage event. However, more events are also offered:
CODE MUKVO
HTML SSE
Server-Sent Events
one-way messaging
web page updates
browser support
EventSource object
server-side code
PHP
content-type header
cache control
data output
onmessage eventHTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML Server-Sent Events (SSE) is a powerful technology that enables one-way messaging from a server to a web page. This allows for real-time updates and notifications to be pushed to the client without the need for constant polling or complex WebSocket connections.
The key component of HTML SSE is the EventSource object, which is used in the client-side JavaScript to establish a connection with the server and listen for incoming messages. On the server-side, developers can use languages like PHP to generate and send these updates to the connected clients.
To set up an SSE connection, the server must send the appropriate content-type header (text/event-stream) and ensure proper cache control to prevent the browser from caching the response. The server can then continuously push data to the client, which is received and handled through the onmessage event in the EventSource object.
HTML SSE is a valuable tool for building web applications that require real-time updates, such as social media feeds, stock tickers, and notification systems. It provides a simple and efficient way to keep users informed without the overhead of more complex bidirectional communication protocols.
HTML Server-Sent Events (SSE) is a technology that enables one-way messaging from server to client. This allows web pages to receive automatic updates from a server without having to poll the server for new information.
The core of the HTML SSE specification is the EventSource object. This object is used on the client-side to establish a connection with the server and receive event data. The server-side code is responsible for sending the event data in the appropriate format.
To use HTML SSE, the server must send the correct content-type header (text/event-stream) and ensure proper cache control. The server can then continuously send event data, which the client’s EventSource object will receive and process through the onmessage event.
HTML SSE is supported by all major modern browsers, providing a simple and efficient way to update web page content without the overhead of full page refreshes or complex polling mechanisms. It is a valuable tool for building real-time, event-driven web applications.
