koa-websocket 长连接推送数据

一. 介绍

使用 koa-websocket 实现该功能，只做了一个接口的推送，仅用做测试。长连接使用的 setInterval 实现，后台每隔 3s 向前台推送数据，个人感觉这里不好，后期优化。

二. 实现

后台（服务端）

npm i koa-websocket

// utils/ws
const router = require('koa-router')()
const Zdwxy = require('../models/zdwxySchema.js')
const Koa = require('koa')
const websocket = require('koa-websocket')
const app = websocket(new Koa())

// 监听koa/ws路由，是否有连接
router.all('/koa/ws', (ctx) => {
    setInterval(async () => {
        try {
            const list = await Zdwxy.find()
            ctx.websocket.send(JSON.stringify(list));
        } catch (error) {
            ctx.websocket.send(error.stack);
        }
    }, 3000);
})

// 使用路由
app.ws.use(router.routes()).use(router.allowedMethods())

//端口号后面可采用动态的
app.listen(3001, () =>
    console.log('ws服务启动成功')
)

module.exports = app

// app.js
require('./utils/ws')

前台（前端）

如果上线的话，ws 的地址不用改成服务器地址，127.0.0.1 就好使

<script>
import { onMounted, ref } from "vue";
export default {
  setup(props) {
    let leftFirstData = ref([]);
    
    // 创建一个websocket
    var webSocket = new WebSocket("ws://127.0.0.1:3001/koa/ws");
    webSocket.onmessage = function(evt) {
      // 这是服务端返回的数据
      let data = JSON.parse(evt.data);
      leftFirstData.value = data;
      console.log("data", data);
      console.log("evt", evt);
    };

    return {
      leftFirstData
    };
  }
};
</script>