[BUG] Connection breaks from time to time when proxied by Cloudflare

[felipecrs]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When accessing Webtop through Cloudflare, the connection is broken from time to time, causing the stream to reload itself.

Looks like this is a limitation of Cloudflare itself, as explained here:

https://community.cloudflare.com/t/cloudflare-websocket-timeout/5865
https://stackoverflow.com/questions/39668410/whats-disconnecting-my-websocket-connection-cloudflare-apaches-mod-proxy

However, it can be "fixed" with a keep alive mechanism that runs every 45 seconds for example.

I believe it would be nice to have it "fixed" directly in Webtop given Cloudflare's relevance.

Expected Behavior

The connection should be kept running with no interruption.

Steps To Reproduce

1. Expose any webtop container through Cloudflare
2. Connect and wait for some time, usually in less than 2 minutes it should lose Websockets connection and reload

Environment

• OS: Home Assistant OS 16.1
• How docker service was installed: comes preinstalled

CPU architecture

x86-64

Docker creation

I don't think this is relevant, please let me know otherwise.

Container logs

Browser logs:

[websockets] Connection closed CloseEvent {isTrusted: true, wasClean: true, code: 1000, reason: '', type: 'close', …}
VM299 index-D7DR09zb.js:171 Clearing all VNC stripe decoders.
VM299 index-D7DR09zb.js:171 Closed VNC stripe decoder for Y=0
VM299 index-D7DR09zb.js:171 All VNC stripe decoders and metadata cleared.
VM299 index-D7DR09zb.js:171 Received pipelineStatusUpdate message: {type: 'pipelineStatusUpdate', video: false, audio: false}
VM299 index-D7DR09zb.js:252 WebSocket not open or not in WebSocket mode, reloading page to reconnect.
VM299 index-D7DR09zb.js:372 Cleanup: Starting cleanup process...
VM299 index-D7DR09zb.js:171 Clearing all VNC stripe decoders.
VM299 index-D7DR09zb.js:171 All VNC stripe decoders and metadata cleared.
VM299 index-D7DR09zb.js:372 Uncaught ReferenceError: serverClipboardContent is not defined
    at M4 (VM299 index-D7DR09zb.js:372:2572)
    at VM299 index-D7DR09zb.js:252:19792
M4 @ VM299 index-D7DR09zb.js:372
(anonymous) @ VM299 index-D7DR09zb.js:252Understand this error
VM299 index-D7DR09zb.js:171 Uncaught TypeError: Cannot read properties of null (reading 'state')
    at Qe.onstatechange (VM299 index-D7DR09zb.js:171:40861)
Qe.onstatechange @ VM299 index-D7DR09zb.js:171Understand this error
VM299 index-D7DR09zb.js:171 Tab is hidden, stopping video pipeline if active.
VM395 universalTouchGamepad.js:862 Universal Touch Gamepad library loaded. Send 'TOUCH_GAMEPAD_SETUP' message to initialize.
DuS8HLZdu1mi3Sx4NLDHeGTvTAnM5Ok_7BjzVYNyGyc/:1  GET https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015 net::ERR_BLOCKED_BY_CLIENTUnderstand this error
VM406 index-D7DR09zb.js:171 Canvas internal buffer reset to: 1024x768
VM406 index-D7DR09zb.js:171 Reset canvas CSS to 1024px x 768px, Pos -512,-384, object-fit: fill. Buffer: 1024x768
VM406 index-D7DR09zb.js:80 Smoothing enabled for manual resolution or high-DPR scaling.
VM406 index-D7DR09zb.js:171 Initialized UI in Auto Resolution Mode (defaulting to 1024x768 logical for now)
VM406 index-D7DR09zb.js:171 Dynamically added #keyboard-input-assist element.
VM406 index-D7DR09zb.js:372 Pre-flight checks passed: Secure context and VideoDecoder API are available.
VM406 index-D7DR09zb.js:171 initializeDecoder function assigned to triggerInitializeDecoder.
VM406 index-D7DR09zb.js:80 Dashboard: Detected browser language: pt-BR, using primary: pt
VM406 index-D7DR09zb.js:80 Dashboard: Mobile detected via userAgentData.mobile: false

Container logs:

