Fix reconnecting websockets on heartbeat timeout

assets/js/phoenix/socket.js

@@ -342,7 +342,9 @@ export default class Socket {
     if(this.pendingHeartbeatRef){
       this.pendingHeartbeatRef = null
       if(this.hasLogger()){ this.log("transport", "heartbeat timeout. Attempting to re-establish connection") }
-      this.abnormalClose("heartbeat timeout")
+      this.triggerChanError()
+      this.closeWasClean = false
+      this.teardown(() => this.reconnectTimer.scheduleTimeout(), WS_CLOSE_NORMAL, "heartbeat timeout")
     }
   }
 
@@ -365,6 +367,9 @@ export default class Socket {
 
       this.waitForSocketClosed(() => {
         if(this.conn){
+          this.conn.onopen = function (){ } // noop
+          this.conn.onerror = function (){ } // noop
+          this.conn.onmessage = function (){ } // noop
           this.conn.onclose = function (){ } // noop
           this.conn = null
         }
@@ -521,11 +526,6 @@ export default class Socket {
     this.heartbeatTimeoutTimer = setTimeout(() => this.heartbeatTimeout(), this.heartbeatIntervalMs)
   }
 
-  abnormalClose(reason){
-    this.closeWasClean = false
-    if(this.isConnected()){ this.conn.close(WS_CLOSE_NORMAL, reason) }
-  }
-
   flushSendBuffer(){
     if(this.isConnected() && this.sendBuffer.length > 0){
       this.sendBuffer.forEach(callback => callback())

assets/test/socket_test.js

@@ -714,18 +714,6 @@ describe("with transports", function(){
       clock.restore()
       done()
     })
-
-    it("does not fail with abnormal close after explicit disconnect", function(done){
-      let clock = sinon.useFakeTimers()
-      const spy = sinon.spy(socket, "abnormalClose")
-      socket.onConnOpen()
-      socket.disconnect()
-      clock.tick(30000)
-      clock.tick(30000)
-      assert.ok(spy.notCalled)
-      clock.restore()
-      done()
-    })
   })
 
   describe("onConnError", function(){

priv/static/phoenix.js

@@ -962,7 +962,9 @@ var Phoenix = (() => {
         if (this.hasLogger()) {
           this.log("transport", "heartbeat timeout. Attempting to re-establish connection");
         }
-        this.abnormalClose("heartbeat timeout");
+        this.triggerChanError();
+        this.closeWasClean = false;
+        this.teardown(() => this.reconnectTimer.scheduleTimeout(), WS_CLOSE_NORMAL, "heartbeat timeout");
       }
     }
     resetHeartbeat() {
@@ -987,6 +989,12 @@ var Phoenix = (() => {
         }
         this.waitForSocketClosed(() => {
           if (this.conn) {
+            this.conn.onopen = function() {
+            };
+            this.conn.onerror = function() {
+            };
+            this.conn.onmessage = function() {
+            };
             this.conn.onclose = function() {
             };
             this.conn = null;
@@ -1102,12 +1110,6 @@ var Phoenix = (() => {
       this.push({ topic: "phoenix", event: "heartbeat", payload: {}, ref: this.pendingHeartbeatRef });
       this.heartbeatTimeoutTimer = setTimeout(() => this.heartbeatTimeout(), this.heartbeatIntervalMs);
     }
-    abnormalClose(reason) {
-      this.closeWasClean = false;
-      if (this.isConnected()) {
-        this.conn.close(WS_CLOSE_NORMAL, reason);
-      }
-    }
     flushSendBuffer() {
       if (this.isConnected() && this.sendBuffer.length > 0) {
         this.sendBuffer.forEach((callback) => callback());

priv/static/phoenix.mjs

@@ -933,7 +933,9 @@ var Socket = class {
       if (this.hasLogger()) {
         this.log("transport", "heartbeat timeout. Attempting to re-establish connection");
       }
-      this.abnormalClose("heartbeat timeout");
+      this.triggerChanError();
+      this.closeWasClean = false;
+      this.teardown(() => this.reconnectTimer.scheduleTimeout(), WS_CLOSE_NORMAL, "heartbeat timeout");
     }
   }
   resetHeartbeat() {
@@ -958,6 +960,12 @@ var Socket = class {
       }
       this.waitForSocketClosed(() => {
         if (this.conn) {
+          this.conn.onopen = function() {
+          };
+          this.conn.onerror = function() {
+          };
+          this.conn.onmessage = function() {
+          };
           this.conn.onclose = function() {
           };
           this.conn = null;
@@ -1073,12 +1081,6 @@ var Socket = class {
     this.push({ topic: "phoenix", event: "heartbeat", payload: {}, ref: this.pendingHeartbeatRef });
     this.heartbeatTimeoutTimer = setTimeout(() => this.heartbeatTimeout(), this.heartbeatIntervalMs);
   }
-  abnormalClose(reason) {
-    this.closeWasClean = false;
-    if (this.isConnected()) {
-      this.conn.close(WS_CLOSE_NORMAL, reason);
-    }
-  }
   flushSendBuffer() {
     if (this.isConnected() && this.sendBuffer.length > 0) {
       this.sendBuffer.forEach((callback) => callback());