将每个 WebSocket 消息附加到 div - VUE3

Question

我正在尝试在我的 VUE3 组件中呈现来自 Binances Websocket Stream 的每笔交易。我可以渲染 1 行并且该行不断更新，但这不是我想要实现的。非常感谢所有建议/解决方案。

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

<script>
export default {
  name: '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;
            this.tradeDataList = [];

            let parsedData = JSON.parse(tradeDataString);
            this.tradeDataList = parsedData;

            console.log(this.tradeDataList);
        });

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

      }
  }
}
</script>

我已经尝试通过 v-for 循环 this.tradeDataList - 我期待一个每行一个交易的列表。我看到的是 1 行不断更新而不是换行。

Answer 1

而不是清除 this.tradeDataList = []; 项并将 this.tradeDataList = parsedData; push 项替换到数组中。可选地删除带有拼接等的旧项目

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>

将每个 WebSocket 消息附加到 div - VUE3

Append Each WebSocket Message to div - VUE3

javascript

websocket

vue.js

vue-component