auto build socket io url

changedetectionio/__init__.py

@@ -18,6 +18,7 @@ import platform
 import signal
 import socket
 import sys
+from flask import request
 
 from changedetectionio import store
 from changedetectionio.flask_app import changedetection_app
@@ -191,9 +192,23 @@ def main():
 
     @app.context_processor
     def inject_version():
+        # Get server host and port for Socket.IO
+        socket_host = host if host else '127.0.0.1'
+        socket_port = 5005  # Fixed port for Socket.IO server
+
+        # Create Socket.IO URL (use host from proxy if available)
+        socketio_url = None
+        if os.getenv('USE_X_SETTINGS') and 'X-Forwarded-Host' in request.headers:
+            # When behind a proxy, use the forwarded host but maintain the Socket.IO port
+            socketio_url = f"http://{request.headers['X-Forwarded-Host'].split(':')[0]}:{socket_port}"
+        else:
+            # Direct connection
+            socketio_url = f"http://{socket_host}:{socket_port}"
+
         return dict(right_sticky="v{}".format(datastore.data['version_tag']),
                     new_version_available=app.config['NEW_VERSION_AVAILABLE'],
-                    has_password=datastore.data['settings']['application']['password'] != False
+                    has_password=datastore.data['settings']['application']['password'] != False,
+                    socketio_url=socketio_url
                     )
 
     # Monitored websites will not receive a Referer header when a user clicks on an outgoing link.

changedetectionio/flask_app.py

@@ -125,6 +125,23 @@ def get_darkmode_state():
 def get_css_version():
     return __version__
 
+@app.template_global()
+def get_socketio_url():
+    """Generate the correct Socket.IO URL based on the current request"""
+    socket_port = 5005  # Fixed port for Socket.IO server
+
+    if os.getenv('USE_X_SETTINGS') and request.headers.get('X-Forwarded-Host'):
+        # When behind a proxy, use the forwarded host but maintain the Socket.IO port
+        forwarded_host = request.headers['X-Forwarded-Host'].split(':')[0]
+        return f"http://{forwarded_host}:{socket_port}"
+    elif request.host:
+        # Use the current host but with the Socket.IO port
+        client_host = request.host.split(':')[0]
+        return f"http://{client_host}:{socket_port}"
+    else:
+        # Fallback to default
+        return f"http://127.0.0.1:{socket_port}"
+
 @app.template_filter('format_number_locale')
 def _jinja2_filter_format_number_locale(value: float) -> str:
     "Formats for example 4000.10 to the local locale default of 4,000.10"

changedetectionio/realtime/socket_server.py

@@ -126,4 +126,5 @@ class ChangeDetectionSocketIO:
         # Run the Socket.IO server
         # Use 0.0.0.0 to listen on all interfaces
         logger.info(f"Starting Socket.IO server on http://{host}:{port}")
-        self.socketio.run(self.main_app, host=host, port=port, debug=False, use_reloader=False, allow_unsafe_werkzeug=True)
+        self.socketio.run(self.main_app, host=host, port=port, debug=False, use_reloader=False, allow_unsafe_werkzeug=True)
+

changedetectionio/static/js/socket.js

@@ -18,10 +18,10 @@ $(document).ready(function () {
     });
 
 
-    // Try to create the socket connection to port 5005 - if it fails, the site will still work normally
+    // Try to create the socket connection to the SocketIO server - if it fails, the site will still work normally
     try {
-        // Connect to the dedicated Socket.IO server on port 5005
-        const socket = io('http://127.0.0.1:5005');
+        // Connect to the dedicated Socket.IO server using the dynamically generated URL from the template
+        const socket = io(socketio_url);
 
         // Connection status logging
         socket.on('connect', function () {

changedetectionio/templates/base.html

@@ -28,6 +28,7 @@
     <meta name="theme-color" content="#ffffff">
     <script>
         const csrftoken="{{ csrf_token() }}";
+        const socketio_url="{{ get_socketio_url() }}";
     </script>
     <script src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>
     <script src="{{url_for('static_content', group='js', filename='csrf.js')}}" defer></script>