vue和node進行通信（使用socket.io）

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

}