diff --git a/client-src/utils/createSocketURL.js b/client-src/utils/createSocketURL.js
index 5d8a28ddbd..bb26d51b85 100644
--- a/client-src/utils/createSocketURL.js
+++ b/client-src/utils/createSocketURL.js
@@ -74,6 +74,7 @@ function format(objURL) {
  */
 function createSocketURL(parsedURL) {
   let { hostname } = parsedURL;
+  let socketURLPort = parsedURL.port;
 
   // Node.js module parses it as `::`
   // `new URL(urlString, [baseURLString])` parses it as '[::]'
@@ -89,6 +90,9 @@ function createSocketURL(parsedURL) {
     self.location.protocol.indexOf("http") === 0
   ) {
     hostname = self.location.hostname;
+    // If we are using the location.hostname for the hostname, we should use the port from
+    // the location as well
+    socketURLPort = self.location.port;
   }
 
   let socketURLProtocol = parsedURL.protocol || self.location.protocol;
@@ -135,8 +139,6 @@ function createSocketURL(parsedURL) {
     "localhost"
   ).replace(/^\[(.*)\]$/, "$1");
 
-  let socketURLPort = parsedURL.port;
-
   if (!socketURLPort || socketURLPort === "0") {
     socketURLPort = self.location.port;
   }
diff --git a/test/client/utils/createSocketURL.test.js b/test/client/utils/createSocketURL.test.js
index 393ed96a50..d7beee7b69 100644
--- a/test/client/utils/createSocketURL.test.js
+++ b/test/client/utils/createSocketURL.test.js
@@ -100,6 +100,16 @@ describe("'createSocketURL' function ", () => {
     [null, "file:///home/user/project/index.html", "ws://localhost/ws"],
     [null, "chrome-extension://localhost/", "ws://localhost/ws"],
     [null, "file://localhost/", "ws://localhost/ws"],
+    [
+      "?protocol=ws:&hostname=0.0.0.0&port=3000&pathname=/ws&logging=none&reconnect=10",
+      "https://app.test.com",
+      "wss://app.test.com/ws",
+    ],
+    [
+      "?protocol=ws:&hostname=0.0.0.0&port=3000&pathname=/ws&logging=none&reconnect=10",
+      "https://app.test.com:7777",
+      "wss://app.test.com:7777/ws",
+    ],
   ];
 
   samples.forEach(([__resourceQuery, location, expected]) => {