SSE Introduction
SSE stands for Server-Sent Events, which literally means that the server pushes information to the client. SSE is a one-way channel,The server can only send information to the clientThe client can only receive the SSE request after triggering the first time, and cannot reply.
Key features of SSE include:
- Ease of use: SSE uses text-based data formats such as plain text, JSON, etc., making it relatively simple to send and parse data.
- One-way communication: SSE supports one-way communication between the server and the client, where the server can actively push data to the client, while the client can only receive the data.
- Real-time: SSE establishes long-term connections, allowing servers to push data to clients in real-time without frequent requests.
SSE vs. WebSocket
WebSocket is another web technology used to enable real-time two-way communication, which differs from SSE in some ways. Here's a comparison between SSE and WebSocket:
- Data push direction: SSE is a one-way communication between the server and the client, and the server can actively push data to the client. WebSocket, on the other hand, is bidirectional communication, allowing real-time two-way data exchange between the server and the client.
- Connection Establishment: SSE uses long HTTP-based connections to establish connections through ordinary HTTP requests and responses, thereby real-time data push. WebSockets use custom protocols to enable two-way communication by establishing WebSocket connections.
- Compatibility: Since SSE is based on the HTTP protocol, it can be used in most modern browsers and does not require additional protocol upgrades. WebSockets are also supported in the vast majority of modern browsers, but they can be problematic in some special network environments.
- Applicable scenarios: SSE is suitable for scenarios where the server pushes data to the client in real time, such as stock price updates, news real-time push, etc. WebSocket is suitable for scenarios that require real-time two-way communication, such as chat applications and multi-person collaborative editing.
- Depending on your specific business needs and scenarios, choosing SSE or WebSocket depends on your actual needs. If you only need a server to push data to clients in one direction and want to keep it simple and compatible, SSE is a good choice. If you need to achieve two-way communication, or if you need more advanced features and control, then WebSocket may be a better fit for your needs.
SSE event stream format
An event stream is a simple stream of text data that should be encoded in UTF-8 format. event streamThe message is separated by a pair of line breaks。 Behavior comment lines that start with a colon are ignored. Each field is represented by a field name, followed by a colon, and then text data for that field's value.
The fields are as follows:
event: A string used to identify the event type. If this string is specified, the browser dispatches an event with the specified event name to the appropriate listener; The client should use addEventListener() to listen for the specified event. If a message does not specify an event name, then the onmessage handler can be called.
data: The data field of the message. When the EventSource receives multiple consecutive lines starting with data:, it concatenates them, inserting a line break between them. The line break at the end is removed.
id: Event ID, which becomes the property value of the current EventSource object's internal property "Last Event ID".
retry: the time to reconnect. If the connection to the server is lost, the browser will wait for the specified amount of time and then try to reconnect. This must be an integer that specifies the time to reconnect in milliseconds. If a non-integer value is specified, the field is ignored.
EventSource instance
The EventSource interface is the interface between the web content and the server to send events.
EventHandler property
EventSource.onopen is called when the connection is open. EventSource.onmessage is called when a message is received without an event attribute. EventSource.onerror is called on connection exceptions.
SSE Server (ASP.NET Core)
Create a new ASP.NET Core project with .NET 8 and the controller code is as follows:
For the client that establishes the link, send a message to the client every second interval.
SSE client
Write client code in the View page using html and js as follows:
Start the project with the following effects:
Reference:
The hyperlink login is visible.
The hyperlink login is visible.
The hyperlink login is visible. |