nodejs監聽cpu使用率、記憶體使用率，並通過socket.io與vue專案互動

通過nodejs 監聽到cpu的使用率和記憶體使用率。
在vue專案中使用socket.io包獲取監聽的資料

nodejs後臺部分

1. 安裝 npm install os-utils
2. 引入包，監聽的埠為 1111
3. 使用io.sockets監聽事件。注意：socket是連線那次的，繫結的監聽事件也要寫在這個上面。
4. 然後通過os-utils提供的工具，獲取相應的資料
5. 其中on是監聽事件，emit是傳送事件（emit裡面的事件，是讓前端去監聽的）
6. start()方法可以在前端調介面再啟動
   程式碼如下：

var os = require("os");
var io = require("socket.io").listen("1111");
var osUtils = require("os-utils");
var interval = -1;
var currCPU = 0;

io.sockets.on('connection', socket=> {//連線事件
  socket.emit("connected", "連線成功")
  console.log("連線成功")

  socket.on("disconnect",()=>{
    console.log("disconnect")
  })

  socket.on('endConnection', function (data) {
    console.log("endConnection")
    console.log(data)
    socket.emit("unConnection", "伺服器端已停止")
    clearInterval(interval)
    interval = -1;
  })
})

function start(){
  updateCPU();
  if (interval < 0) {
    interval = setInterval(function () {
      var freeMem = os.freemem()/1024/1024/1024;
      var totalMem = os.totalmem()/1024/1024/1024;
      var data = {
        cpuUsage: ( currCPU * 100.0 ).toFixed(2) + "%",
        freeMem: freeMem.toFixed(2) + "G",
        totalMem: totalMem.toFixed(2) + "G",
        usedMem: (totalMem - freeMem).toFixed(2) + "G",
        MemUsage: ( (totalMem - freeMem)/totalMem * 100.0 ).toFixed(2) + "%",
      };
      io.sockets.emit("systemUpdate",data)
      console.log(data)
    }, 1000);//每隔1s取系統資料
  }
}

function updateCPU() {
  setTimeout(function () {
    osUtils.cpuUsage(function (value) {
      currCPU = value;

      updateCPU();
    });
  }, 0);
}

//start() // 直接執行  
module.exports = {
  start
}

提供介面呼叫的寫法供參考

var systemInfo = require('../public/javascripts/systemInfo');
router.get('/start', function(req, res, next) {
  systemInfo.start()
  const data = {
    code: 20000,
    desc: "success"
  }
  res.send(data)
});

前端vue部分程式碼
vue.config.js中引入下面程式碼 ,需要先npm安裝vue-socket.io

import VueSocketIO from 'vue-socket.io'
Vue.use(
  new VueSocketIO({
    debug: false,
    connection: 'http://localhost:1111'
  })
)

使用socketio的vue檔案

<template>
  <div class="co">
    <div class="systemInfo" :style="{height:height,width:width}" />
    <el-button @click="startConnection">連線</el-button>
    <el-button @click="endConnection">斷開連線</el-button>
  </div>
</template>

<script>
import { start } from '@/api/systemInfo'
export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    // this.startConnection()
  },
  sockets: {
    connected(data) {
      if (data) {
        console.log('連線成功', data)
      }
    },
    systemUpdate(data) {
      console.log(data)
    },
    unConnection(data) {
      console.log(data)
      this.$socket.close()
    }
  },
  methods: {
    // 開啟連線
    startConnection() {
      start()
      this.$socket.connect()
    },
    endConnection() {
      this.$socket.emit('endConnection', '斷開連線')
    }
  }
}
</script>

前端取到的資料，效果如下：