Realtime 啥鬼的 – SHXJ BLOG

安装vue 命令列工具

npm install -g @vue/cli

建立一个工作目录，并且将终端机切换到这个目录

利用vue命令，建立realtime-chart专案

vue create realtime-chart

切换进去套件目录，并且测试服务运行

cd realtime-chart
npm run serve

看到这个表示完成了

安装相关的相依套件

npm install --save chart.js express socket.io socket.io-client vue-chartjs

在这个目录底下开启 vscode

code .

建立一个档案 server.js 并且贴上以下程式码

//server.js
    
const express = require("express");
const app = express();
const port = 4000;
const io = require("socket.io")(server);
    
const server = app.listen(`${port}`, function() {
  console.log(`Server started on port ${port}`);
});
    
function getRandomValue(){
    return Math.floor(Math.random() * (50 - 5 + 1)) + 5;
}
io.on("connection", socket => {
    setInterval(() => {
        socket.broadcast.emit("newdata", getRandomValue())
    }, 5000)
});

开启 src/App.vue 档案，然后安装扩充套件

将 App.vue 替换成以下程式码

<template>
  <div class="small">
    <line-chart :chart-data="datacollection" id="mychart"></line-chart>
  </div>
</template>
    
<script>
import LineChart from "../LineChart.js";
import io from "socket.io-client";
var socket = io.connect("http://localhost:4000");
    
export default {
  components: {
    LineChart
  },
  data() {
    return {
      datacollection: null
    };
  },
  created() {
    this.getRealtimeData()
  },
  methods: {
    fillData(fetchedData) {
      this.datacollection = {
        labels: [this.getRandomChartValues(fetchedData), this.getRandomChartValues(fetchedData)],
        datasets: [
          {
            label: "Google Stock",
            backgroundColor: "#1A73E8",
            data: [this.getRandomChartValues(fetchedData), this.getRandomChartValues(fetchedData)]
          },
          {
            label: "Microsoft Stock",
            backgroundColor: "#2b7518",
            data: [this.getRandomChartValues(fetchedData), this.getRandomChartValues(fetchedData)]          }
        ]
      };
    },
    getRealtimeData() {
      socket.on("newdata", fetchedData => {
        this.fillData(fetchedData) 
      })
    },
    getRandomChartValues(number){
      return Math.floor(Math.random() * number)
    }
  }
};
</script>
<style>
.small {
  max-width: 600px;
  margin: 150px auto;
}
</style>

在专案目录下面新增一个档案 LineChart.js 并贴上以下程式码

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
    
export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

试着将伺服器跑起来试试看