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)
}
}

試著將伺服器跑起來試試看