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},
}

Logo

前往低代码交流专区

更多推荐