feat: websocket for payments events, remove /payments/sse and longpolling endpoint (#2704)

lnbits/static/js/base.js

@@ -6,6 +6,10 @@ window.i18n = new VueI18n.createI18n({
   messages: window.localisation
 })
 
+const websocketPrefix =
+  window.location.protocol === 'http:' ? 'ws://' : 'wss://'
+const websocketUrl = `${websocketPrefix}${window.location.host}/api/v1/ws`
+
 window.LNbits = {
   api: {
     request(method, url, apiKey, data) {
@@ -176,36 +180,14 @@ window.LNbits = {
   },
   events: {
     onInvoicePaid(wallet, cb) {
-      let listener = ev => {
-        cb(JSON.parse(ev.data))
-      }
-      this.listenersCount = this.listenersCount || {[wallet.inkey]: 0}
-      this.listenersCount[wallet.inkey]++
-
-      this.listeners = this.listeners || {}
-      if (!(wallet.inkey in this.listeners)) {
-        this.listeners[wallet.inkey] = new EventSource(
-          '/api/v1/payments/sse?api-key=' + wallet.inkey
-        )
-      }
-
-      this.listeners[wallet.inkey].addEventListener(
-        'payment-received',
-        listener
-      )
-
-      return () => {
-        this.listeners[wallet.inkey].removeEventListener(
-          'payment-received',
-          listener
-        )
-        this.listenersCount[wallet.inkey]--
-
-        if (this.listenersCount[wallet.inkey] <= 0) {
-          this.listeners[wallet.inkey].close()
-          delete this.listeners[wallet.inkey]
+      ws = new WebSocket(`${websocketUrl}/${wallet.inkey}`)
+      ws.onmessage = ev => {
+        const data = JSON.parse(ev.data)
+        if (data.payment) {
+          cb(data)
         }
       }
+      return ws.onclose
     }
   },
   map: {

lnbits/static/js/components.js

@@ -484,7 +484,7 @@ window.app.component('lnbits-dynamic-chips', {
 window.app.component('lnbits-update-balance', {
   template: '#lnbits-update-balance',
   mixins: [window.windowMixin],
-  props: ['wallet_id', 'callback'],
+  props: ['wallet_id'],
   computed: {
     denomination() {
       return LNBITS_DENOMINATION
@@ -498,21 +498,19 @@ window.app.component('lnbits-update-balance', {
       credit: 0
     }
   },
+  watch: {
+    credit(val) {
+      this.updateBalance(val)
+    }
+  },
   methods: {
     updateBalance(credit) {
       LNbits.api
         .updateBalance(credit, this.wallet_id)
         .then(res => {
-          if (res.data.status !== 'Success') {
+          if (res.data.success !== true) {
             throw new Error(res.data)
           }
-          this.callback({
-            success: true,
-            credit: parseInt(credit),
-            wallet_id: this.wallet_id
-          })
-        })
-        .then(_ => {
           credit = parseInt(credit)
           Quasar.Notify.create({
             type: 'positive',

lnbits/static/js/event-reactions.js

@@ -1,28 +1,19 @@
-function eventReactionWebocket(event_id) {
+function eventReaction(amount) {
   localUrl = ''
   reaction = localStorage.getItem('lnbits.reactions')
   if (!reaction || reaction === 'None') {
     return
   }
-  if (location.protocol !== 'http:') {
-    localUrl = 'wss://' + location.host + '/api/v1/ws/' + event_id
-  } else {
-    localUrl = 'ws://' + location.host + '/api/v1/ws/' + event_id
-  }
-  connection = new WebSocket(localUrl)
-  connection.onmessage = function (e) {
-    try {
-      const parsedData = JSON.parse(e.data)
-      if (parsedData.payment.amount < 0) {
-        return
-      }
-      reaction = localStorage.getItem('lnbits.reactions')
-      if (reaction) {
-        window[reaction.split('|')[1]]()
-      }
-    } catch (e) {
-      console.log(e)
+  try {
+    if (amount < 0) {
+      return
     }
+    reaction = localStorage.getItem('lnbits.reactions')
+    if (reaction) {
+      window[reaction.split('|')[1]]()
+    }
+  } catch (e) {
+    console.log(e)
   }
 }
 function confettiBothSides() {

lnbits/static/js/wallet.js

@@ -536,19 +536,6 @@ window.app = Vue.createApp({
             })
         })
     },
-    fetchBalance() {
-      LNbits.api.getWallet(this.g.wallet).then(response => {
-        this.balance = Math.floor(response.data.balance / 1000)
-        document.dispatchEvent(
-          new CustomEvent('updateWalletBalance', {
-            detail: [this.g.wallet.id, this.balance]
-          })
-        )
-      })
-      if (this.g.wallet.currency) {
-        this.updateFiatBalance()
-      }
-    },
     updateFiatBalance() {
       if (!this.g.wallet.currency) return 0
       LNbits.api
@@ -561,11 +548,6 @@ window.app = Vue.createApp({
         })
         .catch(e => console.error(e))
     },
-    updateBalanceCallback(res) {
-      if (res.success && wallet.id === res.wallet_id) {
-        this.balance += res.credit
-      }
-    },
     pasteToTextArea() {
       this.$refs.textArea.focus() // Set cursor to textarea
       navigator.clipboard.readText().then(text => {
@@ -687,7 +669,7 @@ window.app = Vue.createApp({
   },
   watch: {
     updatePayments() {
-      this.fetchBalance()
+      this.updateFiatBalance()
     }
   },
   mounted() {
@@ -697,10 +679,14 @@ window.app = Vue.createApp({
       this.$q.localStorage.set('lnbits.disclaimerShown', true)
     }
     // listen to incoming payments
-    LNbits.events.onInvoicePaid(this.g.wallet, payment => {
-      this.onPaymentReceived(payment.payment_hash)
+    LNbits.events.onInvoicePaid(this.g.wallet, data => {
+      console.log('Payment received:', data.payment.payment_hash)
+      console.log('Wallet balance:', data.wallet_balance)
+      console.log('Wallet ID:', this.g.wallet)
+      this.onPaymentReceived(data.payment.payment_hash)
+      this.balance = data.wallet_balance
+      eventReaction(data.payment.amount)
     })
-    eventReactionWebocket(wallet.inkey)
   }
 })