web/frontend/index.html

<!doctype>
<head>
  <!-- <link href="http://nvd3.org/src/nv.d3.css" rel="stylesheet"> -->
  <!-- <link href="/css/style.css" rel="stylesheet"> -->
  <title>Gekko prototype</title>
  <style>

  </style>
</head>
<body>
  <h1>Gekko (early prototype)</h1>
  <h2>advices</h2>
  <pre id="adviceLog"></pre>
  <h2>trade data</h2>
  <pre id="log"></pre>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.min.js'></script>
  <script>
    var settings = {
      host: '{{host}}',
      port: '{{port}}'
    }

    var ws = new WebSocket(`ws://${settings.host}:${settings.port}`);

    ws.onopen = function() {
      console.log('aaa');
    }

    var $log = $('#log');
    var $adviceLog = $('#adviceLog');

    ws.onmessage = function(e) {
      var msg = JSON.parse(e.data);
      console.log(msg.message);

      if(msg.message === 'candle')
        $log.prepend(JSON.stringify(msg.data, null, 4));
      if(msg.message === 'history') {
        $log.prepend(
          _.map(msg.data, function(e) {
            return JSON.stringify(e, null, 4);
          }).join('\n')
        );
      }

      if(msg.message === 'advice') {
        $adviceLog.prepend(JSON.stringify(msg, null, 4));
      }
        
    }

  </script>

</body>