SSE can't receive EventStream messages by browser #2034

generalworksinc · 2023-06-08T03:52:00Z

generalworksinc
Jun 8, 2023

Hi, I am grateful for being able to use this wonderful product.

I'm trying receive Event by browser, from api server by axum Sse.

.route("/sse_test", get(connection_sse::sse_handler))

use futures_util::stream;
use tokio_stream::{StreamExt, Stream};
use axum::response::sse::{Event, Sse, KeepAlive};

pub async fn sse_handler() -> Sse<impl Stream<Item = Result<Event, Infallible>>> {
    // A `Stream` that repeats an event every second
    let stream = stream::repeat_with(|| Event::default().data("hi!"))
        .map(Ok)
        .throttle(Duration::from_secs(1));

    Sse::new(stream).keep_alive(KeepAlive::default())
}

I can receive Event every 1 second, by rust SSE client.
(using reqwest_eventsource crate, for example below)

let mut es =reqwest_eventsource:: EventSource::get("http://localhost:8080/api/sse/sse_handler".to_string());

        while let Some(event) = es.next().await {
            match event {
                Ok(reqwest_eventsource::Event::Open) => println!("Connection Open!"),
                Ok(reqwest_eventsource::Event::Message(message)) => {
                    println!("Message: {:#?}", message) // can receive message every second.
                },
                Err(err) => {
                    println!("Error: {}", err);
                }
            }
        }

However, when using browsers like Chrome or Firefox to access the SSE URL, the EventStream is not obtained.
Below is an example of HTML for retrieving the EventStream in a browser.

<html>
<body>
  sse test.
</body>
<script>
  let eventSource = new EventSource("http://localhost:8080/api/sse/sse_test");

  eventSource.onmessage = function(event) {
    console.log("Recieved message", event);
  };
</script>
</html>

by setting the stream to terminate after 10 seconds, the EventStream could be received all at once after 10 seconds.

use futures_util::stream;
use tokio_stream::{StreamExt, Stream};
use axum::response::sse::{Event, Sse, KeepAlive};

pub async fn sse_handler() -> Sse<impl Stream<Item = Result<Event, Infallible>>> {
    // A `Stream` that repeats an event every second
    let stream = stream::repeat_with(|| Event::default().data("hi!"))
        .map(Ok)
        .throttle(Duration::from_secs(1));

    Sse::new(stream).keep_alive(KeepAlive::default())
}

received EventStream almost simultaneously. I would like to retrieve it every 1 second.

I have checked the headers and other details, but there doesn't seem to be no problem, and I haven't been able to resolve it.

Thanks.

Answered by generalworksinc

Jun 8, 2023

@davidpdrsn

Based on the provided sample, I was able to investigate and resolve the issue myself.

In my code, I had enabled the CompressionLayer for all routers, which also compressed the Server-Sent Events (SSE) processing. As a result, the browser was unable to recognize the events.

use tower_http::{compression::CompressionLayer, services::ServeDir};

let app = Router::new()
        .route("/sse", get(sse_handler))
        .layer(CompressionLayer::new())

As a solution, I prevented compression when the content-type header is "text/event-stream". This allowed me to verify the functionality without any issues.

use tower_http::compression::{
    Compression, CompressionLayer
    predicate:…

View full answer

davidpdrsn · 2023-06-08T07:24:32Z

davidpdrsn
Jun 8, 2023
Collaborator

Hm I'm not sure. Are there any errors/warnings in the console?

6 replies

generalworksinc Jun 8, 2023
Author

@davidpdrsn
Thanks for replying.

No, there is no error/warning message, but connection is successful.

connection info is below.(chromium browser on linux mint)

I tried implementing SSE with the Go language as a test in the same environment(client: chromium on linux mint), and I was able to successfully receive event stream data every second.

Is this issue only happening to me?
Can everyone else access it without any problems on browser?

davidpdrsn Jun 8, 2023
Collaborator

https://github.com/tokio-rs/axum/blob/main/examples/sse/src/main.rs works in safari

generalworksinc Jun 8, 2023
Author

thanks, I'll try on some browsers, mac and windows, too,
Also, simply test the example as it is, without any modifications.

and then I will report again.

generalworksinc Jun 8, 2023
Author

@davidpdrsn

Based on the provided sample, I was able to investigate and resolve the issue myself.

In my code, I had enabled the CompressionLayer for all routers, which also compressed the Server-Sent Events (SSE) processing. As a result, the browser was unable to recognize the events.

use tower_http::{compression::CompressionLayer, services::ServeDir};

let app = Router::new()
        .route("/sse", get(sse_handler))
        .layer(CompressionLayer::new())

As a solution, I prevented compression when the content-type header is "text/event-stream". This allowed me to verify the functionality without any issues.

use tower_http::compression::{
    Compression, CompressionLayer
    predicate::{Predicate, NotForContentType, DefaultPredicate},
};

let app = Router::new()
        .route("/sse", get(sse_handler))
        .layer(CompressionLayer::new().compress_when(DefaultPredicate::new()
                  .and(NotForContentType::new("text/event-stream"))))

Thank you for your help.

Answer selected by generalworksinc

BenJeau Feb 11, 2024

Thanks for this @generalworksinc after several hours of not understand what was going on, this comment saved my sanity

Maybe this should be mentioned somewhere in the docs - @davidpdrsn would it be acceptable to have it somewhere in the docs, here https://docs.rs/axum/latest/axum/response/sse/? ~~If so I would love to open a PR in case others fall in this hole~~ Created a PR #2585

davidpdrsn Feb 11, 2024
Collaborator

I think we should just fix it in tower-http. There already is an issue about it tower-rs/tower-http#420

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSE can't receive EventStream messages by browser #2034

{{title}}

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

SSE can't receive EventStream messages by browser #2034

generalworksinc Jun 8, 2023

Replies: 1 comment · 6 replies

davidpdrsn Jun 8, 2023 Collaborator

generalworksinc Jun 8, 2023 Author

davidpdrsn Jun 8, 2023 Collaborator

generalworksinc Jun 8, 2023 Author

generalworksinc Jun 8, 2023 Author

BenJeau Feb 11, 2024

davidpdrsn Feb 11, 2024 Collaborator

generalworksinc
Jun 8, 2023

Replies: 1 comment 6 replies

davidpdrsn
Jun 8, 2023
Collaborator

generalworksinc Jun 8, 2023
Author

davidpdrsn Jun 8, 2023
Collaborator

generalworksinc Jun 8, 2023
Author

generalworksinc Jun 8, 2023
Author

davidpdrsn Feb 11, 2024
Collaborator