[pcmflux] Status | Read: 101, Silent: 0 (0.0%), Encoded: 101, Rate: 1.21 kbps
Res: 1710x838 Mode: H264 (CPU) CS_IN:I420 LR FF Stripes: 1 CRF:25 EncFPS: 32.00 EncStripes/s: 32.00
Res: 1710x838 Mode: H264 (CPU) CS_IN:I420 LR FF Stripes: 1 CRF:25 EncFPS: 29.00 EncStripes/s: 29.00
[pcmflux] Status | Read: 99, Silent: 0 (0.0%), Encoded: 99, Rate: 1.19 kbps
Res: 1710x838 Mode: H264 (CPU) CS_IN:I420 LR FF Stripes: 1 CRF:25 EncFPS: 27.00 EncStripes/s: 27.00
WARNING:data_websocket:Data WS closed with error from ('127.0.0.1', 48428): sent 1011 (internal error) keepalive ping timeout; no close frame received
INFO:data_websocket:Cleaning up Data WS handler for ('127.0.0.1', 48428)...
INFO:data_websocket:Last client (('127.0.0.1', 48428)) disconnected. Cancelling frame backpressure task.
INFO:data_websocket:No other clients in set after ('127.0.0.1', 48428) disconnected. Marking pipelines for stop.
INFO:data_websocket:Stopping global pipelines due to last client disconnect (('127.0.0.1', 48428)).
INFO:main:Initiating unified pipeline shutdown...
INFO:data_websocket:Stats sender: WS connection closed.
INFO:main:Queueing x264-striped capture stop.
INFO:main:Queueing pcmflux audio capture stop.
INFO:main:Waiting for 2 capture module(s) to stop...
Capture loop stopped. X resources released.
[pcmflux] Stop requested. Cleaning up capture loop...
[pcmflux] Audio capture loop finished. Resources released.
INFO:main:All C++ capture modules have stopped.
INFO:data_websocket:Frame-based backpressure logic task cancelled.
INFO:data_websocket:Frame-based backpressure logic task finished.
INFO:data_websocket:Backpressure task was stopped. Calling _reset_frame_ids_and_notify.
INFO:data_websocket:Resetting frame IDs.
INFO:data_websocket:Frame IDs reset, but no clients to notify.
INFO:data_websocket:pcmflux audio chunk broadcasting task cancelled.
INFO:data_websocket:pcmflux audio chunk broadcasting task finished.
INFO:main:Unified pipeline shutdown complete.
INFO:data_websocket:Data WS handler for ('127.0.0.1', 48428) finished all cleanup.
INFO:data_websocket:Data WebSocket connected from ('127.0.0.1', 37610)
INFO:data_websocket:Broadcasting stream resolution: {"type": "stream_resolution", "width": 1710, "height": 838}
INFO:data_websocket:Sending last known cursor to new client ('127.0.0.1', 37610)
INFO:data_websocket:Attempting to establish PulseAudio connection...
INFO:data_websocket:PulseAudio connection established.
INFO:data_websocket:Applying client settings (initial=True): {'videoBitRate': 8000, 'videoFramerate': 60, 'videoCRF': 25, 'encoder': 'x264enc', 'h264_fullcolor': False, 'h264_streaming_mode': False, 'resizeRemote': True, 'isManualResolutionMode': False, 'manualWidth': 1710, 'manualHeight': 838, 'audioBitRate': 320000, 'videoBufferSize': 0, 'initialClientWidth': 1710, 'initialClientHeight': 838, 'jpeg_quality': 60, 'paint_over_jpeg_quality': 90, 'use_cpu': False, 'h264_paintover_crf': 18, 'h264_paintover_burst_frames': 5, 'use_paint_over_quality': True, 'scaling_dpi': 96}
INFO:data_websocket:Applying SCALING_DPI from initial settings: 96
INFO:gst_app_resize:XFCE detected. Applying xfconf-query for DPI 96.
INFO:gst_app_resize:Successfully set XFCE DPI to 96 using xfconf-query.
INFO:data_websocket:Successfully set DPI to 96 from initial settings.
INFO:data_websocket:Attempting to set cursor size to 32 based on initial DPI.
INFO:data_websocket:Successfully set cursor size to 32.
WARNING:data_websocket:Pipeline is inactive for the initial client. Forcing a start.
INFO:data_websocket:Video pipeline for x264enc needs to start (was not active or forced).
INFO:data_websocket:Starting x264enc: 1710x838 @ 60.0fps, CRF: 25, FullFrame: True
WARNING:data_websocket:Attempting to start backpressure task, but client_settings_received event is not set or None. The task will wait for this event. Ensure it's set when initial client settings are processed.
INFO:data_websocket:Trying to ensure client_settings_received is set for backpressure task start.
X Shared Memory Extension available.
XShm setup complete for 1710x838.
CPU cores available: 4
INFO:data_websocket:New frame backpressure task started (current encoder: 'x264enc').
INFO:data_websocket:x264enc capture started successfully.
INFO:data_websocket:Initial client settings message processed by ws_handler.
INFO:data_websocket:Initial setup: Audio pipeline not yet active, attempting start.
INFO:data_websocket:Starting pcmflux audio pipeline...
INFO:data_websocket:pcmflux settings: device='', bitrate=320000, channels=2
INFO:data_websocket:Frame-based backpressure logic task started.
INFO:data_websocket:Client settings received, proceeding with backpressure loop.
[pcmflux] Attempting to connect to PulseAudio device: system_default...
INFO:data_websocket:pcmflux audio capture started successfully.
[pcmflux] SUCCESS: Connected to PulseAudio.
[pcmflux] SUCCESS: Opus encoder created.
[pcmflux] Capture loop started. Device: system_default, Rate: 48000, Channels: 2, Bitrate: 320 kbps, VBR: On, Silence Gate: Off, PCM Chunk: 3840 bytes
INFO:data_websocket:pcmflux audio chunk broadcasting task started.
INFO:data_websocket:Received START_VIDEO for encoder: x264enc
INFO:data_websocket:x264enc pipeline is already capturing.
INFO:data_websocket:Received START_AUDIO command from client for server-to-client audio.
INFO:data_websocket:START_AUDIO: pcmflux audio pipeline already active.
[pcmflux] First non-silent audio chunk detected! Encoding...
Res: 1710x838 Mode: H264 (CPU) CS_IN:I420 LR FF Stripes: 1 CRF:25 EncFPS: 33.00 EncStripes/s: 33.00
Res: 1710x838 Mode: H264 (CPU) CS_IN:I420 LR FF Stripes: 1 CRF:25 EncFPS: 31.00 EncStripes/s: 31.00

[github-actions]

Thanks for opening your first issue here! Be sure to follow the relevant issue templates, or risk having this issue marked as invalid.

[felipecrs]

I must be crazy or something like that. I can no longer reproduce this issue.

No wonder, as the WebSockets library already runs a keepalive by default on every 20 seconds:

https://websockets.readthedocs.io/en/stable/topics/keepalive.html#keepalive-in-websockets

Not to mention that countless frames seem to be exchanged every second anyway (I can see this by running selkies with --debug).