This repository reproduces the issue described on the StimulusReflex Discord, quoted below:
I found that if, for some reason (a slow network or a large HTML payload, likely both), a morph operation takes more than ~6 seconds to be sent from the server to the client via the WebSocket connection, the WS connection is dropped and the morph never applies.
Here’s what I believe is happening:
- ActionCable is sending a ping message every 3 seconds from the server;
- On the client, the ActionCable JS library listens to ping events. After about 6 seconds without any ping events, (around 2 expected pings), it considers itself “disconnected”, shuts down the current connection and opens up a new one;
- When streaming a SR response via the WebSocket connection, that connection is “busy” and does not transmit ping events;
- Thus, any SR response that takes more than ~6 seconds to transmit will make the AC client disconnect itself and open up a new connection. The SR response never reaches the client in that case.
To reproduce:
- Open this repo on GitPod, or locally (follow the instruction provided on the repository this one was forked from to do so)
- Start the server and visit the homepage
- Open the DevTools on the Network panel
- Set your browser to the “Fast 3G” network throttling
- Filter the panel on the
WS(WebSocket) network traffic - Click the
Increment ping issue click counterbutton - You will see the
cableconnection drop and a new one created, as well as no updates shown on the page - Set your browser to the “No throttling” mode
- Refresh the page
- Click the
Increment ping issue click counterbutton again - You should not see the connection drop, and you should see the reflex update the page