Se agrega funcionalidad de WebSockets

ui/resources/views/home.blade.php

@@ -13,47 +13,76 @@
     let cards = {
       id: '#cards',
       setup: function() {
-        this.getCurrencies()
+        socket.url = '{{$urls->ws}}'
+        socket.connect(this.socketReady, this.getMessage)
       },
       data: [],
-      getCurrencies: function() {
-        let url = '{{$urls->api}}/currencies'
-        return $.getJSON(url, (data) => {
-          let promises = []
-          $.each(data.currencies, (i, el) => {
-            this.data[el.id] = {'currency': el, 'value': null}
-            promises.push(this.getValue(el.id))
-          })
-          Promise.all(promises).then(() => {
-            this.buildCards()
-          })
+      socketReady: function() {
+        socket.sendMessage('currencies')
+      },
+      getMessage: function(e) {
+        response = JSON.parse(e.data)
+        if (response.request.action == 'currencies') {
+          cards.getCurrencies(response.body)
+        }
+        if (response.request.action == 'currency.values.latest') {
+          cards.getValues(response.body)
+          cards.buildCards()
+        }
+      },
+      getCurrencies: function(data) {
+        let promises = []
+        $.each(data.currencies, (i, el) => {
+          this.data[el.id] = {'currency': el, 'value': null}
+          socket.sendMessage('currency.values.latest', {currency_id: el.id})
         })
       },
-      getValue: function(currency_id) {
-        let url = '{{$urls->api}}/currency/' + currency_id + '/values/latest'
-        return $.getJSON(url, (data) => {
-          if (data.value == null) {
-            this.data = this.data.filter(function(item) {
-              return item.currency.id != data.currency.id
-            })
-            return
+      getMaxIdx: function() {
+        keys = Object.keys(this.data)
+        max = 0
+        $.each(keys, (i, el) => {
+          if (max < parseInt(el)) {
+            max = parseInt(el)
           }
-          idx = this.data.findIndex((item, i, arr) => item.currency.id == data.currency.id)
-          if (idx < 0) {
-            return
-          }
-          this.data[idx].value = data.value
-        }).fail(() => {
-          this.data = this.data.filter(function(item) {
-            return item.currency.id == currency_id
-          })
         })
+        return max
+      },
+      getValues: function(data) {
+        if (data.value == null) {
+          this.data = this.data.filter(function(item) {
+            return item.currency.id != data.currency.id
+          })
+          return
+        }
+        idx = this.data.findIndex((item, i, arr) => {
+          if (typeof item == 'undefined') {
+            return false
+          }
+          return item.currency.id == data.currency.id
+        })
+        if (idx < 0) {
+          return
+        }
+        this.data[idx].value = data.value
       },
       buildCards: function() {
+        $(this.id).html('')
         $.each(this.data, (i, el) => {
+          if (typeof el == 'undefined') {
+            return
+          }
+          if (el.value == null) {
+            return
+          }
+          if (el.currency == null) {
+            return
+          }
           $(this.id).append(
             this.buildCard(el)
           )
+          if (i == this.getMaxIdx()) {
+            socket.conn.close()
+          }
         })
       },
       buildCard: function(currency) {