Server-Sent Events (SSE) is an HTTP-based HTML5 standard API that allows servers to push real-time data to clients one-way. 1. It establishes a persistent connection through the EventSource object. The server sends data in text/event-stream format, and each push triggers client event processing; 2. Simple to use, the front-end only needs to listen to message events or specific event types to receive and process data; 3. The back-end needs to set Content-Type to text/event-stream and continuously output messages that match the format; 4. Common precautions include solving cross-domain problems, controlling push frequency, testing browser compatibility, etc. Compared with WebSocket, SSE is lighter and suitable for scenarios such as notifications and stock updates that only require server push.

Server-Sent Events (SSE) is a technology that allows servers to push real-time updates to browsers. Instead of requiring the browser to poll repeatedly like the traditional request-response mode, it establishes a persistent connection where the server can send data to the client at any time. Compared with WebSocket, SSE is lighter and easier to implement, and is especially suitable for scenarios where only one-way push is required for servers, such as real-time notifications, stock price updates, log information, etc.

What are Server-Sent Events?

SSE is a standard API provided by HTML5 that allows web pages to receive automatic updates from the server. It is HTTP-based, so no special protocol or server settings are required. Unlike WebSocket, SSE only supports one-way communication from the server to the client, which means that the client can only listen and cannot actively send messages.

SSE uses the EventSource object to create a connection and receives data by listening to message events. The data returned by the server must be in a specific format ( text/event-stream ), and an event will be triggered every time new data is available.

How to use SSE in HTML?

To use SSE, you can do it in just a few lines of JavaScript:

 <script>
const eventSource = new EventSource("your-server-endpoint");

eventSource.onmessage = function(event) {
    console.log("Message received:", event.data);
};
</script>

This code does three things:

• Created an EventSource instance pointing to the specified URL.
• Listen to the onmessage event, which will be triggered when the server sends data.
• Print out the received data.

If the message sent by the server has an event type (such as notification ), you can also use .addEventListener() to listen for specific events:

 eventSource.addEventListener('notification', function(event) {
    document.getElementById('notifications').innerText = event.data;
});

This way you can handle differently according to different types of events.

How to cooperate with the backend?

The backend needs to do two main points:

1. Set the correct response header to Content-Type: text/event-stream .
2. Continuously output messages that conform to SSE format.

For example, a simple Node.js Express interface might look like this:

 app.get('/stream', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    setInterval(() => {
        res.write(`data: ${new Date()}\n\n`);
    }, 1000);
});

This code will send the current time to the client every second. Note \n\n means that a complete message ends.

Different languages ??and frameworks have slightly different writing methods, but the core logic is the same: keep the connection open and continue to send content starting with data: :.

Frequently Asked Questions and Precautions

• Cross-domain problem : If the front-end and back-end are not under the same domain name, remember to set CORS, otherwise it may not be connected.
• Connection disconnection and reconnection : SSE will automatically try to reconnect after the connection is disconnected by default, but you can actively close it through eventSource.close() .
• Performance considerations : Although SSE is a long connection, it consumes little to server resources. However, you should also pay attention to controlling the transmission frequency to avoid stress caused by frequent pushes.
• Browser compatibility : Modern browsers basically support SSE, but you should pay attention to testing on mobile and old devices.

Basically that's it. Although SSE is not as powerful as WebSocket, it is sufficient in many practical application scenarios, and it is simpler to implement and has lower maintenance costs.

The above is the detailed content of What are Server-Sent Events (SSE) and how do you use them with HTML?. For more information, please follow other related articles on the PHP Chinese website!