Server-Sent Events (SSE) is a browser API defined in HTML5, which is used to implement real-time one-way data push from the server to the client. 1. It is based on the standard HTTP protocol, supports automatic reconnection and event stream formats, and allows messages to have meta information such as ID and type; 2. When using it, you need to create EventSource objects, and the server needs to set the correct MIME type text/event-stream and keep the connection uninterrupted; 3. Compared with WebSocket, SSE is lighter and simple to implement, and is suitable for server one-way push scenarios, such as notifications, status updates, etc., while WebSocket is suitable for scenarios that require two-way communication; 4. Common precautions include cross-domain configuration, message format specification, connection retention and performance optimization.

With the development of web applications, real-time data updates have become the standard configuration. For example, in scenarios such as stock market, chat messages, and notification push, the server needs to actively "push" new data to the client. The HTTP protocol itself is a request-response model. The traditional practice is that clients constantly poll, which is inefficient and resource-intensive. HTML5 introduces Server-Sent Events (SSE for short), providing a lightweight, HTTP-based server push mechanism to clients.

What are Server-Sent Events?

SSE is a browser API defined in HTML5 that allows the server to continuously send events and data to the client over a persistent HTTP connection. Its characteristics are one-way communication : server sends and client receives; it is not like WebSocket, bidirectional full-duplex communication. SSE is more suitable for scenarios where only server push is required and no frequent interaction is required.

It has several key features:

• Using standard HTTP protocol
• Automatic reconnect mechanism
• Support event stream format
• Messages with ID, type and other meta information

How to use SSE? Basic implementation steps

To use SSE in a web page, you mainly create an EventSource object in JavaScript and listen for messages from the server. Here is a simple example:

 const eventSource = new EventSource('your-endpoint-url');

eventSource.addEventListener('message', function(event) {
    console.log('Received message:', event.data);
});

Several key points to pay attention to:

• The server must set the correct MIME type: text/event-stream
• The response header cannot be cached, otherwise the connection will be broken
• The message format must comply with the specification, for example, start with data:

If the connection is interrupted, EventSource will automatically attempt to reconnect. You can also set a custom reconnection time, such as adding a retry: 5000 to the message, which means reconnection in 5 seconds.

What is the difference between SSE and WebSocket?

Although both are used for real-time communication, the applicable scenarios are different:

If you just want the server to push some data such as status updates, notifications, etc., SSE is a lighter and easier to integrate. However, if frequent two-way communication is required, such as online games and video conferencing, WebSocket is the appropriate solution.

Frequently Asked Questions and Precautions

Some details are easily overlooked when using SSE:

• Cross-domain problem : cookies are not included by default. If authentication is required, the server must set CORS and allow credentials.
• Message format : Each message must start with data: and use two \n for newlines.
• Connection keeping : Do not close the connection too early, otherwise reconnection will be triggered.
• Performance optimization : Pushing too much data at once may affect the front-end processing speed. It is recommended to control the frequency or send it in batches.

For example, the server outputs a legitimate SSE message like this:

 data: {"status": "online", "count": 123}
\n\n

If you see an error on the browser console saying "connection reset", it is likely that the server does not maintain the connection correctly or the format is written incorrectly.

Basically that's it. Although SSE is not as powerful as WebSocket, it is sufficient in many business scenarios, and it has lower development costs and easier maintenance.

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