前端订阅后端推送WebSocket定时任务

这篇具有很好参考价值的文章主要介绍了前端订阅后端推送WebSocket定时任务。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

0.需求

        后端定时向前端看板推送数据,每10秒或者30秒推送一次。

1.前言知识

        HTTP协议是一个应用层协议,它的特点是无状态、无连接和单向的。在HTTP协议中,客户端发起请求,服务器则对请求进行响应。这种请求-响应的模式意味着服务器无法主动向客户端发送消息。

        这种单向通信的缺点在于,如果服务器有持续的状态变化,客户端要获取这些变化就很困难。为了解决这个问题,许多Web应用采用了一种叫做长轮询的技术,即频繁地通过AJAX和XML发起异步请求来检查服务器的状态。但这种方式效率较低,也很浪费资源,因为需要不断地建立连接或保持连接打开。

        而WebSocket则是一种不同的通信协议,它允许客户端和服务器之间进行全双工通信。这意味着无论是客户端还是服务器,都可以随时通过已经建立的连接向对方发送数据。而且,WebSocket只需要建立一次连接就可以保持通信状态,无需频繁地建立和断开连接,因此效率大大提高。

        总结一下,HTTP协议虽然广泛应用,但因其单向通信的局限性,在处理服务器状态持续变化的情况时显得力不从心。而WebSocket协议则通过全双工通信的方式,有效地解决了这个问题,提高了通信效率。

websocket 发布-订阅模式,websocket,定时任务,websocket定时推送消息,看板推送消息

2.后端实现

2.1不带参数

2.1.1添加依赖:

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

2.1.2websocket配置:

/**
 * 通过EnableWebSocketMessageBroker
 * 开启使用STOMP协议来传输基于代理(message broker)的消息,
 * 此时浏览器支持使用@MessageMapping 就像支持@RequestMapping一样。
 */

