add websocket protocol in Configuration.js

Author: roguib

dev.env

@@ -3,4 +3,6 @@ BASE_URL_DOMAIN="localhost"
 BASE_URL_PORT=7001
 BASE_URL_PATH="/"
 
+WEBSOCKET_PROTOCOL="ws"
+
 DB_PASSWORD="password"

docker-compose.yaml

@@ -38,6 +38,7 @@ services:
         BASE_URL_DOMAIN: $BASE_URL_DOMAIN
         BASE_URL_PORT: $BASE_URL_PORT
         BASE_URL_PATH: $BASE_URL_PATH
+        WEBSOCKET_PROTOCOL: $WEBSOCKET_PROTOCOL
       dockerfile: ./microservices/playground-ws/Dockerfile
     ports:
       - "7001:7001"

microservices/playground-ws/Dockerfile

@@ -7,11 +7,13 @@ ARG BASE_URL_PROTOCOL
 ARG BASE_URL_DOMAIN
 ARG BASE_URL_PORT
 ARG BASE_URL_PATH
+ARG $WEBSOCKET_PROTOCOL
 
 RUN echo "BASE_URL_PROTOCOL variable is $BASE_URL_PROTOCOL"
 RUN echo "BASE_URL_DOMAIN variable is $BASE_URL_DOMAIN"
 RUN echo "BASE_URL_PORT variable is $BASE_URL_PORT"
 RUN echo "BASE_URL_PATH variable is $BASE_URL_PATH"
+RUN echo "WEBSOCKET_PROTOCOL variable is $WEBSOCKET_PROTOCOL"
 
 # Install maven
 WORKDIR /usr/share
@@ -32,12 +34,14 @@ ADD microservices/playground-ws/src src
 # Incremental docker builds will always resume after that, unless you update
 # the pom
 ADD microservices/playground-ws/pom.xml .
-RUN mvn -Dbase.url.protocol="$BASE_URL_PROTOCOL" -Dbase.url.domain="$BASE_URL_DOMAIN" -Dbase.url.port="$BASE_URL_PORT" -Dbase.url.path="$BASE_URL_PATH" package -Prelease -Dmaven.test.skip
+RUN mvn -Dbase.url.protocol="$BASE_URL_PROTOCOL" -Dbase.url.domain="$BASE_URL_DOMAIN" -Dbase.url.port="$BASE_URL_PORT" \
+    -Dbase.url.path="$BASE_URL_PATH" -Dwebsocket.protocol="$WEBSOCKET_PROTOCOL" package -Prelease -Dmaven.test.skip
 
 # Do the Maven build!
 # Incremental docker builds will resume here when you change sources
 ADD microservices/playground-ws/src src
-RUN mvn -Dbase.url.protocol="$BASE_URL_PROTOCOL" -Dbase.url.domain="$BASE_URL_DOMAIN" -Dbase.url.port="$BASE_URL_PORT" -Dbase.url.path="$BASE_URL_PATH" package -Prelease -Dmaven.test.skip
+RUN mvn -Dbase.url.protocol="$BASE_URL_PROTOCOL" -Dbase.url.domain="$BASE_URL_DOMAIN" -Dbase.url.port="$BASE_URL_PORT" \
+    -Dbase.url.path="$BASE_URL_PATH" -Dwebsocket.protocol="$WEBSOCKET_PROTOCOL" package -Prelease -Dmaven.test.skip
 
 RUN echo "done!"
 

microservices/playground-ws/pom.xml

@@ -86,7 +86,7 @@
                                 </goals>
                                 <phase>generate-resources</phase>
                                 <configuration>
-                                    <arguments>--baseUrlProtocol=${base.url.protocol} --baseUrlDomain=${base.url.domain} --baseUrlPort=${base.url.port} --baseUrlPath=${base.url.path}</arguments>
+                                    <arguments>--baseUrlProtocol=${base.url.protocol} --baseUrlDomain=${base.url.domain} --baseUrlPort=${base.url.port} --baseUrlPath=${base.url.path} --websocketProtocol=${websocket.protocol}</arguments>
                                 </configuration>
                             </execution>
                             <execution>

web/playground/gulpfile.js

@@ -1,7 +1,7 @@
 const { argv } = require('yargs');
 const fs = require('node:fs');
 
-const ConfigurationJs = (protocol, baseUrl, port, path) => `
+const ConfigurationJs = (protocol, baseUrl, port, path, websocketProtocol) => `
 class Configuration {
   static get protocol() {
     return "${protocol}";
@@ -18,6 +18,10 @@ class Configuration {
   static get path() {
     return "${path}";
   }
+
+  static get websocketProtocol() {
+    return "${websocketProtocol}";
+  }
 }
 
 export { Configuration };
@@ -29,14 +33,16 @@ function defaultTask(cb) {
   const baseUrl = argv.baseUrlDomain;
   const port = argv.baseUrlPort;
   const path = argv.baseUrlPath;
+  const websocketProtocol = argv.websocketProtocol;
 
   console.log('=============GULP VARIABLES=============');
   console.log(protocol);
   console.log(baseUrl);
   console.log(port);
   console.log(path);
+  console.log(websocketProtocol);
 
-  const configFile = ConfigurationJs(protocol, baseUrl, port, path);
+  const configFile = ConfigurationJs(protocol, baseUrl, port, path, websocketProtocol);
 
   // create Configuration.js file
   fs.writeFileSync(

web/playground/src/screens/playground/Playground.js

@@ -8,7 +8,7 @@ import { Configuration } from "../../Configuration";
 import "./Playground.scss";
 
 function Playground() {
-  const WEBSOCKET_URL = `wss://${Configuration.baseUrl}${Configuration.port ? ":" + Configuration.port : ""}${Configuration.path}api/websocket`;
+  const WEBSOCKET_URL = `${Configuration.websocketProtocol}://${Configuration.baseUrl}${Configuration.port ? ":" + Configuration.port : ""}${Configuration.path}api/websocket`;
   const [program, setProgram] = useState("");
   const [history, setHistory] = useState([]);
   const [playgroundNotFound, setPlaygroundNotFound] = useState(false);