WebSocket app

app/docker/nginx.conf

@@ -1,48 +1,9 @@
-log_format main_json escape=json '{'
-  '"msec": "$msec", ' # request unixtime in seconds with a milliseconds resolution
-  '"connection": "$connection", ' # connection serial number
-  '"connection_requests": "$connection_requests", ' # number of requests made in connection
-  '"pid": "$pid", ' # process pid
-  '"request_id": "$request_id", ' # the unique request id
-  '"request_length": "$request_length", ' # request length (including headers and body)
-  '"remote_addr": "$remote_addr", ' # client IP
-  '"remote_user": "$remote_user", ' # client HTTP username
-  '"remote_port": "$remote_port", ' # client port
-  '"time_local": "$time_local", '
-  '"time_iso8601": "$time_iso8601", ' # local time in the ISO 8601 standard format
-  '"request": "$request", ' # full path no arguments if the request
-  '"request_uri": "$request_uri", ' # full path and arguments if the request
-  '"args": "$args", ' # args
-  '"status": "$status", ' # response status code
-  '"body_bytes_sent": "$body_bytes_sent", ' # the number of body bytes exclude headers sent to a client
-  '"bytes_sent": "$bytes_sent", ' # the number of bytes sent to a client
-  '"http_referer": "$http_referer", ' # HTTP referer
-  '"http_user_agent": "$http_user_agent", ' # user agent
-  '"http_x_forwarded_for": "$http_x_forwarded_for", ' # http_x_forwarded_for
-  '"http_host": "$http_host", ' # the request Host: header
-  '"server_name": "$server_name", ' # the name of the vhost serving the request
-  '"request_time": "$request_time", ' # request processing time in seconds with msec resolution
-  '"upstream": "$upstream_addr", ' # upstream backend server for proxied requests
-  '"upstream_connect_time": "$upstream_connect_time", ' # upstream handshake time incl. TLS
-  '"upstream_header_time": "$upstream_header_time", ' # time spent receiving upstream headers
-  '"upstream_response_time": "$upstream_response_time", ' # time spend receiving upstream body
-  '"upstream_response_length": "$upstream_response_length", ' # upstream response length
-  '"upstream_cache_status": "$upstream_cache_status", ' # cache HIT/MISS where applicable
-  '"ssl_protocol": "$ssl_protocol", ' # TLS protocol
-  '"ssl_cipher": "$ssl_cipher", ' # TLS cipher
-  '"scheme": "$scheme", ' # http or https
-  '"request_method": "$request_method", ' # request method
-  '"server_protocol": "$server_protocol", ' # request protocol, like HTTP/1.1 or HTTP/2.0
-  '"pipe": "$pipe", ' # “p” if request was pipelined, “.” otherwise
-  '"gzip_ratio": "$gzip_ratio", '
-  '"http_cf_ray": "$http_cf_ray"'
-'}';
 server {
   listen 80;
   server_name money_app;
   index index.php;
   error_log /code/app/logs/error.log;
-  access_log /code/app/logs/access.log main_json;
+  access_log /code/app/logs/access.log;
   root /code/app/public;
 
   location / {

docker-compose.yml

@@ -43,6 +43,27 @@ services:
     ports:
       - 9124:9000
 
+  ws-server:
+    container_name: money_ws
+    image: nginx:alpine
+    ports:
+      - 8020:80
+    volumes:
+      - .:/code
+      - ./ws/docker/nginx.conf:/etc/nginx/conf.d/default.conf
+    depends_on:
+      - ws-php
+
+  ws-php:
+    container_name: money_ws_php
+    restart: unless-stopped
+    build:
+      context: ./ws/docker
+      dockerfile: PHP.Dockerfile
+    volumes:
+      - .:/code
+
+
   db:
     container_name: money_db
     image: mariadb:latest

ui/public/assets/scripts/main.js

@@ -12,3 +12,38 @@ function readyDate(date) {
     + ':' + date.getMinutes()
     + ':' + date.getSeconds()
 }
+
+let socket = {
+  url: '',
+  conn: null,
+  connect: function(ready, getMessage) {
+    this.conn = new WebSocket(this.url)
+    this.conn.onopen = (e) => {
+        console.debug(e)
+        ready()
+    }
+    this.conn.onmessage = (e) => {
+      console.debug(e)
+      getMessage(e)
+    }
+    this.conn.onerror = (e) => {
+      console.error(e)
+    }
+    this.conn.onclose = (e) => {
+      if (e.code != 1000) {
+        console.error(e)
+        return
+      }
+      console.debug(e)
+    }
+  },
+  sendMessage: function(action, data = null) {
+    var msg = {
+      action: action
+    }
+    if (data != null) {
+      msg['data'] = data
+    }
+    this.conn.send(JSON.stringify(msg))
+  }
+}

ui/public/assets/scripts/main.min.js

@@ -1,2 +1,2 @@
-"use strict";function formatValue(t,e){return new Intl.NumberFormat("es-CL",{style:"currency",currency:e,minimumSignificantDigits:2}).format(t)}function formatDate(t){return new Intl.DateTimeFormat("es-CL",{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).format(t)}function readyDate(t){return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes()+":"+t.getSeconds()}
+"use strict";function formatValue(n,e){return new Intl.NumberFormat("es-CL",{style:"currency",currency:e,minimumSignificantDigits:2}).format(n)}function formatDate(n){return new Intl.DateTimeFormat("es-CL",{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).format(n)}function readyDate(n){return n.getFullYear()+"-"+(n.getMonth()+1)+"-"+n.getDate()+" "+n.getHours()+":"+n.getMinutes()+":"+n.getSeconds()}var socket={url:"",conn:null,connect:function(e,t){this.conn=new WebSocket(this.url),this.conn.onopen=function(n){console.debug(n),e()},this.conn.onmessage=function(n){console.debug(n),t(n)},this.conn.onerror=function(n){console.error(n)},this.conn.onclose=function(n){1e3==n.code?console.debug(n):console.error(n)}},sendMessage:function(n){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null,n={action:n};null!=e&&(n.data=e),this.conn.send(JSON.stringify(n))}};
 //# sourceMappingURL=maps/main.min.js.map

ui/public/assets/scripts/maps/main.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"../main.min.js","sources":["main.js"],"sourcesContent":["\"use strict\";\n\nfunction formatValue(value, base) {\n  return new Intl.NumberFormat('es-CL', {\n    style: 'currency',\n    currency: base,\n    minimumSignificantDigits: 2\n  }).format(value);\n}\n\nfunction formatDate(date) {\n  return new Intl.DateTimeFormat('es-CL', {\n    year: 'numeric',\n    month: '2-digit',\n    day: '2-digit',\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit'\n  }).format(date);\n}\n\nfunction readyDate(date) {\n  return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();\n}"],"names":["formatValue","value","base","Intl","NumberFormat","style","currency","minimumSignificantDigits","format","formatDate","date","DateTimeFormat","year","month","day","hour","minute","second","readyDate","getFullYear","getMonth","getDate","getHours","getMinutes","getSeconds"],"mappings":"aAEA,SAASA,YAAYC,EAAOC,GAC1B,OAAO,IAAIC,KAAKC,aAAa,QAAS,CACpCC,MAAO,WACPC,SAAUJ,EACVK,yBAA0B,IACzBC,OAAOP,GAGZ,SAASQ,WAAWC,GAClB,OAAO,IAAIP,KAAKQ,eAAe,QAAS,CACtCC,KAAM,UACNC,MAAO,UACPC,IAAK,UACLC,KAAM,UACNC,OAAQ,UACRC,OAAQ,YACPT,OAAOE,GAGZ,SAASQ,UAAUR,GACjB,OAAOA,EAAKS,cAAgB,KAAOT,EAAKU,WAAa,GAAK,IAAMV,EAAKW,UAAY,IAAMX,EAAKY,WAAa,IAAMZ,EAAKa,aAAe,IAAMb,EAAKc"}
+{"version":3,"file":"../main.min.js","sources":["main.js"],"sourcesContent":["\"use strict\";\n\nfunction formatValue(value, base) {\n  return new Intl.NumberFormat('es-CL', {\n    style: 'currency',\n    currency: base,\n    minimumSignificantDigits: 2\n  }).format(value);\n}\n\nfunction formatDate(date) {\n  return new Intl.DateTimeFormat('es-CL', {\n    year: 'numeric',\n    month: '2-digit',\n    day: '2-digit',\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit'\n  }).format(date);\n}\n\nfunction readyDate(date) {\n  return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();\n}\n\nvar socket = {\n  url: '',\n  conn: null,\n  connect: function connect(ready, getMessage) {\n    this.conn = new WebSocket(this.url);\n\n    this.conn.onopen = function (e) {\n      console.debug(e);\n      ready();\n    };\n\n    this.conn.onmessage = function (e) {\n      console.debug(e);\n      getMessage(e);\n    };\n\n    this.conn.onerror = function (e) {\n      console.error(e);\n    };\n\n    this.conn.onclose = function (e) {\n      if (e.code != 1000) {\n        console.error(e);\n        return;\n      }\n\n      console.debug(e);\n    };\n  },\n  sendMessage: function sendMessage(action) {\n    var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n    var msg = {\n      action: action\n    };\n\n    if (data != null) {\n      msg['data'] = data;\n    }\n\n    this.conn.send(JSON.stringify(msg));\n  }\n};"],"names":["formatValue","value","base","Intl","NumberFormat","style","currency","minimumSignificantDigits","format","formatDate","date","DateTimeFormat","year","month","day","hour","minute","second","readyDate","getFullYear","getMonth","getDate","getHours","getMinutes","getSeconds","socket","url","conn","connect","ready","getMessage","this","WebSocket","onopen","e","console","debug","onmessage","onerror","error","onclose","code","sendMessage","action","data","arguments","length","undefined","msg","send","JSON","stringify"],"mappings":"aAEA,SAASA,YAAYC,EAAOC,GAC1B,OAAO,IAAIC,KAAKC,aAAa,QAAS,CACpCC,MAAO,WACPC,SAAUJ,EACVK,yBAA0B,IACzBC,OAAOP,GAGZ,SAASQ,WAAWC,GAClB,OAAO,IAAIP,KAAKQ,eAAe,QAAS,CACtCC,KAAM,UACNC,MAAO,UACPC,IAAK,UACLC,KAAM,UACNC,OAAQ,UACRC,OAAQ,YACPT,OAAOE,GAGZ,SAASQ,UAAUR,GACjB,OAAOA,EAAKS,cAAgB,KAAOT,EAAKU,WAAa,GAAK,IAAMV,EAAKW,UAAY,IAAMX,EAAKY,WAAa,IAAMZ,EAAKa,aAAe,IAAMb,EAAKc,aAGhJ,IAAIC,OAAS,CACXC,IAAK,GACLC,KAAM,KACNC,QAAS,SAAiBC,EAAOC,GAC/BC,KAAKJ,KAAO,IAAIK,UAAUD,KAAKL,KAE/BK,KAAKJ,KAAKM,OAAS,SAAUC,GAC3BC,QAAQC,MAAMF,GACdL,KAGFE,KAAKJ,KAAKU,UAAY,SAAUH,GAC9BC,QAAQC,MAAMF,GACdJ,EAAWI,IAGbH,KAAKJ,KAAKW,QAAU,SAAUJ,GAC5BC,QAAQI,MAAML,IAGhBH,KAAKJ,KAAKa,QAAU,SAAUN,GACd,KAAVA,EAAEO,KAKNN,QAAQC,MAAMF,GAJZC,QAAQI,MAAML,KAOpBQ,YAAa,SAAqBC,GAChC,IAAIC,EAA0B,EAAnBC,UAAUC,aAA+BC,IAAjBF,UAAU,GAAmBA,UAAU,GAAK,KAC3EG,EAAM,CACRL,OAAQA,GAGE,MAARC,IACFI,EAAU,KAAIJ,GAGhBb,KAAKJ,KAAKsB,KAAKC,KAAKC,UAAUH"}

ui/resources/assets/js/socket.js

@@ -0,0 +1,34 @@
+let socket = {
+  url: '',
+  conn: null,
+  connect: function(ready, getMessage) {
+    this.conn = new WebSocket(this.url)
+    this.conn.onopen = (e) => {
+        console.debug(e)
+        ready()
+    }
+    this.conn.onmessage = (e) => {
+      console.debug(e)
+      getMessage(e)
+    }
+    this.conn.onerror = (e) => {
+      console.error(e)
+    }
+    this.conn.onclose = (e) => {
+      if (e.code != 1000) {
+        console.error(e)
+        return
+      }
+      console.debug(e)
+    }
+  },
+  sendMessage: function(action, data = null) {
+    var msg = {
+      action: action
+    }
+    if (data != null) {
+      msg['data'] = data
+    }
+    this.conn.send(JSON.stringify(msg))
+  }
+}

ui/resources/views/currencies/show.blade.php

@@ -6,19 +6,28 @@
 
 @section('content')
   <h3 class="ui header c_code"></h3>
+  <table class="ui table">
+    <thead>
+      <th>Url</th>
+      <th class="right aligned" id="add_source">
+        <i class="plus icon"></i>
+      </th>
+    </thead>
+    <tbody id="sources"></tbody>
+  </table>
   <table class="ui table">
     <thead>
       <tr>
         <th>Fecha</th>
         <th>Valor</th>
-        <th id="add_value">
+        <th class="right aligned" id="add_value">
           <i class="plus icon"></i>
         </th>
       </tr>
     </thead>
     <tbody id="values"></tbody>
   </table>
-  <div class="ui modal" id="add_modal">
+  <div class="ui modal" id="add_values">
     <div class="header">
       Agregar Valor para <span class="c_name"></span>
     </div>
@@ -52,10 +61,202 @@
       </form>
     </div>
   </div>
+  <div class="ui modal" id="add_sources">
+    <div class="header">
+      Agregar Fuente para <span class="c_name"></span>
+    </div>
+    <div class="content">
+      <form class="ui form">
+        <div class="inline field">
+          <label>Url</label>
+          <input type="text" name="url" />
+        </div>
+        <button class="ui button">Agregar</button>
+      </form>
+    </div>
+  </div>
 @endsection
 
 @push('scripts')
   <script type="text/javascript">
+    let sources = {
+      id: '#sources',
+      add_button: '#add_source',
+      add_modal: '#add_sources',
+      loading: '',
+      sources: [],
+      setup: function() {
+        $(this.id).hide()
+        $(this.add_button).css('cursor', 'pointer').click((e) => {
+          this.add()
+        })
+      },
+      get: function(currency_id, data) {
+        this.sources = data.sources
+        this.populate(currency_id)
+        socket.sendMessage('currency.values', {currency_id: '{{$currency_id}}'})
+      },
+      buildModal: function() {
+        $(this.add_modal).modal()
+        $(this.add_modal).find('form').submit((e) => {
+          e.preventDefault()
+          this.doAdd()
+          return false
+        })
+      },
+      populate: function(currency_id) {
+        $(this.id).html('')
+        $.each(this.sources, (i, el) => {
+          let row = $('<tr></tr>').append(
+            $('<td></td>').html(el.url)
+          ).append(
+            $('<td></td>').attr('class', 'remove_source right aligned').attr('data-url', el.url).append(
+              $('<i></i>').attr('class', 'minus icon')
+            ).css('cursor', 'pointer').click((e) => {
+              this.remove(currency_id, $(e.currentTarget).attr('data-url'))
+            })
+          )
+          $(this.id).append(row)
+        })
+        $(this.id).show()
+      },
+      add: function() {
+        $(this.add_modal).find('form').trigger('reset')
+        $(this.add_modal).modal('show')
+      },
+      doAdd: function() {
+        let form = $(this.add_modal).find('form')
+        let info = {
+          url: form.find("[name='url']").val()
+        }
+        var url = '{{$urls->api}}/currency/' + this.data.id + '/sources/add'
+        $(this.add_modal).modal('hide')
+        $(this.loading).modal('show')
+        $.post(url, JSON.stringify(info), (data) => {
+          if (data.sources[0].created) {
+            this.get()
+          }
+        }, 'json').then(() => {
+          $(this.loading).modal('hide')
+        })
+      },
+      remove: function(currency_id, url) {
+        var url = '{{$urls->api}}/source/' + currency_id + '/' + url + '/delete'
+        $(this.loading).modal('show')
+        $.ajax({
+          url: url,
+          method: 'DELETE',
+          dataType: 'json',
+          success: (data) => {
+            if (data.deleted) {
+              this.get()
+            }
+          }
+        }).then(() => {
+          $(this.loading).modal('hide')
+        })
+      }
+    }
+    let values = {
+      id: '#values',
+      add_button: '#add_value',
+      add_modal: '#add_values',
+      loading: '',
+      values: [],
+      setup: function() {
+        $(this.id).hide()
+        this.buildModal()
+        $(this.add_button).css('cursor', 'pointer').click((e) => {
+          this.add()
+        })
+      },
+      get: function(currency_id, data) {
+        if (data.values.length > 0) {
+          this.values = data.values
+          this.populate(currency_id)
+        }
+        $(this.loading).modal('hide')
+        socket.conn.close()
+      },
+      buildModal: function() {
+        this.getCurrencies()
+        $(this.add_modal).modal()
+        $(this.add_modal).find('.ui.calendar').calendar()
+        $(this.add_modal).find('form').submit((e) => {
+          e.preventDefault()
+          this.doAdd()
+          return false
+        })
+        $(this.add_modal).find('.ui.dropdown').dropdown()
+      },
+      getCurrencies: function() {
+        var url = '{{$urls->api}}/currencies'
+        $.getJSON(url, (data) => {
+          let dp = $(this.add_modal).find('.ui.dropdown')
+          vals = []
+          $.each(data.currencies, (i, el) => {
+            vals.push({name: el.name, value: el.id, text: el.name})
+          })
+          dp.dropdown('setup menu', {values: vals})
+        })
+      },
+      populate: function(currency_id) {
+        $(this.id).html('')
+        $.each(this.values, (i, el) => {
+          let row = $('<tr></tr>').append(
+            $('<td></td>').html(formatDate(new Date(el.date_time)))
+          ).append(
+            $('<td></td>').html(formatValue(el.value, el.base.code))
+          ).append(
+            $('<td></td>').attr('class', 'remove_value right aligned').attr('data-base', el.base.id).attr('data-date_time', el.date_time).append(
+              $('<i></i>').attr('class', 'minus icon')
+            ).css('cursor', 'pointer').click((e) => {
+              this.remove(currency_id, $(e.currentTarget).attr('data-base'), $(e.currentTarget).attr('data-date_time'))
+            })
+          )
+          $(this.id).append(row)
+        })
+        $(this.id).show()
+      },
+      add: function() {
+        $(this.add_modal).find('form').trigger('reset')
+        $(this.add_modal).modal('show')
+      },
+      doAdd: function() {
+        let form = $(this.add_modal).find('form')
+        let info = {
+          date_time: readyDate(new Date(form.find('.ui.calendar').calendar('get date'))),
+          value: form.find("[name='valor']").val(),
+          base_id: form.find('.ui.dropdown').dropdown('get value')
+        }
+        var url = '{{$urls->api}}/currency/' + this.data.id + '/values/add'
+        $(this.add_modal).modal('hide')
+        $(this.loading).modal('show')
+        $.post(url, JSON.stringify(info), (data) => {
+          if (data.values[0].created) {
+            this.get()
+          }
+        }, 'json').then(() => {
+          $(this.loading).modal('hide')
+        })
+      },
+      remove: function(currency_id, base_id, date_time) {
+        var url = '{{$urls->api}}/value/' + currency_id + '/' + base_id + '/' + encodeURI(date_time) + '/delete'
+        $(this.loading).modal('show')
+        $.ajax({
+          url: url,
+          method: 'DELETE',
+          dataType: 'json',
+          success: (data) => {
+            if (data.deleted) {
+              this.get().then(() => {
+                $(this.loading).modal('hide')
+              })
+            }
+          }
+        })
+      }
+    }
     let currency = {
       id: {{$currency_id}},
       data: {
@@ -67,120 +268,38 @@
         name: '.c_name',
         code: '.c_code'
       },
-      values_id: '#values',
-      values: [],
-      add_button: '#add_value',
-      add_modal: '#add_modal',
       loading: '#loading',
       setup: function() {
-        $(this.values_id).hide()
-        this.buildModal()
-        $(this.add_button).css('cursor', 'pointer').click((e) => {
-          this.addValue()
-        })
-        this.getData().then(() => {
-          this.getValues().then(() => {
-            $(this.loading).modal('hide')
-          })
-        })
+        sources.loading = this.loading
+        sources.setup()
+        values.loading = this.loading
+        values.setup()
+        socket.url = '{{$urls->ws}}'
+        socket.connect(this.ready, this.getMessage)
       },
-      buildModal: function() {
-        this.getCurrencies()
-        $(this.add_modal).modal()
-        $(this.add_modal).find('.ui.calendar').calendar()
-        $(this.add_modal).find('form').submit((e) => {
-          e.preventDefault()
-          this.doAddValue()
-          return false
-        })
-        $(this.add_modal).find('.ui.dropdown').dropdown()
+      ready: function() {
+        socket.sendMessage('currency', {currency_id: '{{$currency_id}}'})
       },
-      getData: function() {
-        let url = '{{$urls->api}}/currency/' + this.id
-        return $.getJSON(url, (data) => {
-          $.each(this.data, (i, el) => {
-            this.data[i] = data.currency[i]
-          })
-          $.each(this.map, (i, el) => {
-            $(el).html(data.currency[i])
-          })
-        })
-      },
-      getValues: function() {
-        let url = '{{$urls->api}}/currency/' + this.id + '/values'
-        return $.getJSON(url, (data) => {
-          if (data.values.length > 0) {
-            this.values = data.values
-            this.populateValues()
-          }
-        })
-      },
-      populateValues: function() {
-        $(this.values_id).html('')
-        $.each(this.values, (i, el) => {
-          let row = $('<tr></tr>').append(
-            $('<td></td>').html(formatDate(new Date(el.date_time)))
-          ).append(
-            $('<td></td>').html(formatValue(el.value, el.base.code))
-          ).append(
-            $('<td></td>').attr('class', 'remove_value').attr('data-base', el.base.id).attr('data-date_time', el.date_time).append(
-              $('<i></i>').attr('class', 'minus icon')
-            ).css('cursor', 'pointer').click((e) => {
-              this.removeValue($(e.currentTarget).attr('data-base'), $(e.currentTarget).attr('data-date_time'))
-            })
-          )
-          $(this.values_id).append(row)
-        })
-        $(this.values_id).show()
-      },
-      getCurrencies: function() {
-        let url = '{{$urls->api}}/currencies'
-        $.getJSON(url, (data) => {
-          let dp = $(this.add_modal).find('.ui.dropdown')
-          values = []
-          $.each(data.currencies, (i, el) => {
-            values.push({name: el.name, value: el.id, text: el.name})
-          })
-          dp.dropdown('setup menu', {values: values})
-        })
-      },
-      addValue: function() {
-        $(this.add_modal).find('form').trigger('reset')
-        $(this.add_modal).modal('show')
-      },
-      doAddValue: function() {
-        let form = $(this.add_modal).find('form')
-        let info = {
-          date_time: readyDate(new Date(form.find('.ui.calendar').calendar('get date'))),
-          value: form.find("[name='valor']").val(),
-          base_id: form.find('.ui.dropdown').dropdown('get value')
+      getMessage: function(e) {
+        response = JSON.parse(e.data)
+        if (response.request.action == 'currency') {
+          currency.get(response.body)
+        }
+        if (response.request.action == 'currency.sources') {
+          sources.get(response.request.body.currency_id, response.body)
+        }
+        if (response.request.action == 'currency.values') {
+          values.get(response.request.body.currency_id, response.body)
         }
-        let url = '{{$urls->api}}/currency/' + this.data.id + '/values/add'
-        $(this.add_modal).modal('hide')
-        $(this.loading).modal('show')
-        $.post(url, JSON.stringify(info), (data) => {
-          if (data.values[0].created) {
-            this.getValues()
-          }
-        }, 'json').then(() => {
-          $(this.loading).modal('hide')
-        })
       },
-      removeValue: function(base_id, date_time) {
-        let url = '{{$urls->api}}/value/' + this.data.id + '/' + base_id + '/' + encodeURI(date_time) + '/delete'
-        $(this.loading).modal('show')
-        $.ajax({
-          url: url,
-          method: 'DELETE',
-          dataType: 'json',
-          success: (data) => {
-            if (data.deleted) {
-              this.getValues().then(() => {
-                $(this.loading).modal('hide')
-              })
-            }
-          }
+      get: function(data) {
+        $.each(this.data, (i, el) => {
+          this.data[i] = data.currency[i]
         })
+        $.each(this.map, (i, el) => {
+          $(el).html(data.currency[i])
+        })
+        socket.sendMessage('currency.sources', {currency_id: '{{$currency_id}}'})
       }
     }
     $(document).ready(() => {

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) {

ui/setup/app.php

@@ -26,7 +26,6 @@ $files = [
   'settings',
   'setups'
 ];
-
 foreach ($files as $file) {
   foreach ($folders as $folder) {
     $filename = implode(DIRECTORY_SEPARATOR, [

ui/setup/web/settings.php

@@ -50,6 +50,7 @@ return [
       'images'
     ]);
     $arr['api'] = 'http://localhost:8081';
+    $arr['ws'] = 'ws://localhost:8020';
     return (object) $arr;
   },
   'format' => function(Container $c) {

ws/common/Listener/Currencies.php

@@ -0,0 +1,76 @@
+<?php
+namespace ProVM\Money\Common\Listener;
+
+use ProVM\Common\Define\Event\Request;
+use ProVM\Common\Define\Event\Response;
+use ProVM\Common\Factory\Model as ModelFactory;
+use ProVM\Money\Currency;
+
+class Currencies {
+  public function __invoke(Request $request, Response $response, ModelFactory $factory): Response {
+    $currencies = $factory->find(Currency::class)->many();
+    array_walk($currencies, function(&$item) {
+      $item = $item->asArray();
+    });
+    $response->getBody()->write(compact('currencies'));
+    return $response;
+  }
+  public function get(Request $request, Response $response, ModelFactory $factory): Response {
+    $currency_id = $request->getBody()->read()['currency_id'];
+    $currency = $factory->find(Currency::class)->one($currency_id);
+    $response->getBody()->write(['currency' => $currency->asArray()]);
+    return $response;
+  }
+  public function latest(Request $request, Response $response, ModelFactory $factory): Response {
+    $currency_id = $request->getBody()->read()['currency_id'];
+    $currency = $factory->find(Currency::class)->one($currency_id);
+    $output = [
+      'currency' => null,
+      'value' => null
+    ];
+    if ($currency) {
+      $output['currency'] = $currency->asArray();
+      if ($currency->latest()) {
+        $output['value'] = $currency->latest()->asArray();
+      }
+    }
+    $response->getBody()->write($output);
+    return $response;
+  }
+  public function getSources(Request $request, Response $response, ModelFactory $factory): Response {
+    $currency_id = $request->getBody()->read()['currency_id'];
+    $currency = $factory->find(Currency::class)->one($currency_id);
+    $output = [
+      'currency' => null,
+      'sources' => []
+    ];
+    if ($currency) {
+      $output['currency'] = $currency->asArray();
+      if ($currency->sources()) {
+        $output['sources'] = array_map(function($item) {
+          return $item->asArray();
+        }, $currency->sources());
+      }
+    }
+    $response->getBody()->write($output);
+    return $response;
+  }
+  public function getValues(Request $request, Response $response, ModelFactory $factory): Response {
+    $currency_id = $request->getBody()->read()['currency_id'];
+    $currency = $factory->find(Currency::class)->one($currency_id);
+    $output = [
+      'currency' => null,
+      'values' => []
+    ];
+    if ($currency) {
+      $output['currency'] = $currency->asArray();
+      if ($currency->values()) {
+        $output['values'] = array_map(function($item) {
+          return $item->asArray();
+        }, $currency->values());
+      }
+    }
+    $response->getBody()->write($output);
+    return $response;
+  }
+}

ws/composer.json

@@ -0,0 +1,43 @@
+{
+    "name": "provm/money-ws",
+    "description": "Websocket para la aplicacion web para revisar los valores de distintas monedas",
+    "type": "project",
+    "require": {
+        "php-di/php-di": "^6.3",
+        "provm/models": "dev-master",
+        "vlucas/phpdotenv": "^5.3",
+        "nesbot/carbon": "^2.46",
+        "provm/events": "dev-master"
+    },
+    "require-dev": {
+        "phpunit/phpunit": "^9.5",
+        "kint-php/kint": "^3.3"
+    },
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Aldarien",
+            "email": "aldarien85@gmail.com"
+        }
+    ],
+    "autoload": {
+      "psr-4": {
+        "ProVM\\Money\\Common\\": "common",
+        "ProVM\\Common\\": "../provm/common",
+        "ProVM\\Money\\": "../src"
+      }
+    },
+    "repositories": [
+      {
+        "type": "git",
+        "url": "http://git.provm.cl/ProVM/models.git"
+      },
+      {
+        "type": "git",
+        "url": "http://git.provm.cl/ProVM/events.git"
+      }
+    ],
+    "config": {
+      "secure-http": false
+    }
+}

ws/docker/PHP.Dockerfile

@@ -0,0 +1,8 @@
+FROM php:7.4-fpm
+
+RUN docker-php-ext-install pdo pdo_mysql
+
+RUN pecl install xdebug-3.0.3 \
+    && docker-php-ext-enable xdebug
+
+CMD ["php", "/code/ws/public/index.php"]

ws/docker/nginx.conf

@@ -0,0 +1,16 @@
+upstream websocket {
+  server ws-php:9010;
+}
+
+server {
+  listen 80;
+
+  location / {
+    proxy_pass http://websocket;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_set_header Host $host;
+    proxy_read_timeout 86400;
+  }
+}

ws/public/index.php

@@ -0,0 +1,7 @@
+<?php
+include_once implode(DIRECTORY_SEPARATOR, [
+  dirname(__DIR__),
+  'setup',
+  'app.php'
+]);
+$app->run();

ws/resources/routes/ws.php

@@ -0,0 +1,8 @@
+<?php
+$files = new DirectoryIterator(implode(DIRECTORY_SEPARATOR, [__DIR__, 'ws']));
+foreach ($files as $file) {
+  if ($file->isDir()) {
+    continue;
+  }
+  include_once $file->getRealPath();
+}

ws/resources/routes/ws/currencies.php

@@ -0,0 +1,9 @@
+<?php
+use ProVM\Money\Common\Listener\Currencies;
+
+$controller = new Currencies();
+$app->add('currencies', $controller);
+$app->add('currency', [$controller, 'get']);
+$app->add('currency.values.latest', [$controller, 'latest']);
+$app->add('currency.sources', [$controller, 'getSources']);
+$app->add('currency.values', [$controller, 'getValues']);

ws/setup/app.php

@@ -0,0 +1,45 @@
+<?php
+use DI\ContainerBuilder as Builder;
+
+include_once 'composer.php';
+
+$builder = new Builder();
+
+$folders = [
+  implode(DIRECTORY_SEPARATOR, [
+    dirname(__DIR__, 2),
+    'setup',
+    'env'
+  ]),
+  implode(DIRECTORY_SEPARATOR, [
+    dirname(__DIR__, 2),
+    'setup',
+    'common'
+  ]),
+  implode(DIRECTORY_SEPARATOR, [
+    __DIR__,
+    'ws'
+  ])
+];
+$files = [
+  'settings',
+  'setups'
+];
+foreach ($files as $file) {
+  foreach ($folders as $folder) {
+    $filename = implode(DIRECTORY_SEPARATOR, [
+      $folder,
+      $file . '.php'
+    ]);
+    if (!file_exists($filename)) {
+      continue;
+    }
+    $builder->addDefinitions($filename);
+  }
+}
+
+$container = $builder->build();
+$app = $container->get(Ratchet\Server\IoServer::class);
+
+include_once 'databases.php';
+include_once 'router.php';

ws/setup/composer.php

@@ -0,0 +1,6 @@
+<?php
+include_once implode(DIRECTORY_SEPARATOR, [
+  dirname(__DIR__),
+  'vendor',
+  'autoload.php'
+]);

ws/setup/databases.php

@@ -0,0 +1,36 @@
+<?php
+$databases = $app->getContainer()->get('databases');
+foreach ($databases as $name => $settings) {
+  switch($settings->system) {
+    case 'mysql':
+      $dsn = implode(':', [
+        'mysql',
+        implode(';', [
+          implode('=', [
+            'host',
+            $settings->host->name
+          ]),
+          implode('=', [
+            'dbname',
+            $settings->name
+          ])
+        ])
+      ]);
+      if (isset($settings->host->port)) {
+        $dsn .= ';' . implode('=', [
+          'port',
+          $settings->host->port
+        ]);
+      }
+      break;
+  }
+  ORM::configure($dsn, null, $name);
+  switch ($settings->system) {
+    case 'mysql':
+      ORM::configure('username', $settings->user->name, $name);
+      ORM::configure('password', $settings->user->password, $name);
+  }
+}
+if (isset($databases->short_names)) {
+  Model::$short_table_names = $databases->short_names;
+}

ws/setup/router.php

@@ -0,0 +1,5 @@
+<?php
+include_once implode(DIRECTORY_SEPARATOR, [
+  $app->getContainer()->get('locations')->routes,
+  'ws.php'
+]);

ws/setup/ws/settings.php

@@ -0,0 +1,19 @@
+<?php
+use Psr\Container\ContainerInterface as Container;
+
+return [
+  'locations' => DI\decorate(function($prev, Container $c) {
+    $arr = (array) $prev;
+    $arr['base'] = dirname(__DIR__, 2);
+    $arr['resources'] = implode(DIRECTORY_SEPARATOR, [
+      $arr['base'],
+      'resources'
+    ]);
+    $arr['routes'] = implode(DIRECTORY_SEPARATOR, [
+      $arr['resources'],
+      'routes'
+    ]);
+    return (object) $arr;
+  }),
+  'port' => '9010'
+];

ws/setup/ws/setups.php

@@ -0,0 +1,36 @@
+<?php
+use Psr\Container\ContainerInterface as Container;
+
+return [
+  'storage' => function(Container $c) {
+    return new \SplObjectStorage();
+  },
+  ProVM\Common\Factory\Event\Request::class => function(Container $c) {
+    return new ProVM\Common\Factory\Event\Request();
+  },
+  ProVM\Common\Factory\Event\Response::class => function(Container $c) {
+    return new ProVM\Common\Factory\Event\Response();
+  },
+  ProVM\Common\Factory\Event\Listener::class => function(Container $c) {
+    return new ProVM\Common\Factory\Event\Listener($c);
+  },
+  Psr\EventDispatcher\EventDispatcherInterface::class => function(Container $c) {
+    return new ProVM\Common\Service\Event\Dispatcher($c);
+  },
+  Ratchet\MessageComponentInterface::class => function(Container $c) {
+    return (new ProVM\Common\Alias\Event\Message($c->get('storage')))
+      ->setDispatcher($c->get(Psr\EventDispatcher\EventDispatcherInterface::class))
+      ->setRequestBuilder($c->get(ProVM\Common\Factory\Event\Request::class));
+  },
+  Ratchet\WebSocket\WsServer::class => function(Container $c) {
+    return new Ratchet\WebSocket\WsServer($c->get(Ratchet\MessageComponentInterface::class));
+  },
+  Ratchet\Http\HttpServer::class => function(Container $c) {
+    return new Ratchet\Http\HttpServer($c->get(Ratchet\WebSocket\WsServer::class));
+  },
+  Ratchet\Server\IoServer::class => function(Container $c) {
+    $app = ProVM\Common\Alias\Server\App::factory($c->get(Ratchet\Http\HttpServer::class), $c->get('port'));
+    $app->setContainer($c);
+    return $app;
+  }
+];