//WebSocket的配置类
@Configuration
//开启对WebSocket的支持
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{

    /**
     * 注册stomp的端点
     * 注册一个STOMP协议的节点,并映射到指定的URL
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //endPoint 注册协议节点,并映射指定的URl点对点-用
        //注册一个名字为"/endpointSocket" 的endpoint,并指定 SockJS协议。
        //允许使用socketJs方式访问,访问点为webSocketServer,允许跨域
        //连接前缀
          //配置客户端尝试连接地址
        //广播
        registry.addEndpoint("/ws/public").setAllowedOriginPatterns("*").withSockJS();
        //点对点
        registry.addEndpoint("/ws/private").setAllowedOriginPatterns("*").withSockJS();
    }


   /**
     * 通过实现 WebSocketMessageBrokerConfigurer 接口和加上 @EnableWebSocketMessageBroker 来进行 stomp 的配置与注解扫描。
     * 其中覆盖 registerStompEndpoints 方法来设置暴露的 stomp 的路径,其它一些跨域、客户端之类的设置。
     * 覆盖 configureMessageBroker 方法来进行节点的配置。
     * 其中 enableSimpleBroker配置的广播节点,也就是服务端发送消息,客户端订阅就能接收消息的节点。
     * 覆盖setApplicationDestinationPrefixes方法,设置客户端向服务端发送消息的节点。
     * 覆盖 setUserDestinationPrefix 方法,设置一对一通信的节点。
     *
     * @param registry
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //配置消息代理,即设置广播节点
        registry.enableSimpleBroker("/topic","/user");
        //后端接收的主题前缀,即客户端向服务端发送消息需要有/client前缀
//        registry.setApplicationDestinationPrefixes("/client");
        //指定用户发送(一对一)的前缀/user/
//        registry.setUserDestinationPrefix("/user/");
    }
}

2.1.3后端代码 

        一个是订阅请求接口,一个是关闭定时任务接口。这段代码实现了一个基于WebSocket的定时推送机制,允许通过发送WebSocket消息来启动和关闭定时任务,从而每30秒推送一次数据。

  /**
     * 看板接口-不带参数
     * 定时任务(每30秒推送一次)
     */
    @MessageMapping("/backend/produce/summary")
    public void pushProduceSummary() {
        log.info("服务端接收到消息: {}");
        if (scheduledTask.get("pushProduceSummary") == null) {
            ScheduledFuture<?> future = executorService.scheduleAtFixedRate(() -> {
                ProgressVO progressVO = progressSummaryService.summary();
                String destination = "/topic/backend/produce/summary";
                template.convertAndSend(destination, progressVO);
                log.info("已推送信息,每30秒推送一次:{}");
            }, 1, 30, TimeUnit.SECONDS);
            scheduledTask.put("pushProduceSummary", future);
        } else {
            log.info("定时任务已开始!");
        }

    }
/**
     * 关闭/backend/produce/summary接口的定时任务
     *
     * @author weiq
     */
    @MessageMapping("/close/backend/produce/summary")
    public void cancelPushProduceSummary() {
        scheduledTask.forEach((StringKey, future) -> {
            if (future != null && !future.isCancelled() && StringKey.equals("pushProduceSummary")) {
                // 清除定时任务的引用
                scheduledTask.remove("pushProduceSummary");
                boolean cancel = future.cancel(true);
                if (cancel) {
                    log.info("已关闭定时任务Key={}",StringKey);
                }else{
                    log.info("失败关闭定时任务Key={}",StringKey);
                }
            }
        });

    }

2.2带参数

        一个是订阅请求接口,一个是关闭定时任务接口。

  • 当客户端向 /backend/produce/runEfficiency/{startTime}/{endTime} 这个 WebSocket 地址发送消息时,pushProduceRunEfficiency 方法会被调用。
  • 这个方法会检查是否已有一个定时任务在运行。如果没有,它会创建一个新的定时任务,该任务会每30秒从 runEfficiencyService 获取运行效率数据,并通过 WebSocket 发送到指定的主题(destination)。
  • 前端(或任何监听该主题的 WebSocket 客户端)需要事先订阅这个主题,以便能够接收后端发送的数据。
 /**
     * (看板)
     *定时任务(每30秒推送一次)
     * @param startTime
     * @param endTime
     */
    @MessageMapping("/backend/produce/runEfficiency/{startTime}/{endTime}")
    public void pushProduceRunEfficiency(@DestinationVariable Long startTime, @DestinationVariable Long endTime) {
        log.info("服务端接收到消息: startTime={},endTime={}", startTime, endTime);
        if (scheduledTask.get("pushProduceRunEfficiency") == null) {
            ScheduledFuture<?> future = executorService.scheduleAtFixedRate(() -> {
                List<RunVO> runVOList = runEfficiencyService.run(startTime, endTime);
                String destination = "/topic/backend/produce/runEfficiency" + "/" + startTime + "/" + endTime;
                template.convertAndSend(destination, runVOList);
                log.info("已推送信息,每30秒推送一次:{}");
            }, 1, 30, TimeUnit.SECONDS);
            scheduledTask.put("pushProduceRunEfficiency", future);
        }else{
            log.info("定时任务已开启!");
        }

    }
    /**
     * 关闭/backend/produce/runEfficiency/{startTime}/{endTime}接口的定时任务
     *
     * @author weiq
     */
    @MessageMapping("/close/backend/produce/runEfficiency")
    public void cancelPushProduceRunEfficiency() {
        scheduledTask.forEach((StringKey, future) -> {
            if (future != null && !future.isCancelled() && StringKey.equals("pushProduceRunEfficiency")) {
                // 清除定时任务的引用
                scheduledTask.remove("pushProduceRunEfficiency");
                boolean cancel = future.cancel(true);
                if (cancel) {
                    log.info("已关闭定时任务Key={}",StringKey);
                } else {
                    log.info("失败定时任务Key={}",StringKey);
                }
            }
        });
    }

3.前端验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.0.min.js"
            integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        var stompClient = null;

        function setConnected(connected) {
            document.getElementById("connect").disabled = connected;
            document.getElementById("disconnect").disabled = !connected;
            $("#response").html();
        }

        function connect() {
            console.log("开始连接吧")
            var socket = new SockJS("http://localhost:8501/ws/public");
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                //前端连接完成后,开始订阅主题
                // stompClient.subscribe('/topic/all', function (response) {
                stompClient.subscribe('/topic/backend/produce/summary', function (response) {
                    var responseData = document.getElementById('responseData');
                    var p = document.createElement('p');
                    p.style.wordWrap = 'break-word';
                    p.appendChild(document.createTextNode(response.body));
                    responseData.appendChild(p);
                });
            }, {});
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }

        //请求地址,向WebSocket 地址发送消息
        function sendMsg() {
            var content = document.getElementById('content').value;
            // stompClient.send("/all", {}, JSON.stringify({'content': content}));
            stompClient.send("/backend/produce/summary", {}, JSON.stringify({'content': content }));
        }
        //关闭WebSocket 请求的定时任务
        function sendMsg1() {
            var content = document.getElementById('content').value;
            // stompClient.send("/all", {}, JSON.stringify({'content': content}));
            stompClient.send("/close/backend/produce/summary", {}, JSON.stringify({'content': content }));
        }
        // function sendMsg1() {
        //     var content = document.getElementById('content').value;
        //     // stompClient.send("/all", {}, JSON.stringify({'content': content}));
        //     stompClient.send("/close/scene/stepActualTime/128", {}, JSON.stringify({'content': content }));
        // }
        //
        // function sendMsg2() {
        //     var content = document.getElementById('content').value;
        //     // stompClient.send("/all", {}, JSON.stringify({'content': content}));
        //     stompClient.send("/close/scene/stepActualTime/219", {}, JSON.stringify({'content': content }));
        // }
    </script>
</head>

<body notallow="disconnect()">
<noscript>
    <h2 style="color: #ff0000">
        Seems your browser doesn't support Javascript! Websocket relies on Javascript being
        enabled. Please enable
        Javascript and reload this page!
    </h2>
