WebSocket 消息推送

一：SpringBoot后端建立WebSocket服务器

二：前端vue页面使用echarts和WebSocket

三：服务端给客户端推送消息

四：注意

一：SpringBoot后端建立WebSocket服务器

1.SpringBoot使用WebSocket准备

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2.WebSocketConfig 注入ServerEndpointExporter 交给spring容器管理

@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

3.创建WebSocketServer实体类添加 @ServerEndpoint注解 value 即是前端访问的接口

因为使用websocket的目的只是做消息推送，所以使用了set存储客户端的连接。如果是需要将消息推送给指定客户端，建议使用map或redis将客户端和session绑定存储。

我的代码如下

@Slf4j
//@ServerEndpoint("/api/websocket/{user}")   根据自己的需求选择合适的
@ServerEndpoint(value = "/api/websocket")
@Component
public class WebSocketServer {private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();//    private static Map<String , Session> sessionMap = new ConcurrentHashMap<>();private Session session;// 连接建立成功调用的方法@OnOpenpublic void onOpen(Session session) {this.session = session;webSocketSet.add(this);addOnlineCount();try {sendMessage("连接成功");} catch (IOException e) {e.printStackTrace();}}// 此方法是将用户与对应session绑定，用于推送消息给指定用户//    @OnOpen//  public void onOpen(@PathParam("user") String user, Session session) {//      currentUser = user;//      System.out.println("Connected ... " + session.getId());//    }//连接关闭调用的方法@OnClosepublic void onClose() {webSocketSet.remove(this);}//接收客户端消息// @OnMessage// public void onMessage(String message, Session session) {//    log.info(message);// }//@OnErrorpublic void onError(Session session, Throwable error) {log.error("发生错误");error.printStackTrace();}public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}//将消息推送给所有客户端public void sendInfo(String message) throws IOException {log.info(message);for (WebSocketServer item : webSocketSet) {try {item.sendMessage(message);} catch (IOException e) {continue;}}}
}

二：前端vue页面使用echarts和WebSocket

echarts的使用在此就不再赘述了，不了解的话，可以点击 vue使用echarts

npm install nodejs-websocket 引入webcoket

main.js中引用

import websocket from 'vue-native-websocket';Vue.use(websocket, '', {connectManually: true, // 手动连接format: 'json', // json格式reconnection: true, // 是否自动重连reconnectionAttempts: 5, // 自动重连次数reconnectionDelay: 2000, // 重连间隔时间
});

websocket的使用主要就是初始化一个websocket实例，定义连接路径即请求后端的接口路径，之后就是绑定该websocket的onopen，onerror，onmessage，onsend，onclose方法，知名见意分别是连接成功之后执行的方法（onopen），错误异常时执行（onerror），接收到后端推送的消息时（onmessage），前端向后端发送消息时（onsend），连接关闭时（onclose）。其中onsend，onclose未在代码中使用，其使用方法与其他方法类似，全部代码如下：

<template><div><div id="chart" style="width: 700px; height: 200px;"></div></div>
</template><script>export default{name:"chart",data(){return{scoket:'',yAxis:[],xAxis:[],}},mounted() {this.chart();this.init();},methods:{//初始化websocket实例init: function () {if(typeof(WebSocket) === "undefined"){alert("您的浏览器不支持socket")}else{// 实例化socketthis.socket = new WebSocket("ws://192.168.1.21:8082/api/websocket")// 监听socket连接this.socket.onopen = this.open// 监听socket错误信息this.socket.onerror = this.error// 监听socket消息this.socket.onmessage = this.getMessage}},open: function () {console.log("socket连接成功")},error: function () {console.log("连接错误")},//接收服务器发来的消息getMessage: function (e) {console.log(e.data);this.xAxis = JSON.parse(e.data).xAxis;this.yAxis = JSON.parse(e.data).yAxis;this.chart();},//给服务器发消息的方法send: function () {this.socket.send(this.parms);},close: function () {console.log("socket已经关闭")},chart(){//有的话就获取已有echarts实例的DOM节点。var mychart = this.$echarts.getInstanceByDom(document.getElementById('timechart')); if (mychart == null) { // 如果不存在，就进行初始化。mychart = this.$echarts.init(document.getElementById('chart'));}var option = {title: {text: '时间(ms)/阶段'},tooltip: {trigger: 'axis'},legend: {// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: this.xAxis},yAxis: {type: 'value'},series: [{type: 'line',stack: 'Total',data: this.yAxis}]};mychart.setOption(option);}}
</script><style>
</style>

三：服务端给客户端推送消息

springboot中使用@Autowired注入WebSocketServer

@Autowired
private WebSocketServer webSocketServer;

需要发消息时

 webSocketServer.sendInfo(JSONObject.toJSONString(chartValue));

四：注意

在发送信息的时候，建议转成JSON格式

客户端接收的时候要转换一下

根据个人习惯，echarts根据数据更新自动刷新，我喜欢这样写，图表不更新的时候可以尝试一下

获取到服务器的数据之后

在检查中会有json异常错误，不影响

这样写websocket是在该页面实例化一个websocket，每次刷新页面或者重新进入该页面都会新建一个websocket实例，在真实业务中很少会这样处理。所以就需要将websocket定义为全局实例，跟随vue实例的创建而创建，销毁而销毁。

需要vue使用全局websocket的朋友，可以移步 Vue-全局websockethttps://blog.csdn.net/qq_63312957/article/details/125482244?spm=1001.2014.3001.5502。

如果你恰好需要读到这篇文章，希望对你有帮助。如有写的不对或不够好的地方，欢迎指正。