Add fixes for proxy

index.js

@@ -334,7 +334,7 @@ app.get('/getDevices', (req, res) => {
  */
 
 wss.on('connection', (ws, request) => {
-  const clientIp = request.connection.remoteAddress;
+  const clientIp = request.headers['x-forwarded-for'] || request.connection.remoteAddress;
   currentUsers++;
   dataHandler.showOnlineUsers(currentUsers);
 

web/index.ejs

@@ -11,7 +11,7 @@
 
     <meta property="og:title" content="FM-DX WebServer">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="/favicon2.png">
+    <meta property="og:image" content="favicon2.png">
     <meta property="og:description" content="This server us running the FM-DX Webserver software by Noobish.">
 
     <!-- 3LAS Scripts for Audio streaming -->
@@ -230,11 +230,11 @@
             </div>
 
             <% if (isAdminAuthenticated) { %>
-                <p>You are logged in as an adminstrator.  <a href="/setup">Setup</a> | <a class="logout-link" href="#">Logout</a></p>
+                <p>You are logged in as an adminstrator.  <a href="./setup">Setup</a> | <a class="logout-link" href="#">Logout</a></p>
             <% } else if (isTuneAuthenticated) { %>
                 <p>You are logged in and can control the receiver. <a class="logout-link" href="#">Logout</a></p>
             <% } else { %>
-                <form action="/login" method="post" id="login-form">
+                <form action="./login" method="post" id="login-form">
                   <label for="password">Password:</label>
                   <input type="password" id="password" name="password" required>
                   <button type="submit" class="br-0 w-100" style="height: 44px">Login</button>

web/js/main.js

@@ -1,7 +1,6 @@
-var hostParts = window.location.host.split(':');
-var hostname = hostParts[0]; // Extract the hostname
-var port = hostParts[1] || '8080'; // Extract the port or use a default (e.g., 8080)
-var socketAddress = 'ws://' + hostname + ':' + port + '/text'; // Use 'wss' for secure WebSocket connections (recommended for external access)
+var url = new URL('text', window.location.href);
+url.protocol = url.protocol.replace('http', 'ws');
+var socketAddress = url.href;
 var socket = new WebSocket(socketAddress);
 var parsedData;
 var data = [];
@@ -121,7 +120,7 @@ $(document).ready(function() {
 
 function getInitialSettings() {
     $.ajax({
-        url: '/static_data',
+        url: './static_data',
         dataType: 'json',
         success: function(data) {
             // Use the received data (data.qthLatitude, data.qthLongitude) as needed

web/js/settings.js

@@ -54,7 +54,7 @@
         // Perform an AJAX request to the /login endpoint
         $.ajax({
             type: 'POST',
-            url: '/login',
+            url: './login',
             data: $(this).serialize(),
             success: function (data) {
                 // Update the content on the page with the message from the response
@@ -83,7 +83,7 @@
         // Perform an AJAX request to the /logout endpoint
         $.ajax({
             type: 'GET',  // Assuming the logout is a GET request, adjust accordingly
-            url: '/logout',
+            url: './logout',
             success: function (data) {
                 // Update the content on the page with the message from the response
                 $('#login-message').text(data.message);

web/js/setup.js

@@ -2,10 +2,6 @@ var map;
 var pin;
 var tilesURL='https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.png';
 var mapAttrib='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles by <a href="http://stadiamaps.com/" target="_blank">Stadiamaps</a>';
-var hostParts = window.location.host.split(':');
-var hostname = hostParts[0]; // Extract the hostname
-var port = hostParts[1] || '80'; // Extract the port or use a default (e.g., 8080)
-var serverAddress = 'http://' + hostname + ':' + port;
 
 // add map container
 
@@ -36,7 +32,7 @@ $(document).ready(function() {
     // Perform an AJAX request to the /login endpoint
     $.ajax({
       type: 'POST',
-      url: '/login',
+      url: './login',
       data: $(this).serialize(),
       success: function (data) {
         // Update the content on the page with the message from the response
@@ -65,7 +61,7 @@ $(document).ready(function() {
     // Perform an AJAX request to the /logout endpoint
     $.ajax({
       type: 'GET',  // Assuming the logout is a GET request, adjust accordingly
-      url: '/logout',
+      url: './logout',
       success: function (data) {
         // Update the content on the page with the message from the response
         $('#login-message').text(data.message);
@@ -108,7 +104,7 @@ function MapCreate() {
 
 function fetchData() {
     // Make a GET request to retrieve the data.json file
-    fetch(serverAddress + "/getData")
+    fetch("./getData")
       .then(response => {
         if (!response.ok) {
           throw new Error(`HTTP error! Status: ${response.status}`);
@@ -231,7 +227,7 @@ function submitData() {
     }
     // Send data to the server using jQuery
     $.ajax({
-      url: serverAddress + '/saveData',
+      url: './saveData',
       type: 'POST',
       contentType: 'application/json',
       data: JSON.stringify(data),

web/js/webserver.js

@@ -1,4 +1,4 @@
-$.getScript('/js/main.js');
-$.getScript('/js/dropdown.js');
-$.getScript('/js/modal.js');
-$.getScript('/js/settings.js');
+$.getScript('./js/main.js');
+$.getScript('./js/dropdown.js');
+$.getScript('./js/modal.js');
+$.getScript('./js/settings.js');

web/setup.ejs

@@ -150,7 +150,7 @@
         <div class="panel-100 no-bg">
             <p>Feel free to contact us on <a href="https://discord.gg/ZAVNdS74mC" target="_blank"><strong><i class="fa-brands fa-discord"></i> Discord</strong></a> for community support.</p>
         </div>
-        <button onclick="document.location.href='/'" id="back-btn" aria-label="Go back to tuning"><i class="fa-solid fa-arrow-left"></i></button>
+        <button onclick="document.location.href='./'" id="back-btn" aria-label="Go back to tuning"><i class="fa-solid fa-arrow-left"></i></button>
         <% } else { %>
         <div class="panel-100 no-bg">
             <h1>FM-DX WebServer</h1>
@@ -160,7 +160,7 @@
         </div>
         <div class="panel-100 p-bottom-20">
             <h2>LOGIN</h2>
-            <form action="/login" method="post" id="login-form">
+            <form action="./login" method="post" id="login-form">
                 <input style="background-color: var(--color-2);" type="password" id="password" name="password" required>
                 <button type="submit" class="br-0 w-100" style="height: 44px;">Login</button>
               </form>