How to use post to make eventSource request

In our usual work, we may need to establish a link with the server to receive the data pushed by the server. The commonly used one is eventSource. We usually use get to create an eventSource, but how do we create it through post? First, let's introduce eventSource, and the difference between him and websocket:

1.eventSource的介绍

1）eventSourceis a web API that allows web pages to receive automatic updates from web servers over HTTP persistent connections, often called Server-Sent Events (SSE). It enables web pages to receive real-time updates without refreshing the page or sending repeated requests to the server.

2) Using eventSource, a web page can subscribe to a stream of events sent from the server. These events can be in any format, such as plain text, JSON, or XML, and can contain any data the server wants to send. Once the connection is established, the server can send events to the client at any time, and the client can process them as needed, such as updating the UI or triggering other actions.

3）eventSourceThe API is easy to use and supported by most modern web browsers. It's typically used in web applications that require real-time updates, such as chat rooms, social media feeds, or stock market quotes.

2. The difference between eventSource and websocket:

1) Different protocols: WebSocket uses a two-way communication protocol, while eventSourceit uses a one-way communication protocol. The WebSocket protocol can establish a long connection between the client and the server, both parties can send and receive messages at the same time, and the server eventSourcecan only send messages to the client.

2) Different data formats: WebSocket can send data in any format, such as text, binary data or JSON, but eventSourcecan only send data in text format.

3) Different degrees of support: WebSocket is a relatively new technology that may not be supported in some old browsers or network environments, but eventSourcehas can be used in most modern browsers.

4) Different application scenarios: WebSocket is more suitable for applications that require real-time two-way communication, such as online games or video conferencing, and eventSourceis more suitable for applications that need to obtain real-time information from the server, such as stock quotes or news feeds.

3. How to use post to request eventSource, the common way is to implement it through the fetchEventSource library, and the implementation method is as follows:

npm i --save @rangermauve/fetch-event-source


import { fetchEventSource } from '@microsoft/fetch-event-source';


       let eventSource = fetchEventSource(Url, {
        method: 'POST',
        headers: {
          "Content-Type": 'application/json',
        },
        body: JSON.stringify(data),
        onmessage(event) {
          console.info(event.data);
        },
        onerror() {
          
        }
      })

You can control when to pause through new AbortController