node+vue3的websocket前后端消息推送

  • 开发
  • 14

node+vue3的websocket前后端消息推送

前期写web项目时，前端获取数据的方式一般是向后端发起数据请求，然后后端向前端发送数据，然后对数据进行渲染，这是最常规的一种数据通讯方式，适用于绝大部分前后端分离的项目

实际上还有一种场景，需要后端向前端主动发送数据，然后前端更新视图，这种一般出现在数据大屏显示项目中。后端每间隔一段时间向前端发送数据，然后驱动前端更新页面，使用的技术是websocket，研究了一段时间，算搞明白是怎么回事了

先看看最终前端的展示效果

动画

一、后端使用websocket

这里我用的后端是node，服务框架用的是express

首先安装express和ws，我的安装包信息如下：

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.19.2",
    "ws": "^8.16.0"
  }
}

1、websocket服务

新建service/websocket_service.js文件，代码如下

const WebSocket = require("ws");
const { getProvinceData, getBarData } = require("../utils/getData");
const wss = new WebSocket.Server({ port: 9998 });

module.exports.listen = () => {
  wss.on("connection", (ws, req) => {
    console.log("WebSocket client connected");
    ws.on("close", () => {
      console.log("WebSocket client disconnected");
    });

    ws.on("message", (data) => {
      console.log(`Received message from client: ${data}`);
      if (data == "map") {
        ws.send(
          JSON.stringify({
            data: getProvinceData(),
          })
        );
      }
      if (data == "bar") {
        ws.send(
          JSON.stringify({
            data: getBarData(),
          })
        );
      }
    });
  });
};

这个文件是websocket的关键，后面会在后端入口文件app.js中引用。websocket连接成功后，会监听连接事件、关闭事件、接收消息事件，接收消息事件中，根据前端发送过来的字段，向前端推送不同的数据。正常情况，这里应该是从数据库取数据，而非随机数据，数据库取数据的逻辑写过无数遍，换一下代码就行了。

此外，还引用了一个随机获取数据的文件getData.js，

代码如下：

const province = [
  { name: "山东", value: 2706 },
  { name: "江苏", value: 2321 },
  { name: "广东", value: 2108 },
  { name: "河南", value: 2081 },
  { name: "四川", value: 1878 },
  { name: "湖南", value: 1760 },
  { name: "河北", value: 1659 },
  { name: "湖北", value: 1641 },
  { name: "安徽", value: 1411 },
  { name: "江西", value: 1340 },
  { name: "云南", value: 1195 },
  { name: "广西", value: 1189 },
  { name: "贵州", value: 1135 },
  { name: "辽宁", value: 1068 },
  { name: "浙江", value: 1030 },
  {
    name: "陕西",
    value: 727,
  },
  {
    name: "山西",
    value: 720,
  },
  {
    name: "福建",
    value: 714,
  },
  {
    name: "重庆",
    value: 589,
  },
  {
    name: "甘肃",
    value: 522,
  },
  {
    name: "内蒙古",
    value: 485,
  },
  {
    name: "吉林",
    value: 458,
  },
  {
    name: "黑龙江",
    value: 452,
  },
  {
    name: "新疆",
    value: 445,
  },
  {
    name: "上海",
    value: 267,
  },
  {
    name: "海南",
    value: 216,
  },
  {
    name: "北京",
    value: 213,
  },
  {
    name: "天津",
    value: 204,
  },
  {
    name: "宁夏",
    value: 171,
  },
  {
    name: "青海",
    value: 121,
  },
  { name: "西藏", value: 85 },
];

exports.getProvinceData = () => {
  const data = [];
  province.forEach((item) => {
    data.push({
      name: item.name,
      value: Math.floor(Math.random() * (1000 - 100 + 1)) + 100,
    });
  });
  return data
};

exports.getBarData = () => {
  const data = []
  for (let i = 0; i < 7; i++){
    data.push(Math.floor(Math.random() * (1000 - 100 + 1)) + 100)
  }
  return data
}

2、项目入口

也就是app.js，代码如下

const express = require("express");
const WebSocketService = require("./service/websocket_service");

const app = express();

app.listen(3019, () => {
  console.log("Server is running on port 3087");
});

// 开启服务端监听
// 当客户端连接后，就会监听
WebSocketService.listen()

除了常规启动express服务外，还要引入上面写好的websocket文件，并调用方法监听

后端就这些了

二、前端接收数据并展示

我用vite创建了一个基础的vue3项目，在App.vue组件上写大屏的代码

App.vue

<script setup>
import ChinaMap from '@/components/ChinaMap.vue'
import BarChart from '@/components/BarChart.vue'
</script>

<template>
  <div class="charts">
    <div class="chart first">
      <BarChart />
    </div>
    <div class="chart second">
      <ChinaMap />
    </div>
    <div class="chart third">
      <BarChart />

    </div>
    <div class="chart fourth">
      <BarChart />

    </div>
    <div class="chart fifth">
      <BarChart />

    </div>
    <div class="chart sixth">
      <BarChart />
    </div>
    <div class="chart seventh">
      <BarChart />

    </div>
    <div class="chart eighth">
      <BarChart />

    </div>
    <div class="chart ninth">
      <BarChart />

    </div>
  </div>
</template>

<style lang="scss" scoped>
.charts {
  height: 100vh;
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);

  .chart {
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  }

  .first {
    grid-row: 1/2;
    grid-column: 1/2;
  }

  .second {
    grid-row: 1/3;
    grid-column: 2/4;
  }

  .third {
    grid-row: 1/2;
    grid-column: 4/5;
  }

  .fourth {
    grid-row: 2/3;
    grid-column: 1/2;
  }

  .fifth {
    grid-row: 2/3;
    grid-column: 4/5;
  }

  .sixth {
    grid-row: 3/4;
    grid-column: 1/2;
  }

  .seventh {
    grid-row: 3/4;
    grid-column: 2/3;
  }

  .eighth {
    grid-row: 3/4;
    grid-column: 3/4;
  }

  .ninth {
    grid-row: 3/4;
    grid-column: 4/5;
  }
}
</style>

使用了grid布局，有个点需要注意一下

写外面包裹的容器时，一定要算好横向和竖向的子容器个数，也就是要写下面两行代码

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);

表明行3行4列，不写的话，容器的宽高一直会随意变化，grid布局参考我的另一篇博客

根组件中还引入了俩画图的组件，这里我直接上代码了

/components/ChinaMap.vue

<template>
    <div class="chart" ref="chartRef">

    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from "echarts";
import "@/assets/json/china";
let ws = new WebSocket('ws://localhost:9998');
const chartData = ref([
    { name: "山东", value: 2706 },
    ])

let interval = null
const handleOpen = () => {
    console.log('WebSocket connection established');
    interval = setInterval(sendMessage, 5000)
}

const handleClose = () => {
    console.log('WebSocket connection closed');
    reLink()
}

const handleMessage = (event) => {
    const { data } = JSON.parse(event.data);
    chartData.value = data
    drawChart()
}

const handleError = () => {
    console.log('WebSocket connection error');
}

ws.addEventListener('open', handleOpen)
ws.addEventListener('close', handleClose)
ws.addEventListener('message', handleMessage)
ws.addEventListener('error', handleError)
// 重连
let timer = null
const reLink = () => {
    console.log('connecting failed, preparing relink...')
    const relinkTime = 1000
    timer = setInterval(() => {
        console.log('relinking....')
        ws = new WebSocket('ws://localhost:9998')
        if (ws.readyState === 0) {
            clearInterval(timer)
            timer = null
            ws.addEventListener('open', handleOpen)
            ws.addEventListener('close', handleClose)
            ws.addEventListener('message', handleMessage)
            ws.addEventListener('error', handleError)
        } else {
            relinkTime = relinkTime + 5000
        }
    }, relinkTime)
}

const sendMessage = () => {
    ws.send('map')
}


const chartRef = ref(null)
let initChart
const drawChart = () => {
    if (initChart != null && initChart != "" && initChart != undefined) {
        initChart.dispose(); //销毁
    }
    initChart = echarts.init(chartRef.value)
    initChart.setOption({
        backgroundColor: "transparent", // 设置背景色透明
        // 必须设置
        tooltip: {
            show: false,
        },

        visualMap: {
            text: ["", ""],
            showLabel: true,
            left: "100",
            bottom: "100",
            min: 0,
            max: 1000,
            inRange: {
                color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"],
            },
            // splitNumber: 5,
            seriesIndex: "0",
        },
        series: [
            // 地图配置
            {
                name: "数值",
                type: "map",
                map: "china",
                zoom: 1,
                tooltip: {
                    show: true,
                    formatter: function (param) {
                        return param.data.name + ": " + param.data.value
                    },
                },
                label: {
                    show: true, // 显示省份名称
                    color: "#000",
                    align: "center",
                },
                top: "10%",
                left: "center",
                aspectScale: 0.75,
                roam: true, // 地图缩放和平移
                itemStyle: {
                    borderColor: "#3ad6ff", // 省分界线颜色  阴影效果的
                    borderWidth: 1,
                    areaColor: "#F5F5F5",
                    opacity: 1,
                },
                // 去除选中状态
                select: {
                    disabled: true,
                },
                // 控制鼠标悬浮上去的效果
                emphasis: {
                    // 聚焦后颜色
                    disabled: false, // 开启高亮
                    label: {
                        align: "center",
                        color: "#ffffff",
                    },
                    itemStyle: {
                        color: "#ffffff",
                        areaColor: "#0075f4", // 阴影效果 鼠标移动上去的颜色
                    },
                },
                z: 2,
                data: chartData.value,
            },
        ],
    })
}

onMounted(() => {
    setTimeout(() => {
        drawChart()
    }, 200)
});

onUnmounted(() => {
    ws.close();
    clearInterval(interval)
});
</script>

<style lang="scss" scoped>

</style>

画图的代码不解释了，主要是websocket的使用

现在WebSocket已经是window的内置类了，所以不需要安装啥，直接上来生成示例就行了

websocket需要监听open/close/message/error事件，核心的就是message事件了，此外，还做了断开后重连的操作，逻辑是设置定时器重新连接服务端

注意这里的message事件是指接收服务端传递过来的message事件

**有一点需要注意，websocket只能传递字符串类型数据，不能传递对象，**所以后端在使用ws.send时，需要使用JSON.stringify转换格式，前端在接收时也需要使用JSON.parse解码

BarChart.vue中的代码

<template>
    <div class="chart" ref="chartRef">

    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from "echarts";

const chartData = ref([120, 200, 150, 80, 70, 110, 130])

let ws = new WebSocket('ws://localhost:9998');
let interval = null
const handleOpen = () => {
    console.log('WebSocket connection established');
    interval = setInterval(sendMessage, 5000)
}

const handleClose = () => {
    console.log('WebSocket connection closed');
    reLink()
}

const handleMessage = (event) => {
    const { data } = JSON.parse(event.data);
    // console.log(data)
    chartData.value = data
    drawChart()
}

const handleError = () => {
    console.log('WebSocket connection error');
}

ws.addEventListener('open', handleOpen)
ws.addEventListener('close', handleClose)
ws.addEventListener('message', handleMessage)
ws.addEventListener('error', handleError)
// 重连
let timer = null
const reLink = () => {
    console.log('connecting failed, preparing relink...')
    const relinkTime = 1000
    timer = setInterval(() => {
        console.log('relinking....')
        ws = new WebSocket('ws://localhost:9998')
        if (ws.readyState === 0) {
            clearInterval(timer)
            timer = null
            ws.addEventListener('open', handleOpen)
            ws.addEventListener('close', handleClose)
            ws.addEventListener('message', handleMessage)
            ws.addEventListener('error', handleError)
        } else {
            relinkTime = relinkTime + 5000
        }
    }, relinkTime)
}

const sendMessage = () => {
    ws.send('bar')
}

const chartRef = ref(null)
let initChart
const drawChart = () => {
    if (initChart != null && initChart != "" && initChart != undefined) {
        initChart.dispose(); //销毁
    }
    initChart = echarts.init(chartRef.value)
    initChart.setOption({
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: chartData.value,
                type: 'bar'
            }
        ]
    })
}
onMounted(() => {
    setTimeout(() => {
        drawChart()
    }, 200)
});

onUnmounted(() => {
    ws.close();
    clearInterval(interval)
});
</script>

<style lang="scss" scoped></style>

逻辑差不多，不再解释了，最好的做法是把重复的代码放到hooks中去

阅读全部

相关推荐

  7. Springboot+WebSocket实现消息推送

    2024-04-20 16:30:04       11 阅读

  8. SpringBoot整合Netty+Websocket实现消息推送

    2024-04-20 16:30:04       30 阅读

  9. 001 websocket(评论功能demo)(消息推送)

    2024-04-20 16:30:04       10 阅读

  10. WebSocket实现数据的实时推送

    2024-04-20 16:30:04       37 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-04-20 16:30:04       18 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-04-20 16:30:04       19 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-04-20 16:30:04       18 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-04-20 16:30:04       20 阅读

热门阅读

  3. rust练习（待完成....）

    2024-04-20 16:30:04       15 阅读

  6. Spark面试整理-解释Spark中的广播变量和累加器

    2024-04-20 16:30:04       17 阅读

  10. 安全运维资料

    2024-04-20 16:30:04       11 阅读

  11. 【架构-15】NoSQL数据库

    2024-04-20 16:30:04       13 阅读

  17. Spring Cloud 面试题（一）

    2024-04-20 16:30:04       13 阅读

  19. 代码随想录 day44 第九章 动态规划 part06

    2024-04-20 16:30:04       15 阅读

  26. Spring框架中的11种设计模式（设计模式之美）

    2024-04-20 16:30:04       15 阅读