</noscript>
<div>
    <div>
        <labal>连接广播频道</labal>
        <button id="connect" onclick="connect()">Connect</button>
        <labal>取消连接</labal>
        <button id="disconnect" disabled="disabled" onclick="disconnect()">Disconnect</button>
    </div>

    <div id="conversationDiv">
        <labal>广播消息</labal>
        <input type="text" id="content"/>
        <button id="sendMsg" onclick="sendMsg();">Send</button>

    </div>
    <div id="conversationDiv1">
        <labal>广播消息1</labal>
        <input type="text" id="content1"/>
        <button id="sendMsg1" onclick="sendMsg1();">Send</button>

    </div>

<!--    <div id="conversationDiv2">-->
<!--        <labal>广播消息2</labal>-->
<!--        <input type="text" id="content2"/>-->
<!--        <button id="sendMsg2" onclick="sendMsg2();">Send</button>-->

<!--    </div>-->

    <div>
        <labal>接收到的消息:</labal>
        <p id="responseData"></p>
    </div>
</div>

</body>
</html>

后端启动,打开HTML测试页面,可看到运行结果!文章来源地址https://www.toymoban.com/news/detail-857290.html

到了这里,关于前端订阅后端推送WebSocket定时任务的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue使用WebSocket实现实时获取后端推送的数据。

    Vue可以使用WebSocket实现实时获取后端推送的数据。 1.在Vue项目中安装WebSocket库 可以使用npm或yarn安装WebSocket库: 2.创建WebSocket连接 在Vue组件中创建WebSocket连接,连接到后端WebSocket服务器,代码如下: 上面的代码中,使用WebSocket连接到后端WebSocket服务器,通过监听onmessage事件,

    2024年02月08日
    浏览(47)
  • Spring定时任务+webSocket实现定时给指定用户发送消息

    生命无罪,健康万岁,我是laity。 我曾七次鄙视自己的灵魂: 第一次,当它本可进取时,却故作谦卑; 第二次,当它在空虚时,用爱欲来填充; 第三次,在困难和容易之间,它选择了容易; 第四次,它犯了错,却借由别人也会犯错来宽慰自己; 第五次,它自由软弱,却把

    2024年02月07日
    浏览(48)
  • websockets-后端主动向前端推送消息

    公司领导提出了一个新的需求,那就是部门主管在有审批消息的情况下,需要看到提示消息。其实这种需求最简单的方法使接入短信、邮件、公众号平台。直接推送消息。但是,由于使自研项目,公司领导不想花钱,只能另辟蹊径。 WebSocket协议是基于TCP的一种新的网络协议。

    2024年02月09日
    浏览(54)
  • websocket实时推送统计数据给前端页面

    前提须知:websocket基本使用 业务场景,每秒推送统计数据给前端页面,分别显示前天,昨天,今天的前十名客户数据 @ServerEndpoint(\\\"/smsMCustomerStaTop10Ws\\\") 定义推送数据给到具体的连接标识 以上 onOpen() 方法最终触发的业务方法 smsMonitorService.pushSmsMCustomerStaTop10(); 以上 smsMonitorMapper.findSm

    2024年02月15日
    浏览(45)
  • Springboot整合WebSocket实现主动向前端推送消息

            在上篇文章tcp编程中,我们实现了C++客户端与java服务器之间的通信,客户端发送了一个消息给服务器,今天我们要实现基于WebSocket实现服务器主动向前端推送消息,并且以服务器接收到C++客户端的消息主动向前端推送消息的触发条件。 WebSocket 的诞生背景       

    2024年03月16日
    浏览(40)
  • SpringBoot集成WebSocket,实现后台向前端推送信息

    在一次项目开发中,使用到了Netty网络应用框架,以及MQTT进行消息数据的收发,这其中需要后台来将获取到的消息主动推送给前端,于是就使用到了MQTT,特此记录一下。 WebSocket协议是基于TCP的一种新的网络协议。它实现了客户端与服务器全双工通信,学过计算机网络都知道

    2024年01月16日
    浏览(45)
  • webSocket推送太快导致前端渲染卡顿问题优化

    优化思路: 把webSocket接收到的数据用一个数组存起来,达到一定长度再统一渲染,可根据推送数据的速度适当调解数组长度限制,如果一段时间内改数组长度打不要渲染条件,就用定时器之间渲染

    2024年02月03日
    浏览(39)
  • 苍穹外卖项目解读(四) 微信小程序支付、定时任务、WebSocket

    HM新出springboot入门项目《苍穹外卖》,笔者打算写一个系列学习笔记,“苍穹外卖项目解读”,内容主要从HM课程,自己实践,以及踩坑填坑出发,以技术,经验为主,记录学习,也希望能给在学想学的小伙伴一个参考。 注:本文章是直接拿到项目的最终代码,然后从代码出发

    2024年02月07日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包