Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Events never show to the browser when using a ReadableStream with the text/event-stream content type #3232

Closed
hugo opened this issue May 18, 2022 · 3 comments
Assignees
Labels
bug:unverified feat:fetch Issues related to @remix-run/web-fetch

Comments

@hugo
Copy link

hugo commented May 18, 2022

What version of Remix are you using?

1.5.0

Steps to Reproduce

Create an app using @remix-run/serve that returns a ReadableStream body in a loader, with the content-type text/event-stream. Send events.

On the client side connect to this endpoint using an EventSource.

See this reproduction repository for a full example.

The issue appears to be compression in the Express server. If you cURL the endpoint you'll see events streaming as expected:

curl -N http://localhost:3000/api/events
data: asdfghjkl

data: asdfghjkl

This pointed me to the underlying problem. cURL doesn't do compression by default. If you enable it, with curl --compressed you'll also have a connection that hangs. I'm not sure why but the compression middleware in Express borks streaming responses somehow.

If you edit the "@remix-run/serve" server to disable compression for "text/event-stream" content types, things work as expected:

app.use(compression({filter: (req) => req.headers['content-type']?.startsWith('text/event-stream')}))

(n.b. there may be a preferable way to do this, I'm not sure.)


While I'm here I should just add that this new streaming functionality is delightful.

Expected Behavior

Events would start to appear via the EventSource connection.

Actual Behavior

No events appear.

@jangerhofer
Copy link

The express compression library documentation explicitly calls out the need to flush entries in an SSE stream. I'm not sure how to square that against the ReadableStream controller's interface, but my first thought is that a middleware in @remix/serve may be able to call flush on application code's behalf.

@jacob-ebey
Copy link
Member

The express adapter now calls flush appropriately: https://github.com/remix-run/remix/blob/main/packages/remix-node/stream.ts#L23

If this is still an issue, please re-open the issue or file a new one.

@vidjuheffex
Copy link

Yes but what if we're not using the Express adapter? Just using the remix default server and this issue still exists.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug:unverified feat:fetch Issues related to @remix-run/web-fetch
Projects
No open projects
Status: Closed
Development

No branches or pull requests

5 participants