Receiving real-time data with HTML5 Server-Sent Events (SSE).

Server-Sent Events (SSE) is a lightweight solution provided by HTML5 to push real-time updates to the browser. It realizes one-way communication through long HTTP connections, which is suitable for stock market, notifications and other scenarios. When using it, create an EventSource instance and listen for messages: const eventSource = new EventSource('/stream'); eventSource.onmessage = function(event) { console.log('Received message:', event.data); }; The server needs to set Content-Type to text/event-stream, keep the connection open, and output data: content\n\n in the format. Common considerations include: 1. Configure CORS to solve cross-domain problems; 2. Control retry time to achieve automatic reconnection; 3. Use event: Define custom event types; 4. Manage connection timeout to prevent resource leakage. Compared with WebSocket, SSE is simpler and easier to use, supports HTTP protocol to penetrate the firewall, but is only unidirectional communication and has slightly poor compatibility. It is suitable for real-time push scenarios without frequent interactions.

In web development, if you need to push real-time updates from the server to the browser, HTML5 provides a lightweight solution: Server-Sent Events (SSE). Compared with WebSocket, it is simpler and easier to implement, and is especially suitable for scenarios where only servers need to communicate one-way to clients.

What are Server-Sent Events?

Server-Sent Events is part of HTML5, allowing servers to push data to the browser over HTTP long connections. Unlike traditional polling methods, SSE will remain open after establishing a connection, and the server can send new data at any time, such as stock quotes, real-time notifications or chat messages.

Its basic usage is to create an EventSource instance and point to a URL on the server side:

 const eventSource = new EventSource('/stream');
eventSource.onmessage = function(event) {
    console.log('Received message:', event.data);
};

As long as the server continues to send data, the client can continue to receive it.

How to set SSE support on the server side?

Different backend languages ​​have different implementation methods, but the core point is the same: keep the connection open and output the content in the SSE format.

Take Node.js Express as an example:

 app.get('/stream', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');

    // Simulate sending data setInterval(() => {
        res.write(`data: ${new Date()}\n\n`);
    }, 1000);
});

Key points:

• Set the correct response header, especially text/event-stream
• Don't end the response too early, keep the connection open
• The data format must be data: 内容\n\n , and two newlines indicate the end of a message

Other languages ​​such as Python (Flask), PHP, or Java Spring Boot can be implemented similarly.

Frequently Asked Questions and Notes

1. Cross-domain issues If the front-end and back-end are not under the same domain name, CORS needs to be configured to ensure that the request initiated EventSource is allowed:

 Access-Control-Allow-Origin: *

Or specify a specific domain name.

2. Automatic reconnect mechanism When the connection is interrupted, the browser will automatically try to reconnect, and the default waiting time is 3 seconds. You can control this interval on the server side:

 retry: 5000

3. Custom event type In addition to the default onmessage , you can also define other event names:

 event: update
data: {"type": "news", "content": "New news is coming"}

Front-end monitoring:

 eventSource.addEventListener('update', function(event) {
    console.log('Update received:', event.data);
});

4. Connection timeout and resource release Be careful not to let the connection hang indefinitely. The server should have mechanisms to detect whether the client is disconnected and release resources in time to avoid memory leakage.

When should I use SSE instead of WebSocket?

WebSocket is more powerful and supports two-way communication, but also has higher complexity. If you only need the server to push information to the client and do not need frequent interactions, SSE is a better choice.

Advantages include:

• Simplify the development process, easy to implement both front and back ends
• Support automatic reconnection
• The standard HTTP protocol can be used to make it easier to penetrate the firewall

The disadvantages are also obvious:

• Only one-way communication from server to client is supported
• Browser compatibility is slightly poor (IE and older versions of Edge are not supported)

Basically that's it. SSE is not complicated, but in actual deployment, you should pay attention to connection management, error handling and performance optimization. If you just want to make a simple real-time notification system, SSE is a lightweight and practical choice.

The above is the detailed content of Receiving real-time data with HTML5 Server-Sent Events (SSE).. For more information, please follow other related articles on the PHP Chinese website!