vue和node进行通信(使用socket.io)
socket.io现在越来越频繁的应用于通讯中,于是,我也摸索了一点。接下来是我的一点小小见解。这是vue-cli搭建的前端框架前端Vuemain.jsimport VueSocketio from 'vue-socket.io';import socketio from 'socket.io-client';Vue.use(VueSocketio, socketio('h...
·
socket.io现在越来越频繁的应用于通讯中,于是,我也摸索了一点。
接下来是我的一点小小见解。
这是vue-cli搭建的前端框架
前端Vue main.js
import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';
Vue.use(VueSocketio, socketio('http://xxx.xxx,xx,xxx:xxxx'));//与服务端链接
安装完后记得重启!!!。
vue组件
this.$socket.emit('start');//触发start
sockets:{//不能改
connect:function() {//与socket.io连接后回调
console.log('socket connected');
},
login:function(value) {
console.log(value);//监听login(后端向前端emit login的回调)
}
},
node后端 创建socket.js
若不理解,可以先看看node教程
var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req,res){
// fs.readFile('./index.html',function(error,data){//若根目录有index.html,访问地址,将显示index.html
// res.writeHead(200,{'Content-Type':'text/html'});
// res.end(data,'utf-8');
// });
}).listen(3000,"192.168.xx.xxx");//创建http服务
console.log('Server running at http://192.168.xx.xxx:3000/');
var io = require('socket.io').listen(server);
io.sockets.on('connection', (socket) => {
var timer = '';
console.log('链接成功');
socket.on('start', () => {//监听前端发送的start
timer = setInterval(function () {//定时器每五秒发一次
socket.emit('login', {//触发emit,前端接收
"Action": "DataRecv",
"Data": {
"Reporting_mode": {"T":"I","V":5},
}
});
},5000)
});
});
启动socket ,在浏览器中输入上面的地址192.168.xx.xxx:3000
node 控制台会打印出链接成功
前端启动emit start,控制台每五秒会收到{
“Action”: “DataRecv”,
“Data”: {
“Reporting_mode”: {“T”:“I”,“V”:5},
}
更多推荐
已为社区贡献18条内容
所有评论(0)