[Vuejs]-Append Each WebSocket Message to div – VUE3

by

0👍

✅

Rather than, clearing out this.tradeDataList = []; and replaing the item this.tradeDataList = parsedData; push the item to the array. Optionally remove old items with splice etc

new Vue({
  el: '#app',
  data: () => {
    return {
      connection: null,
      tradeDataList: [],

    }
  },

  created() {
    this.getTradeStream();
  },

  methods: {
    getTradeStream() {

      console.log("Starting connection to WebSocket Server");
      this.connection = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@trade");

      this.connection.addEventListener("message", (event) => {

        let tradeDataString = event.data;

        let parsedData = JSON.parse(tradeDataString);
        
        // push new item to array
        this.tradeDataList.push(parsedData);
        
        // keep only last 10
        this.tradeDataList = this.tradeDataList.slice(Math.max(this.tradeDataList.length - 10, 0))
      });

      this.connection.onopen = function(event) {
        //console.log(event);
        console.log("Successfully connected to the echo websocket server...");
      };

    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>

<div id="app">
  <div>
    <div v-for="data in tradeDataList" :key="data.id">
      <div>
        {{ data.t }} - {{ data.p }}
      </div>
    </div>
  </div>
</div>

Leave a comment