socket.io實時監控數據庫，數據變化更新頁面

一、分別安裝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

修改數據庫數據：