VueCli3+Koa2+Socket.io +Echarts 实时通信 （记录与踩坑）

特别感谢https://blog.csdn.net/weixin_44489222/article/details/110116277这个兄弟的文章

Vuecli3（前端）

npm i vue-socket.io -S

2.按照网上的方法在main.js引入

import SocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
  debug: true,//注意socketio.connect而不是直接socketio
  connection: SocketIO.connect('http://localhost:2333', {///socket.io
    transports: ['websocket'],//这里是通过websocket进行传播
    autoConnect: false, // 关闭自动连接
  })
}));

3.需要在config/index.js，配置如下：

 dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/socket.io': {
        target: 'http://localhost:2333', //代理的服务地址
        changeOrigin: true, // needed for virtual hosted sites
        logLevel: 'debug',
        ws: true,//这是将ws的协议加入到websocket当中
      }
    },

4.需要在组件中加入它本身的方法connect() disconnect() connect_failed ()以及方法test1（）
其中test1（）需要接受一个从后端的发过来的value

sockets: {
  disconnect () {
    console.log('Socket 断开')
  },
  connect_failed () {
    console.log('连接失败')
  },
  connect () {
    console.log('连接成功')
    
  },
  test1 (value) {
   this.data5.push(value)
   this.data5.shift();
  },
  reconnect(){
    
  }
},

前端总代码：

<template>
    <div>
        <div> 
          {{msg}}
          {{arr}}
        </div>
    </div>
</template>
<script>
 import axios from 'axios';
export default{
    data (){
        return {
            msg:null,
            backdata:'',
            arr:[1,2,4,54,88]
        }
    },
     watch: {
    arr(Newarr) {
    }
  },
 mounted(){
    this.$socket.connect()
      axios.get(
        "http://localhost:2333"
        )
      .then(res=>{
        console.log(res.data)
      })
      .catch(err=>{
        console.log(err)
      })
    },
    sockets: {
  disconnect () {
    console.log('Socket 断开')
  },
  connect_failed () {
    console.log('连接失败')
  },
  connect () {
    console.log('连接成功')
  },
  test1 (data) {
   this.arr.push(data)//1.先将从后台接受的数据push到arr的最后
   this.arr.shift();//2.然后将列表的第一个数字进行shift也就是将第一个数字删除。
  },
  reconnect(){  
  }
},
    methods:{ 
    }    
  }
</script>

<style scoped>

</style>

Koa2（后端）

1、首先在最外层的文件夹层当中先建立server/app.js
2、然后在npm init 安装一个package.json
3.安装koa2 和socket.io（如下）

npm i socket.io -S

4.koa2使用的中间件模式，将socket和http共用一个端口

// app.js
const Koa = require("koa")
const app = new Koa()
const Router = require('koa-router');
const router = new Router();
const sever = require('http').createServer(app.callback());//这里注意是将app.callback()加载到这里，并不是将app加载
const io = require('socket.io')(sever, {
    transports: ['websocket'],//必须加入，因为需要通过websocket的方式进行传播
})
const cors = require("koa2-cors")

5.发送，接收消息
发送 socket.emit(名字，传的参数)
接受 socket.on(名字，接受的参数)

io.on('connection', socket => {
    console.log('连接成功')
    // 发送
    socket.emit('test1', {'test': 1})
    // 接收
    socket.on('test2', data => {
      console.log('收到', data)
    })
  })

图片:

如果需要不间断的发送随机数需要创建一个sum(), setInterval()函数是通过设置1000毫秒作为间断一直发送。 需要将下列代码放入io.on(‘connection’, socket => {放在这里}）

 function sum(m, n) {
        var num = Math.floor(Math.random() * (m - n) + n);
        return num;
    }
    setInterval(() => {
        let num = sum(1,1000)
        console.log(num)
        socket.emit('test1',  num )
    }, 1000)      
    } 

后端总代码如下：

const Koa = require("koa")
const app = new Koa()
const Router = require('koa-router');
const router = new Router();
const sever = require('http').createServer(app.callback());
const io = require('socket.io')(sever, {
    transports: ['websocket'],
    // forceNew: true

})
const cors = require("koa2-cors")

app.use(cors())
router.get('/',(ctx)=>{
    ctx.body = "傻了吧";
  
})
app.use(router.routes())
.use(router.allowedMethods())

    
io.on('connection', socket => {
    console.log('连接成功')
    // 发送
    function sum(m, n) {
        var num = Math.floor(Math.random() * (m - n) + n);
        return num;
    }
    setInterval(() => {
        let num = sum(1,1000)
        console.log(num)
        socket.emit('test1',  num )
    }, 1000)      
    } 
    // 接收
    // socket.on('test2', data => {
    //     console.log('收到', data)
    // })
)
    //每隔5000毫秒执行一次for循环
function sleep(n) {
    var start = new Date().getTime();//定义起始时间的毫秒bai数
    while (true) {
        var time = new Date().getTime();//每次执行循环取du得一次当前时间的毫秒数
        if (time - start > n) {//如果当前时间的毫秒数减去起始时间的毫秒数大于给定的毫秒数，即结束循环
            break;
        }
    }
}
sever.listen(2333, () => {
    console.log('socket端口：2333');
})

Echarts（动态更新数据）

1.加入this.drawLine()到watch当中进行监听数据的变化。

  data () {
    return {
      content: '',
      data1:[120, 132, 101, 134, 90, 230, 210],
      data2: [220, 182, 191, 234, 290, 330, 310],
      data3: [150, 232, 201, 154, 190, 330, 410],
      data4: [320, 332, 301, 334, 390, 330, 320],
       data5: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  },
  mounted () {
  this.$socket.connect()//这里需要在mounted当中将socket connect上
  },
   watch: {
    data5(Newarr) {
         this.drawLine()
    },
    deep:true
  },