enhance: add config support to provide ws-host param

cmd/root_command.go

@@ -43,6 +43,7 @@ var (
 			var redirectBasePath string
 			var redirectURL string
 			var globalAPIDelay int
+			var wsHost string
 
 			// certs
 			var cert string
@@ -97,6 +98,13 @@ var (
 
 			staticIndex, _ = cmd.Flags().GetString("static-index")
 
+			wsHostFlag, _ := cmd.Flags().GetString("ws-host")
+			if wsHostFlag != "" {
+				wsHost = wsHostFlag
+			} else {
+				wsHost = "localhost"
+			}
+
 			wsPortFlag, _ := cmd.Flags().GetString("ws-port")
 			if wsPortFlag != "" {
 				wsPort = wsPortFlag
@@ -241,6 +249,9 @@ var (
 			if config.WebSocketPort == "" {
 				config.WebSocketPort = wsPort
 			}
+			if config.WebSocketHost == "" {
+				config.WebSocketHost = wsHost
+			}
 			if config.GlobalAPIDelay == 0 {
 				config.GlobalAPIDelay = globalAPIDelay
 			}
@@ -355,6 +366,7 @@ func Execute(version, commit, date string, fs embed.FS) {
 	rootCmd.Flags().StringP("port", "p", "", "Set port on which to listen for HTTP traffic (default is 9090)")
 	rootCmd.Flags().StringP("monitor-port", "m", "", "Set port on which to serve the monitor UI (default is 9091)")
 	rootCmd.Flags().StringP("ws-port", "w", "", "Set port on which to serve the monitor UI websocket (default is 9092)")
+	rootCmd.Flags().StringP("ws-host", "v", "localhost", "Set the backend hostname for wiretap, for remotely deployed service")
 	rootCmd.Flags().StringP("spec", "s", "", "Set the path to the OpenAPI specification to use")
 	rootCmd.Flags().StringP("static", "t", "", "Set the path to a directory of static files to serve")
 	rootCmd.Flags().StringP("static-index", "i", "index.html", "Set the index filename for static file serving (default is index.html)")

cmd/serve_monitor.go

@@ -50,11 +50,9 @@ func serveMonitor(wiretapConfig *shared.WiretapConfiguration) {
 		if wiretapConfig.CertificateKey != "" && wiretapConfig.Certificate != "" {
 			useTLS = "true"
 		}
-
 		// replace the port in the index.html file and serve it.
-		indexString = strings.ReplaceAll(strings.ReplaceAll(strings.ReplaceAll(indexString, shared.WiretapPortPlaceholder, wiretapConfig.WebSocketPort),
-			shared.WiretapVersionPlaceholder, wiretapConfig.Version), shared.WiretapTLSPlaceholder, useTLS)
-
+		indexString = strings.ReplaceAll(strings.ReplaceAll(strings.ReplaceAll(strings.ReplaceAll(indexString, shared.WiretapPortPlaceholder, wiretapConfig.WebSocketPort),
+			shared.WiretapVersionPlaceholder, wiretapConfig.Version), shared.WiretapTLSPlaceholder, useTLS), shared.WiretapHostPlaceholder, wiretapConfig.WebSocketHost)
 		// handle index will serve a modified index.html from the embedded filesystem.
 		// this is so the monitor can connect to the websocket on the correct port.
 		handleIndex := func(w http.ResponseWriter, r *http.Request) {

daemon/templates/socket-include.html

@@ -10,7 +10,7 @@
 <script type="module">
     import { Client } from '@stomp/stompjs';
     const client = new Client({
-        brokerURL: 'ws://localhost:{{ .WebSocketPort }}/ranch',
+        brokerURL: 'ws:// {{ .WebSocketHost }} : {{ .WebSocketPort }}/ranch',
         onConnect: () => {
             client.subscribe("/topic/wiretap-static-change", message => {
                 window.location.reload();

shared/config.go

@@ -19,6 +19,7 @@ type WiretapConfiguration struct {
 	RedirectURL         string                        `json:"redirectURL,omitempty" yaml:"redirectURL,omitempty"`
 	Port                string                        `json:"port,omitempty" yaml:"port,omitempty"`
 	MonitorPort         string                        `json:"monitorPort,omitempty" yaml:"monitorPort,omitempty"`
+	WebSocketHost       string                        `json:"webSocketHost,omitempty" yaml:"webSocketHost,omitempty"`
 	WebSocketPort       string                        `json:"webSocketPort,omitempty" yaml:"webSocketPort,omitempty"`
 	GlobalAPIDelay      int                           `json:"globalAPIDelay,omitempty" yaml:"globalAPIDelay,omitempty"`
 	StaticDir           string                        `json:"staticDir,omitempty" yaml:"staticDir,omitempty"`
@@ -146,6 +147,7 @@ func (wpc *WiretapPathConfig) Compile(key string) *CompiledPath {
 }
 
 const ConfigKey = "config"
+const WiretapHostPlaceholder = "%WIRETAP_HOST%"
 const WiretapPortPlaceholder = "%WIRETAP_PORT%"
 const WiretapTLSPlaceholder = "%WIRETAP_TLS%"
 const WiretapVersionPlaceholder = "%WIRETAP_VERSION%"

ui/index.html

@@ -8,6 +8,7 @@
     <script>
         localStorage.setItem('wiretapPort', '%WIRETAP_PORT%')
         localStorage.setItem('wiretapTLS', '%WIRETAP_TLS%')
+        localStorage.setItem('wiretapHost', '%WIRETAP_HOST%')
         //localStorage.setItem('wiretapPort', '9092');
         //localStorage.setItem('wiretapTLS', 'true');
         const version = '%WIRETAP_VERSION%';

ui/src/wiretap.ts

@@ -43,6 +43,7 @@ export class WiretapComponent extends LitElement {
     private readonly _wiretapConfigChannel: Channel;
     private readonly _staticNotificationChannel: Channel;
     private readonly _wiretapPort: string;
+    private readonly _wiretapHost: string;
     private readonly _wiretapVersion: string;
     private _transactionChannelSubscription: Subscription;
     private _specChannelSubscription: Subscription;
@@ -83,11 +84,16 @@ export class WiretapComponent extends LitElement {
 
         // extract port from session storage.
         this._wiretapPort = localStorage.getItem("wiretapPort");
+        this._wiretapHost = localStorage.getItem("wiretapHost");
 
         if (!this._wiretapPort) {
             this._wiretapPort = "9092"; // default port
         }
 
+        if (!this._wiretapHost) {
+            this._wiretapHost = "localhost"; // default host
+        }
+
         const useTLS = localStorage.getItem("wiretapTLS");
         if (useTLS && useTLS == 'true') {
             this._useTLS = true;
@@ -177,7 +183,7 @@ export class WiretapComponent extends LitElement {
 
         // configure wiretap broker.
         const config = {
-            brokerURL: protocol + 'localhost:' + this._wiretapPort + '/ranch',
+            brokerURL: protocol + this._wiretapHost + ':' + this._wiretapPort + '/ranch',
             heartbeatIncoming: 0,
             heartbeatOutgoing: 0,
             onConnect: () => {