reconnecter add destroy.

src/component/internal/connection.ts

@@ -18,15 +18,20 @@ class WebsocketReconnecter extends ReconnecterAbstract {
   private _state: Connection
   private _websocket: NekoWebSocket
 
+  private _onConnectHandle: () => void
+  private _onDisconnectHandle: (error?: Error) => void
+
   constructor(state: Connection, websocket: NekoWebSocket) {
     super()
 
     this._state = state
-
-    // TODO: Unmount.
     this._websocket = websocket
-    this._websocket.on('connected', () => this.emit('connect'))
+
-    this._websocket.on('disconnected', (error) => this.emit('disconnect', error))
+    this._onConnectHandle = () => this.emit('connect')
+    this._websocket.on('connected', this._onConnectHandle)
+
+    this._onDisconnectHandle = (error?: Error) => this.emit('disconnect', error)
+    this._websocket.on('disconnected', this._onDisconnectHandle)
   }
 
   public get connected() {
@@ -48,6 +53,11 @@ class WebsocketReconnecter extends ReconnecterAbstract {
   public disconnect() {
     this._websocket.disconnect()
   }
+
+  public destroy() {
+    this._websocket.off('connected', this._onConnectHandle)
+    this._websocket.off('disconnected', this._onDisconnectHandle)
+  }
 }
 
 class WebrtcReconnecter extends ReconnecterAbstract {
@@ -55,16 +65,21 @@ class WebrtcReconnecter extends ReconnecterAbstract {
   private _websocket: NekoWebSocket
   private _webrtc: NekoWebRTC
 
+  private _onConnectHandle: () => void
+  private _onDisconnectHandle: (error?: Error) => void
+
   constructor(state: Connection, websocket: NekoWebSocket, webrtc: NekoWebRTC) {
     super()
 
     this._state = state
     this._websocket = websocket
-
-    // TODO: Unmount.
     this._webrtc = webrtc
-    this._webrtc.on('connected', () => this.emit('connect'))
+
-    this._webrtc.on('disconnected', (error) => this.emit('disconnect', error))
+    this._onConnectHandle = () => this.emit('connect')
+    this._webrtc.on('connected', this._onConnectHandle)
+
+    this._onDisconnectHandle = (error?: Error) => this.emit('disconnect', error)
+    this._webrtc.on('disconnected', this._onDisconnectHandle)
   }
 
   public get connected() {
@@ -80,6 +95,11 @@ class WebrtcReconnecter extends ReconnecterAbstract {
   public disconnect() {
     this._webrtc.disconnect()
   }
+
+  public destroy() {
+    this._webrtc.off('connected', this._onConnectHandle)
+    this._webrtc.off('disconnected', this._onDisconnectHandle)
+  }
 }
 
 export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
@@ -227,6 +247,11 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
     this.emit('disconnect', error)
   }
 
+  public destroy() {
+    this._websocket_reconn.destroy()
+    this._webrtc_reconn.destroy()
+  }
+
   _webrtcQualityDowngrade(quality: string): string | undefined {
     // get index of selected or surrent quality
     const index = this._state.webrtc.videos.indexOf(quality)

src/component/main.vue

@@ -413,6 +413,8 @@
     beforeDestroy() {
       this.observer.disconnect()
       this.connection.disconnect()
+      this.connection.destroy()
+      this.clear()
 
       // remove users first interaction event
       document.removeEventListener('click', this.unmute)

src/component/utils/reconnecter.ts

@@ -15,17 +15,11 @@ export abstract class ReconnecterAbstract extends EventEmitter<ReconnecterAbstra
     }
   }
 
-  public get connected(): boolean {
+  public abstract get connected(): boolean
-    throw new Error("Getter'connected()' must be implemented.")
-  }
 
-  public connect() {
+  public abstract connect(): void
-    throw new Error("Method 'connect()' must be implemented.")
+  public abstract disconnect(): void
-  }
+  public abstract destroy(): void
-
-  public disconnect() {
-    throw new Error("Method 'disconnect()' must be implemented.")
-  }
 }
 
 export interface ReconnecterEvents {
@@ -44,6 +38,9 @@ export class Reconnecter extends EventEmitter<ReconnecterEvents> {
   private _total_reconnects = 0
   private _last_connected?: Date
 
+  private _onConnectHandle: () => void
+  private _onDisconnectHandle: (error?: Error) => void
+
   constructor(conn: ReconnecterAbstract, config?: ReconnecterConfig) {
     super()
 
@@ -55,8 +52,11 @@ export class Reconnecter extends EventEmitter<ReconnecterEvents> {
       ...config,
     }
 
-    this._conn.on('connect', this.onConnect.bind(this))
+    this._onConnectHandle = this.onConnect.bind(this)
-    this._conn.on('disconnect', this.onDisconnect.bind(this))
+    this._conn.on('connect', this._onConnectHandle)
+
+    this._onDisconnectHandle = this.onDisconnect.bind(this)
+    this._conn.on('disconnect', this._onDisconnectHandle)
   }
 
   private onConnect() {
@@ -160,17 +160,28 @@ export class Reconnecter extends EventEmitter<ReconnecterEvents> {
       throw new Error('connection is already connected')
     }
 
+    if (this._timeout) {
+      window.clearTimeout(this._timeout)
+      this._timeout = undefined
+    }
+
     this._total_reconnects++
 
     if (this._config.maxReconnects > this._total_reconnects || this._total_reconnects < 0) {
-      setTimeout(this.connect.bind(this), this._config.backoffMs)
+      this._timeout = window.setTimeout(this.connect.bind(this), this._config.backoffMs)
     } else {
       this.close(new Error('reconnection failed'))
     }
   }
 
   public destroy() {
-    this._conn.off('connect', this.onConnect.bind(this))
+    if (this._timeout) {
-    this._conn.off('disconnect', this.onDisconnect.bind(this))
+      window.clearTimeout(this._timeout)
+      this._timeout = undefined
+    }
+
+    this._conn.off('connect', this._onConnectHandle)
+    this._conn.off('disconnect', this._onDisconnectHandle)
+    this._conn.destroy()
   }
 }