后端代码
1.加入依赖
<!--webSocket-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2.在config包中添加定时任务的封装包
package com.cloud.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.TaskScheduler;
import org.springframework.scheduling.concurrent.ThreadPoolTaskScheduler;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class ScheduledConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
@Bean
public TaskScheduler taskScheduler() {
ThreadPoolTaskScheduler scheduling = new ThreadPoolTaskScheduler();
scheduling.setPoolSize(10);
scheduling.initialize();
return scheduling;
}
}
3.新建webSocket文件夹,添加WebSocket服务
package com.cloud.webSocket;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
/**
* @program: webSocketTest
* @description: WebSocket服务
* @author: QE
* @create: 2024-04-09
**/
@Component
@Slf4j
@ServerEndpoint("/websocket") //暴露的ws应用的路径
public class WebSocket {
// 用来存储服务连接对象
private static Map<String ,Session> clientMap = new ConcurrentHashMap<>();
/**
* 客户端与服务端连接成功
* @param session
*/
@OnOpen
public void onOpen(Session session){
/*
do something for onOpen
与当前客户端连接成功时
*/
clientMap.put(session.getId(),session);
}
/**
* 客户端与服务端连接关闭
* @param session
*/
@OnClose
public void onClose(Session session){
/*
do something for onClose
与当前客户端连接关闭时
*/
clientMap.remove(session.getId());
}
/**
* 客户端与服务端连接异常
* @param error
* @param session
*/
@OnError
public void onError(Throwable error,Session session) {
error.printStackTrace();
}
/**
* 客户端向服务端发送消息
* @param message
* @throws IOException
*/
@OnMessage
public void onMsg(Session session,String message) throws IOException {
/*
do something for onMessage
收到来自当前客户端的消息时
*/
sendAllMessage(message);
}
//向所有客户端发送消息(广播)
public static void sendAllMessage(String message){
Set<String> sessionIdSet = clientMap.keySet(); //获得Map的Key的集合
// 此处相当于一个广播操作
for (String sessionId : sessionIdSet) { //迭代Key集合
Session session = clientMap.get(sessionId); //根据Key得到value
session.getAsyncRemote().sendText(message); //发送消息给客户端
}
}
}
4.写定时任务查询列表 定时刷新 (该代码刷新的是三张表,所以在定时任务中写了随机数循环方法,通过判断数字随机刷新不同的列表,如果只有一张表可以直接查询后就赋值)
package com.cloud.webSocket;
import cn.hutool.core.date.DateTime;
import com.alibaba.fastjson.JSON;
import com.cloud.domain.Gang;
import com.cloud.domain.Hu;
import com.cloud.domain.Shen;
import com.cloud.service.GangService;
import com.cloud.service.HuService;
import com.cloud.service.ShenService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;
import java.util.*;
@Component
public class Task {
@Autowired
HuService huService;
@Autowired
ShenService shenService;
@Autowired
GangService gangService;
@Scheduled(cron = "*/10 * * * * ?") //定时任务注解 十秒钟刷新一次
public void send(){
DateTime dateTime = new DateTime();
System.err.println("本次刷新时间:"+dateTime);
ArrayList<Integer> arrayList = new ArrayList<>();
arrayList.add(1);
arrayList.add(2);
arrayList.add(3);
Random random = new Random(); //创建一个Random对象,用于生成随机数
int randomIndex = random.nextInt(arrayList.size()); //用Random对象生成一个介于 0 和arrayList.size()之间的随机整数,作为随机索引
Integer randomElement = arrayList.get(randomIndex); //通过随机索引获取ArrayList中的对应元素,并将其存储在randomElement变量中。
System.out.println("随机输出的数: " + randomElement);
if (randomElement==1){
List<Hu> list = huService.list();
WebSocket.sendAllMessage(JSON.toJSONString(list)); //通过 WebSocket 连接发送消息。
} else if (randomElement==2) {
List<Gang> list = gangService.list();
WebSocket.sendAllMessage(JSON.toJSONString(list));
} else if (randomElement==3) {
List<Shen> list = shenService.list();
WebSocket.sendAllMessage(JSON.toJSONString(list));
}
}
}
5. 启动类中加入定时任务注解 @EnableScheduling 就可以启动项目了
前端代码
1.添加websocket文件夹 在该文件夹下添加webSocket.js文件
/**
* 参数说明:
* webSocketURL:String webSocket服务地址 eg: ws://127.0.0.1:8088/websocket (后端接口若为restful风格可以带参数)
* callback:为带一个参数的回调函数
* message:String 要传递的参数值(不是一个必要的参数)
*/
export default{
// 初始化webSocket
webSocketInit(webSocketURL){ // ws://127.0.0.1:8088/websocket
this.webSocket = new WebSocket(webSocketURL);
this.webSocket.onopen = this.onOpenwellback;
this.webSocket.onmessage = this.onMessageCallback;
this.webSocket.onerror = this.onErrorCallback;
this.webSocket.onclose = this.onCloseCallback;
},
// 自定义回调函数
setOpenCallback(callback){ // 与服务端连接打开回调函数
this.webSocket.onopen = callback;
},
setMessageCallback(callback){ // 与服务端发送消息回调函数
this.webSocket.onmessage = callback;
},
setErrorCallback(callback){ // 与服务端连接异常回调函数
this.webSocket.onerror = callback;
},
setCloseCallback(callback){ // 与服务端连接关闭回调函数
this.webSocket.onclose = callback;
},
close(){ // 关闭连接
this.webSocket.close();
},
sendMessage(message){ // 发送消息函数
this.webSocket.send(message);
},
}
2.vue页面
下面的代码中 (import webSocket from "@/views/webSocket";) ---->这一行就是 1 中websocket文件夹的地址
<template>
<div>
<el-button type="primary" @click="sendMessage">发送消息</el-button>
</div>
</template>
<script>
import webSocket from "@/views/webSocket";
export default {
data() {
return {
tableData: [],
}
},
methods: { },
created() {
// webSocket.webSocketInit(process.env.VUE_APP_BASE_API.replace("http","ws")+"/evgis/todoStatus")
webSocket.webSocketInit('ws://127.0.0.1:8666/websocket') //初始化webSocket
// 按需进行绑定回调函数
webSocket.setOpenCallback(res => {
console.log("连接建立成功", res);
})
webSocket.setMessageCallback(res => {
// 在此处进行数据刷新操作即可实现数据发生改变时实时更新数据
console.log(res)
// 这行代码就是后端查询到的数据给前端列表赋值
this.tableData = JSON.parse(res.data); //JSON.parse() 方法用于将 JSON 字符串转换为 JavaScript 对象
console.log("接收到回信", res);
})
webSocket.setErrorCallback(res => {
console.log("连接异常", res);
})
webSocket.setCloseCallback(res => {
console.log("连接关闭", res);
})
}
}
</script>
<style>
</style>
最后复制完代码记得将端口号改为自己的端口号, 查看路径是否一致,在写完后端代码后可以先测试一下webSocket是否可以连接成功 (在线websocket测试-在线工具-postjson)