const websocket = new Vue({
  el: "#websocket",
  created: () => {
    this.socket = new WebSocket("wss://api-pub.bitfinex.com/ws/2")
    this.socket.onopen = () => {
      websocket.connected = true
    };
    this.socket.onclose = () => {
      websocket.info      = "";
      websocket.connected = false;
    };
    this.socket.onmessage = (message) => {
      json = JSON.parse(message.data);
      if (json.event == "info") websocket.info = `Server ${json.serverId} v${json.version}`;
      if (Array.isArray(json) && json[1] !== "hb") websocket.processValues(json);
    };
  },
  data: {
    connected: false,
    info:      "",
    socket:    undefined
  },
  methods: {
    processCandle: (candle) => {
      console.log(candle);
    },
    processValues: (json) => {
      if (Array.isArray(json[1][0])) {
        json[1].forEach((data) => websocket.processCandle(data));
      } else {
        websocket.processCandle(json[1]);
      }
    }
  },
  watch: {
    connected: (connected) => {
      if (connected === true) this.socket.send('{"event":"subscribe","channel":"candles","key":"trade:1m:tBTCUSD"}');
    }
  }
});