From c70200e0f870022db2ec3ec4f07a31aed30b24e6 Mon Sep 17 00:00:00 2001
From: chimurai <655241+chimurai@users.noreply.github.com>
Date: Fri, 12 Jul 2019 21:16:54 +0200
Subject: [PATCH] fix(ws): fix concurrent ws requests (#344)

---
 dist/http-proxy-middleware.js | 23 +++++-----
 examples/websocket/index.html | 81 +++++++++++++++++++++--------------
 package.json                  |  9 ++--
 src/http-proxy-middleware.ts  | 25 +++++------
 4 files changed, 74 insertions(+), 64 deletions(-)

diff --git a/dist/http-proxy-middleware.js b/dist/http-proxy-middleware.js
index 477d6867..5f942029 100644
--- a/dist/http-proxy-middleware.js
+++ b/dist/http-proxy-middleware.js
@@ -19,7 +19,7 @@ const Router = require("./router");
 class HttpProxyMiddleware {
     constructor(context, opts) {
         this.logger = logger_1.getInstance();
-        this.wsInitialized = false;
+        this.wsInternalSubscribed = false;
         // https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript#red-flags-for-this
         this.middleware = (req, res, next) => __awaiter(this, void 0, void 0, function* () {
             if (this.shouldProxy(this.config.context, req)) {
@@ -35,16 +35,12 @@ class HttpProxyMiddleware {
             }
         });
         this.catchUpgradeRequest = server => {
-            // subscribe once; don't subscribe on every request...
-            // https://github.com/chimurai/http-proxy-middleware/issues/113
-            if (!this.wsInitialized) {
-                server.on('upgrade', this.wsUpgradeDebounced);
-                this.wsInitialized = true;
-            }
+            server.on('upgrade', this.handleUpgrade);
+            // prevent duplicate upgrade handling;
+            // in case external upgrade is also configured
+            this.wsInternalSubscribed = true;
         };
         this.handleUpgrade = (req, socket, head) => {
-            // set to initialized when used externally
-            this.wsInitialized = true;
             if (this.shouldProxy(this.config.context, req)) {
                 const activeProxyOptions = this.prepareProxyRequest(req);
                 this.proxy.ws(req, socket, head, activeProxyOptions);
@@ -120,8 +116,6 @@ class HttpProxyMiddleware {
             const errReference = 'https://nodejs.org/api/errors.html#errors_common_system_errors'; // link to Node Common Systems Errors page
             this.logger.error(errorMessage, req.url, hostname, target, err.code || err, errReference);
         };
-        // https://github.com/chimurai/http-proxy-middleware/issues/57
-        this.wsUpgradeDebounced = _.debounce(this.handleUpgrade);
         this.config = config_factory_1.createConfig(context, opts);
         this.proxyOptions = this.config.options;
         // create proxy
@@ -134,8 +128,11 @@ class HttpProxyMiddleware {
         this.proxy.on('error', this.logError);
         // https://github.com/chimurai/http-proxy-middleware/issues/19
         // expose function to upgrade externally
-        // middleware.upgrade = wsUpgradeDebounced
-        this.middleware.upgrade = this.wsUpgradeDebounced;
+        this.middleware.upgrade = (req, socket, head) => {
+            if (!this.wsInternalSubscribed) {
+                this.handleUpgrade(req, socket, head);
+            }
+        };
     }
 }
 exports.HttpProxyMiddleware = HttpProxyMiddleware;
diff --git a/examples/websocket/index.html b/examples/websocket/index.html
index 001dc931..27519122 100644
--- a/examples/websocket/index.html
+++ b/examples/websocket/index.html
@@ -30,15 +30,15 @@ <h2>WebSocket demo</h2>
         <p>
             <label for="location">location:</label>
             <input id="location" type="text" value="ws://localhost:3000">
-            <button id="connect">connect</button>
-            <button id="disconnect" disabled="disabled">disconnect</button>
+            <button id="connectBtn">connect</button>
+            <button id="disconnectBtn" disabled="disabled">disconnect</button>
         </p>
     </fieldset>
     <fieldset id="messaging" disabled="disabled">
         <p>
             <label for="message">message:</label>
             <input type="text" id="message" value="Hello WebSocket">
-            <button id="send">send</button>
+            <button id="sendBtn">send</button>
         </p>
         <p>
             <label for="logger">log:</label>
@@ -49,44 +49,61 @@ <h2>WebSocket demo</h2>
     <script>
     window.onload = function () {
         // elements
-        var configuration = document.getElementById('configuration');
-        var location      = document.getElementById('location');
-        var connect       = document.getElementById('connect');
-        var disconnect    = document.getElementById('disconnect');
-        var messaging     = document.getElementById('messaging');
-        var message       = document.getElementById('message');
-        var send          = document.getElementById('send');
-        var logger        = document.getElementById('logger');
+        const configuration = document.getElementById('configuration');
+        const location      = document.getElementById('location');
+        const connectBtn    = document.getElementById('connectBtn');
+        const disconnectBtn = document.getElementById('disconnectBtn');
+        const messaging     = document.getElementById('messaging');
+        const message       = document.getElementById('message');
+        const sendBtn       = document.getElementById('sendBtn');
+        const logger        = document.getElementById('logger');
 
         // ws
-        var socket;
-
-        connect.onclick = function () {
-            connect.disabled = true;
-            disconnect.disabled = false;
-            messaging.disabled = false;
-
-            socket = new WebSocket(location.value);
-            socket.onopen    = function () { log('CONNECTED'); };
-            socket.onclose   = function () { log('DISCONNECTED'); };
-            socket.onerror   = function () { log('SOCKET ERROR OCCURED'); };
-            socket.onmessage = function (msg) { log('RECEIVED:' + msg.data); };
+        let socket;
+
+        connectBtn.onclick = () => { connect(); }
+        disconnectBtn.onclick = () => { disconnect(); }
+        sendBtn.onclick = () => { sendMessage(message.value); }
+
+        function connect() {
+          setupSocket(location.value);
         }
 
-        disconnect.onclick = function () {
-            connect.disabled = false;
-            disconnect.disabled = true;
-            messaging.disabled = true;
-            socket.close();
+        function disconnect() {
+          socket.close();
+          socket = undefined;
         }
 
-        send.onclick = function () {
-            log('SEND: ' + message.value);
-            socket.send(message.value);
+        function sendMessage(val) {
+          log('SEND: ' + val);
+          socket.send(val);
         };
 
+        function setupSocket(url) {
+          socket = new WebSocket(url);
+          socket.addEventListener('open', () => {
+            log('CONNECTED');
+            toggleControls();
+          })
+          socket.addEventListener('close', () => {
+            log('DISCONNECTED');
+            toggleControls()
+          })
+          socket.addEventListener('error', () => { log('SOCKET ERROR OCCURED'); })
+          socket.addEventListener('message', (msg) => { log('RECEIVED:' + msg.data); })
+        }
+
         function log (message) {
-            logger.value = logger.value + message + '\n'
+          logger.value = logger.value + message + '\n';
+          logger.scrollTop = logger.scrollHeight; // scroll to bottom
+        }
+
+        function toggleControls() {
+          [connectBtn, disconnectBtn, messaging].forEach(el => toggleEnabled(el))
+        }
+
+        function toggleEnabled(el) {
+          el.disabled = (el.disabled) ? false : true;
         }
 
     }
diff --git a/package.json b/package.json
index 62ebc810..d6aa422c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "http-proxy-middleware",
-  "version": "0.19.1",
+  "version": "0.20.0-beta.2",
   "description": "The one-liner node.js proxy middleware for connect, express and browser-sync",
   "main": "dist/index.js",
   "files": [
@@ -15,11 +15,12 @@
     "build": "tsc",
     "pretest": "yarn build",
     "test": "jest --runInBand",
-    "precover": "yarn clean && npm run build",
+    "precover": "yarn clean && yarn build",
     "cover": "jest --runInBand --coverage",
-    "precoveralls": "yarn clean && npm run build",
+    "precoveralls": "yarn clean && yarn build",
     "coveralls": "jest --runInBand --coverage --coverageReporters=text-lcov | coveralls",
-    "postcoveralls": "yarn clean"
+    "postcoveralls": "yarn clean",
+    "prepublish": "yarn build"
   },
   "repository": {
     "type": "git",
diff --git a/src/http-proxy-middleware.ts b/src/http-proxy-middleware.ts
index a1025da1..b8757757 100644
--- a/src/http-proxy-middleware.ts
+++ b/src/http-proxy-middleware.ts
@@ -9,16 +9,13 @@ import * as Router from './router';
 
 export class HttpProxyMiddleware {
   private logger = getInstance();
-  private wsUpgradeDebounced;
   private config;
-  private wsInitialized = false;
+  private wsInternalSubscribed = false;
   private proxyOptions;
   private proxy;
   private pathRewriter;
 
   constructor(context, opts) {
-    // https://github.com/chimurai/http-proxy-middleware/issues/57
-    this.wsUpgradeDebounced = _.debounce(this.handleUpgrade);
     this.config = createConfig(context, opts);
     this.proxyOptions = this.config.options;
 
@@ -42,8 +39,11 @@ export class HttpProxyMiddleware {
 
     // https://github.com/chimurai/http-proxy-middleware/issues/19
     // expose function to upgrade externally
-    // middleware.upgrade = wsUpgradeDebounced
-    (this.middleware as any).upgrade = this.wsUpgradeDebounced;
+    (this.middleware as any).upgrade = (req, socket, head) => {
+      if (!this.wsInternalSubscribed) {
+        this.handleUpgrade(req, socket, head);
+      }
+    };
   }
 
   // https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript#red-flags-for-this
@@ -62,18 +62,13 @@ export class HttpProxyMiddleware {
   };
 
   private catchUpgradeRequest = server => {
-    // subscribe once; don't subscribe on every request...
-    // https://github.com/chimurai/http-proxy-middleware/issues/113
-    if (!this.wsInitialized) {
-      server.on('upgrade', this.wsUpgradeDebounced);
-      this.wsInitialized = true;
-    }
+    server.on('upgrade', this.handleUpgrade);
+    // prevent duplicate upgrade handling;
+    // in case external upgrade is also configured
+    this.wsInternalSubscribed = true;
   };
 
   private handleUpgrade = (req, socket, head) => {
-    // set to initialized when used externally
-    this.wsInitialized = true;
-
     if (this.shouldProxy(this.config.context, req)) {
       const activeProxyOptions = this.prepareProxyRequest(req);
       this.proxy.ws(req, socket, head, activeProxyOptions);