Fix websocket duplication bug. Fix height limit.

public/index.html

@@ -4,7 +4,7 @@
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
-	<title>Bitmap</title>
+	<title>Bitfeed</title>
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>

src/components/TxRender.svelte

@@ -22,8 +22,6 @@
   const baseTime = Date.now()
 
   const nullPointArray = new Float32Array()
-  // const staticPointArray = new Float32Array(JSON.parse("[19.500000000000114,19.500000000000114,1664,0.0006666666666666666,591.8000000000001,28.000000000000018,1664,0.0006666666666666666,0,0,1664,0.000033333333333333335,0,1,1664,0.000033333333333333335,1,1,1664,0.0006666666666666666,27.100000000000115,27.100000000000115,1664,0.0006666666666666666,599.4,35.600000000000016,1664,0.0006666666666666666,0,0,1664,0.000033333333333333335,0,1,1664,0.000033333333333333335,1,1,1664,0.0006666666666666666,27.100000000000115,27.100000000000115,1664,0.0006666666666666666,591.8000000000001,28.000000000000018,1664,0.0006666666666666666,0,0,1664,0.000033333333333333335,0,1,1664,0.000033333333333333335,1,1,1664,0.0006666666666666666,19.500000000000114,19.500000000000114,1664,0.0006666666666666666,591.8000000000001,28.000000000000018,1664,0.0006666666666666666,0,0,1664,0.000033333333333333335,0,1,1664,0.000033333333333333335,1,1,1664,0.0006666666666666666,27.100000000000115,27.100000000000115,1664,0.0006666666666666666,599.4,35.600000000000016,1664,0.0006666666666666666,0,0,1664,0.000033333333333333335,0,1,1664,0.000033333333333333335,1,1,1664,0.0006666666666666666,19.500000000000114,19.500000000000114,1664,0.0006666666666666666,599.4,35.600000000000016,1664,0.0006666666666666666,0,0,1664,0.000033333333333333335,0,1,1664,0.000033333333333333335,1,1,1664,0.0006666666666666666]"
-  // ))
 
   // Props
   export let controller
@@ -120,8 +118,6 @@
     // /* RESET DRAWING AREA */
 
     /* LOAD VERTEX DATA */
-    // pointArray = nullPointArray //getTxPointArray()
-    // pointArray = staticPointArray //getTxPointArray()
     pointArray = getTxPointArray()
     if (config.layoutHints) {
       debugPointArray = getDebugTxPointArray()

src/components/TxViz.svelte

@@ -19,10 +19,6 @@
 
   let currentBlock = null
 
-  $: {
-    console.log('block: ', currentBlock)
-  }
-
   let txStream
   if (!config.nofeed) txStream = getTxStream()
 
@@ -88,8 +84,8 @@
     $darkMode = !$darkMode
   }
 
-  $: connectionColor = $serverConnected ? ($serverDelay < 500 ? 'green' : 'amber') : 'red'
+  $: connectionColor = ($serverConnected && $serverDelay < 5000) ? ($serverDelay < 500 ? 'green' : 'amber') : 'red'
-  $: connectionTitle = $serverConnected ? ($serverDelay < 500 ? 'Receiving live transactions' : 'Unstable connection') : 'No connection'
+  $: connectionTitle = ($serverConnected && $serverDelay < 5000) ? ($serverDelay < 500 ? 'Streaming live transactions' : 'Unstable connection') : 'Disconnected'
   $: {
     if (lastFrameUpdate + 250 < Date.now()) {
       frameRateLabel = Number($frameRate).toFixed(1) + ' FPS'
@@ -241,6 +237,7 @@
   <div class="status-bar right">
     <div class="status-light {connectionColor}" title={connectionTitle}></div>
     {#if config.debug}
+      <span class="stat-counter {connectionColor}">{ $serverDelay } ms</span>
       <span class="stat-counter {connectionColor}">{ $txQueueLength }</span>
       <span class="stat-counter {connectionColor}">{ $txCount }</span>
       {/if}

src/controllers/TxStream.js

@@ -7,12 +7,18 @@ class TxStream {
     this.reconnectBackoff = 128
     this.websocket = null
     this.setConnected(false)
-    this.setDelay(1000)
+    this.setDelay(0)
     this.lastBeat = Date.now()
 
     this.reconnectTimeout = null
     this.heartbeatTimeout = null
 
+    this.delayInterval = setInterval(() => {
+      if (this.lastBeat && this.connected) {
+        this.setDelay(Date.now() - this.lastBeat)
+      }
+    }, 789)
+
     this.init()
   }
 
@@ -27,15 +33,17 @@ class TxStream {
   }
 
   init () {
+    if (!this.connected && (!this.websocket || this.websocket.readyState === WebSocket.CLOSED)) {
       try {
-      this.websocket = new WebSocket(this.websocketUri)
+        if (!this.websocket) this.websocket = new WebSocket(this.websocketUri)
         this.websocket.onopen = (evt) => { this.onopen(evt) }
         this.websocket.onclose = (evt) => { this.onclose(evt) }
         this.websocket.onmessage = (evt) => { this.onmessage(evt) }
         this.websocket.onerror = (evt) => { this.onerror(evt) }
       } catch (error) {
-      // console.log('failed to open websocket: ', error)
+        this.reconnect()
       }
+    } else this.reconnect()
   }
 
   reconnect () {
@@ -50,22 +58,43 @@ class TxStream {
     if (this.heartbeatTimeout) clearTimeout(this.heartbeatTimeout)
     if (this.reconnectTimeout) clearTimeout(this.reconnectTimeout)
     this.setDelay(Date.now() - this.lastBeat)
+    this.lastBeat = null
     this.setConnected(true)
-    this.heartbeatTimeout = setTimeout(() => { this.sendHeartbeat() }, 5000)
-  }
-
-  sendHeartbeat () {
-    this.lastBeat = Date.now()
-    this.websocket.send('hb')
     this.heartbeatTimeout = setTimeout(() => {
-      this.onclose()
+      this.sendHeartbeat()
     }, 2000)
   }
 
-  onopen (event) {
+  sendHeartbeat () {
     if (this.heartbeatTimeout) clearTimeout(this.heartbeatTimeout)
+    this.lastBeat = Date.now()
+    if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+      this.lastBeat = Date.now()
+      this.websocket.send('hb')
+      this.heartbeatTimeout = setTimeout(() => {
+        this.setDelay(Date.now() - this.lastBeat)
+        this.disconnect()
+      }, 5000)
+    }
+  }
+
+  disconnect () {
+    if (this.websocket) {
+      this.websocket.onopen = null
+      this.websocket.onclose = null
+      this.websocket.onmessage = null
+      this.websocket.onerror = null
+      this.websocket.close()
+      this.websocket = null
+    }
+    this.setConnected(false)
+    this.setDelay(0)
+    this.reconnect()
+  }
+
+  onopen (event) {
     this.setConnected(true)
-    this.setDelay(500)
+    this.setDelay(0)
     this.reconnectBackoff = 128
     this.sendHeartbeat()
   }

src/models/BitcoinBlock.js

@@ -11,7 +11,5 @@ export default class BitcoinBlock {
     this.bytes = bytes // OTW size of this block in bytes
     this.txnCount = txn_count
     this.txns = txns
-
-    console.log('new block: ', this)
   }
 }

src/models/TxPoolScene.js

@@ -29,7 +29,7 @@ export default class TxPoolScene {
     this.txs = {}
     this.hiddenTxs = {}
 
-    this.heightLimit =  Math.max(150, height / 4)
+    this.heightLimit =  height / 4
 
     this.scrollRateLimitTimer = null
     this.initialised = true