read out the smics port from .env for client

src/public/components/SideMenu.js

@@ -21,6 +21,8 @@ import { withAuth } from "../hooks/auth"
 import { withRouter } from "react-router-dom"
 import "./scss/sideMenu.scss"
 
+import "./../hooks/socket"
+
 class SideMenu extends Component {
   // static propTypes = {
   //   match: PropTypes.object.isRequired,
@@ -34,7 +36,8 @@ class SideMenu extends Component {
     this.state = {}
     this.hostname = window.location.hostname
     this.protocol = window.location.protocol
-    this.port = 9787
+    // this.port = window.smics_port ? window.smics_port : 9999
+    // this.port = props.get_smics_port()
 
     this.translate = props.translate
   }
@@ -136,7 +139,11 @@ class SideMenu extends Component {
       () => {
         // console.log("STATISTIC MODULE BUTTON PRESSED")
         window.open(
-          this.protocol + "//" + this.hostname + ":" + this.port,
+          this.protocol +
+            "//" +
+            this.hostname +
+            ":" +
+            this.props.get_smics_port(),
           "_blank"
         )
       },

src/public/hooks/socket.js

@@ -11,20 +11,18 @@ const socketUrl = protocol + "//" + hostname + ":" + port
 export const SocketContext = createContext()
 
 // Provider component that makes socket context available to any child component
-export function SocketProvider({ children})  {
+export function SocketProvider({ children }) {
   const socket = useProvideSocket()
   return (
-    <SocketContext.Provider value={socket}>
-      {children}
-    </SocketContext.Provider>
+    <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
   )
 }
 
 SocketProvider.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]).isRequired
+    PropTypes.node,
+  ]).isRequired,
 }
 
 // Hook for child components to get the socket object and re-render when it changes
@@ -49,15 +47,15 @@ function useProvideSocket() {
   // Return the socket client object and state methods
   return {
     client,
-    replaceClient
+    replaceClient,
   }
 }
 
 // Higher Order Component to make socket object available for class components
 export function withSocket(WrappedComponent) {
-  const SocketHOC = function(props) {
+  const SocketHOC = function (props) {
     const socket = useSocket()
     return <WrappedComponent socket={socket} {...props} />
   }
   return SocketHOC
-}
+}

src/public/modules/Main.js

@@ -14,7 +14,7 @@ import { sankey, sankeyLinkHorizontal } from "../vis/d3-sankey"
 // import logo_svg from "../assets/highmed_logo.svg"
 // import tud_svg from "../assets/TU_Darmstadt_Logo.svg"
 
-import HeaderMenu from "../components/HeaderMenu"
+// import HeaderMenu from "../components/HeaderMenu"
 import LegendWindow from "./LegendWindow"
 import * as Translator from "./translator.json"
 import { withSocket } from "../hooks/socket"
@@ -45,6 +45,8 @@ class Main extends Component {
 
     this.subscriptions = []
 
+    this.smics_port = 9999
+
     this.open_modules = []
 
     this.current_language_index = 0
@@ -2998,6 +3000,8 @@ class Main extends Component {
     })
   }
 
+  get_smics_port = () => this.smics_port
+
   change_to_next_language = () => {
     if (this.current_language_index < this.all_languages.length - 1) {
       this.current_language_index++
@@ -3447,6 +3451,13 @@ class Main extends Component {
     //   this.publish_to("MEIN TOPIC", "meine message lol")
     // }, 1000)
 
+    self.socket.on("smics_port", (payload) => {
+      console.log("Smics-Port from .env file:", payload)
+      this.smics_port = payload
+    })
+
+    self.socket.emit("getSmicsPort")
+
     self.socket.on("new_parameters", (payload) => {
       this.set_complete_parameters(payload.frontend_parameters)
       // this.save_current_state(
@@ -4189,6 +4200,7 @@ class Main extends Component {
           <Flex_LM
             key="MEIN_LM"
             {...this.state}
+            get_smics_port={this.get_smics_port}
             change_to_next_language={this.change_to_next_language}
             requestVisData={this.requestVisData}
             reload_state={this.reload_state}

src/server/websocket_api.ts

@@ -132,6 +132,11 @@ export class WebsocketApi {
       ]
       printArrayInColor(clientConnected, cli_color.white)
     }
+    client.on("getSmicsPort", () => {
+      let smics_port = this.getSmicsPort()
+      console.log("Sending Smics-Port from .env file", smics_port)
+      client.emit("smics_port", smics_port)
+    })
 
     client.on("disconnect", this.onDisconnected)
     client.on("error", this.onError)
@@ -376,6 +381,10 @@ export class WebsocketApi {
     }
   }
 
+  private getSmicsPort = (): number => {
+    return CONFIG.smics_port
+  }
+
   /**
    * Called when an error occurred with a specific client.
    */