webSocket+定时任务---＞实现前后端交互,定时刷新前端列表页面_websocket 添加定时器

作者：喵喵爱编程 | 2024-07-31 02:10:22

踩

websocket 添加定时器

后端代码

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)

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】