Vue.js新手问题：使用CanvasJS展示WebSocket数据遇组件异常

Hey Lars, let's dig into this issue you're having with Vue.js, CanvasJS, and WebSockets. From the code snippet you shared, I spot a couple of key gaps that are likely causing your problems—let's break this down step by step.

1. You're not listening for WebSocket messages #

Your code creates a WebSocket instance, but it never sets up a listener for incoming message events. That means your fillData method is never actually called when data arrives. Let's fix that first:

mounted() {
  this.ws = new WebSocket('ws://localhost:1...');
  
  // Bind the message handler to your fillData method
  this.ws.onmessage = this.fillData;
  
  // Add error/close listeners for debugging (always helpful!)
  this.ws.onerror = (error) => {
    console.error('WebSocket connection error:', error);
  };
  this.ws.onclose = (event) => {
    console.log('WebSocket connection closed:', event);
  };
}

Vue automatically binds this to your methods, so assigning this.fillData directly will work—no need for extra .bind(this) here.

2. CanvasJS doesn't react to Vue's reactive data by default #

Simply updating this.cartesian won't trigger a CanvasJS chart refresh, because CanvasJS isn't integrated with Vue's reactivity system. You need to:

• Initialize your CanvasJS chart and store the instance in your component's data
• Update the chart's data points explicitly when new WebSocket data arrives
• Call the chart's render() method to redraw it

Here's how to adjust your code:

export default {
  data() {
    return {
      chart: null, // Store the CanvasJS chart instance here
      ws: null
    }
  },
  methods: {
    fillData(res) {
      try {
        const data = JSON.parse(res.data);
        const buffer = data.mdi;
        console.log('Received WebSocket data:', buffer);

        // Update the chart's data points (adjust based on your data structure)
        this.chart.options.data[0].dataPoints = buffer;
        // Trigger a chart redraw
        this.chart.render();
      } catch (err) {
        console.error('Failed to parse WebSocket data:', err);
      }
    }
  },
  mounted() {
    // Initialize your CanvasJS chart first
    this.chart = new CanvasJS.Chart("chartContainer", {
      // Add your chart configuration (axis labels, type, etc.)
      axisX: { title: "X Axis" },
      axisY: { title: "Y Axis" },
      data: [{
        type: "line", // Or your desired chart type
        dataPoints: [] // Start with empty data
      }]
    });
    this.chart.render();

    // Set up WebSocket connection
    this.ws = new WebSocket('ws://localhost:1...');
    this.ws.onmessage = this.fillData;
    this.ws.onerror = (err) => console.error('WS Error:', err);
    this.ws.onclose = (evt) => console.log('WS Closed:', evt);
  },
  // Clean up WebSocket when component is destroyed to avoid memory leaks
  beforeUnmount() {
    if (this.ws) {
      this.ws.close();
      this.ws = null;
    }
  }
}

3. Don't forget the chart container element #

Make sure your component's template has a DOM element with the ID chartContainer (or whatever ID you use in the CanvasJS initialization):

<template>
  <div id="chartContainer" style="height: 300px; width: 100%;"></div>
</template>

Why this works #

In your non-component code, you were probably directly updating the chart instance whenever data arrived. In Vue, we need to replicate that flow: hold onto the chart instance, update its data, and explicitly trigger a redraw. The missing WebSocket listener was the first blocker—without it, your data handling code never ran at all.

内容的提问来源于stack exchange，提问作者Lars Jagodzinski