大屏預研筆記—socket.io實時監控資料庫,資料變化更新頁面
阿新 • • 發佈:2018-12-31
一、分別安裝vue和node對應的socket.io
cnpm intsall socket.io -save
cnpm install vue-socket.io -save
二、前端socket配置
1、main.js引入socket,並連線3000埠
import vue_socket from 'vue-socket.io'
Vue.use(vue_socket, 'http://127.0.0.1:3000')
2、在元件中配置
<template> <ul> <li v-for="user in users"> {{user.name}} </li> </ul> </template> <script> export default { name: 'Test', data () { return { users:[] } }, sockets:{//不能改 connect:function() {//與socket.io連線後回撥 console.log('socket connected'); }, message:function(value) { var json_value=JSON.parse(value);//將結果轉為json格式 this.users=[]; var _this=this; json_value.forEach(function(item,index){ _this.users.push({ 'name':item.FIRST_ }); }); } }, methods:{ initSocket(){ //初始化weosocket this.$socket.emit("message", {}); //向服務端傳送資訊 }, }, created: function () { this.initSocket(); }, //所有檢視都載入後,再呼叫圖表方法 mounted(){ this.$nextTick(function() { var _this=this; }) } } </script> <style scoped> </style>
三、後端socket配置:實時監控策略是定時查詢資料,發現數據有變化時,傳送給前端
// node 後端伺服器 const db=require('./db.js'); const mysql=require('mysql'); const express = require('express'); const app = express(); app.use(express.static('../dist')); var server = require('http').createServer(app); var io = require('socket.io')(server); var conn=mysql.createConnection(db.mysql); conn.connect(); io.on('connection', function(socket){ console.log('a user connected'); socket.on("disconnect", function() { console.log("a user go out"); }); socket.on("message", function(obj) { let sql="select FIRST_ from act_id_user"; let resultStr,resultjson; conn.query(sql, function(err, result) { if (err) { console.log(err); } if (result) { resultjson = JSON.stringify(result); resultStr=resultjson; io.emit("message", resultjson); } }); setInterval(function(){ conn.query(sql, function(err, result) { if (err) { console.log(err); } if (result) { resultjson = JSON.stringify(result); if(resultStr!=resultjson){ resultStr=resultjson; io.emit("message", resultStr); } } }) },3000); }); }); // 監聽埠 server.listen(3000); console.log('success listen at port:3000......');
四、瀏覽器開啟 http://localhost:8080/#/test
修改資料庫資料: