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 = datadrawChart()
}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 = 1000timer = setInterval(() => {console.log('relinking....')ws = new WebSocket('ws://localhost:9998')if (ws.readyState === 0) {clearInterval(timer)timer = nullws.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 = datadrawChart()
}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 = 1000timer = setInterval(() => {console.log('relinking....')ws = new WebSocket('ws://localhost:9998')if (ws.readyState === 0) {clearInterval(timer)timer = nullws.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>