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

QE_77

已于 2024-04-12 13:51:21 修改

阅读量560

点赞数 4

文章标签： websocket 前端后端

于 2024-04-09 14:58:58 首次发布

本文链接：https://blog.csdn.net/QE_77/article/details/137551250

版权

后端代码

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)