socket.ioリアルタイム監視データベース、データ変化更新ページ
一、vueとnodeに対応するsocket.ioをそれぞれ取り付ける
二、フロントエンドソケット配置
1、main.jsはsocketを導入し、3000ポートに接続する
2、構成部品
三、バックエンドsocket配置:リアルタイム監視策略はタイミングでデータを検索し、データが変化したことを発見した場合、フロントエンドに送信する
四、ブラウザが開くhttp://localhost:8080/#/test
データベース・データの変更:
cnpm intsall socket.io -save
cnpm install vue-socket.io -save
二、フロントエンドソケット配置
1、main.jsはsocketを導入し、3000ポートに接続する
import vue_socket from 'vue-socket.io'
Vue.use(vue_socket, 'http://127.0.0.1:3000')
2、構成部品
-
{{user.name}}
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;
})
}
}
三、バックエンド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
データベース・データの変更: