HTML5 WebSocket

by gschutz

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/highcharts-vue.min.js"></script>

<div id="app">
  <div class="title-row">
    <p>Set the request data:</p>
    <textarea cols="60" rows="20" v-model="requestData"></textarea>
    <button @click="request()">Send</button>
  </div>
  <highcharts :options="chartOptions"></highcharts>
</div>

<div id="output"></div>

JavaScript

var message = document.getElementById("message"),
  output = document.getElementById("output");

function sendMessage(message) {
  output.innerHTML += "<p>&gt; SENT: " + message + "</p>";
  websocket.send(message);
}


/* ---- EXAMPLE plotting ----- */

var graphData = {};
var graphDataAr = {};
var SERIES_IDX = {};

//EPS
Vue.use(HighchartsVue.default)

var app = new Vue({
  el: "#app",
  graphData: {},
  graphDataAr: {},
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'line',
          marker: {enabled: false}
        },
        title: {
          text: 'Bloomberg Terminal Data'
        },
        xAxis: {
          type: 'datetime',
          //tickPixelInterval: 100,
        },
        series: []
      },
      title: ''
    }
  },
  methods: {
    request: function() {
    	var req = JSON.parse(this.requestData);
      if (req.securities) {
        req.securities.forEach((security) => {
          SERIES_IDX[security] = this.chartOptions.series.length;
          this.chartOptions.series.push({
            name: security, 
            data: []
          });
        })
      }
      
      sendMessage(this.requestData);
    },
    updateChart: function(series) {
      this.chartOptions.series = series;
    }
  },
  watch: {
    title2(newValue) {
      if (newValue === '') {
        this.chartOptions.title.text = 'Bloomberg Stocks'
      } else {
        this.chartOptions.title.text = newValue
      }

    }
  }
});


websocket = new WebSocket("ws://localhost:8765/");
websocket.onopen = function() {
  output.innerHTML += "<p>&gt; CONNECTED</p>";
};


websocket.onmessage = function(e) {
  var result = JSON.parse(e.data);
  var msg = result.result;
  var textResult = JSON.stringify(result, null, 4);
  var series = [];
  console.log(result)
  
  
  if (result.result && result.security && result.result.PRICE_LAST_TIME_RT && result.result.LAST_PRICE) {
    var prints = [msg.EVENT_TIME, msg.PRICE_LAST_TIME_RT, msg.LAST_PRICE,...