websocket实时推送统计数据给前端页面

已于 2023-03-30 14:09:57 修改
阅读量3k 收藏 27
点赞数
分类专栏： 实操 文章标签： websocket 前端 java
于 2022-11-03 16:02:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EDT777/article/details/127671695
版权

文章目录

  • 前提须知:websocket基本使用

  • 业务场景,每秒推送统计数据给前端页面,分别显示前天,昨天,今天的前十名客户数据

连接触发业务定义

  • @ServerEndpoint("/smsMCustomerStaTop10Ws")定义推送数据给到具体的连接标识
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.xyc.monitor.service.SmsMonitorService;
import com.xyc.monitor.service.impl.SmsMonitorServiceImpl;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * Top10客户发送量推送
 */
@Component
@ServerEndpoint(value = "/smsMCustomerStaTop10Ws")
public class SmsMCustomerStaTop10Ws {

    private static final Logger LOGGER = LoggerFactory.getLogger(SmsMCustomerStaTop10Ws.class);


    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //concurrent包的线程安全Set，用来存放每个客户端对应的当前对象。
    private static Set<SmsMCustomerStaTop10Ws> webSocketSet = new CopyOnWriteArraySet<SmsMCustomerStaTop10Ws>();

    private static Map<Session,Integer> map = new ConcurrentHashMap<>();

    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
    //客户端传过来的参数 ,ip:port
    private String parameter;

    private static SmsMonitorService smsMonitorService;

    @Autowired
    public void setSmsMonitorService(SmsMonitorService smsMonitorService) {
        SmsMCustomerStaTop10Ws.smsMonitorService = smsMonitorService;
    }

    /**
     *  连接建立成功调用的方法
     * @param session
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        LOGGER.info("SmsMCustomerStaTop10Ws ===> 有新连接加入！当前在线人数为" + getOnlineCount());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {

        map.remove(this.session);
        //UDPMsgQueueStatusClient.removeUdpClient(parameter);
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        LOGGER.info("SmsMCustomerStaTop10Ws ===> 有一连接关闭！当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     *
     * */
    @OnMessage
    public void onMessage(String message, Session session) {
        //关闭前一个udp
        //UDPMsgQueueStatusClient.removeUdpClient(parameter);
        //this.parameter = message;
        JSONArray objects = JSON.parseArray(message);
        //JSONObject jso = JSON.parseObject(message);
        Integer status= objects.getJSONObject(0).getInteger("status");
        //SmsMonitorServiceImpl.statusSCSSo = status;
        map.put(session,status);
        LOGGER.info("SmsMCustomerStaTop10Ws ===> 来自客户端的消息:" + message);
    }

    /**
     * 发生错误时调用
     */
    @OnError
    public void onError(Session session, Throwable error) {
        LOGGER.info("SmsMCustomerStaTop10Ws 发生错误");
        LOGGER.error("onError ===> ", error);
    }

    /**
     * 推送触发
     */
    private static void pushTrigger() {
        if(SmsMCustomerStaTop10Ws.onlineCount >= 1) {
            if(!SmsMonitorServiceImpl.isPushSCS)
                SmsMonitorServiceImpl.isPushSCS = true;
            smsMonitorService.pushSmsMCustomerStaTop10();

        }
        if(SmsMCustomerStaTop10Ws.onlineCount == 0) {
            SmsMonitorServiceImpl.isPushSCS = false;
        }
    }

    /**
     *  发送文本类型消息  192.168.3.146:10086
     * @throws IOException
     */
    public static void sendInfo(Integer status,Object obj) throws IOException {
        for (SmsMCustomerStaTop10Ws item : webSocketSet) {
            try {
                Session session = item.session;
                Integer integer = map.get(session);
                if(integer == status){
                    item.session.getBasicRemote().sendText(JSON.toJSONString(obj));
                }else{
                    continue;
                }
            } catch (Exception e) {
                LOGGER.info("SmsMCustomerStaTop10Ws ===> 发送文本消息错误", e);
            }
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        SmsMCustomerStaTop10Ws.onlineCount++;
        pushTrigger();
    }

    public static synchronized void subOnlineCount() {
        SmsMCustomerStaTop10Ws.onlineCount--;
        pushTrigger();
    }
}

使用到的业务方法

  • 以上onOpen()方法最终触发的业务方法smsMonitorService.pushSmsMCustomerStaTop10();

/**
     * 记录线程数，保证只创建一个线程
     */
    private volatile static int threadCountSCS = 0;
  /**
     * 数据推送开关，是否推送数据到前端，默认关闭
     */
    public static boolean isPushSCS = false;
      /**
     * 今日1,昨天2,前天3 数据 默认今日
     */
     
    private static ImmutableSet<Integer> statusSCS = ImmutableSet.of(1, 2, 3);
    
 @Override
    public void pushSmsMCustomerStaTop10() {
        if (threadCountSCS >= 1)
            return;
            
      threadCountSCS++;
      
        new Thread() {
            public void run() {
              
                Thread.currentThread().setName("pushSmsMCustomerStaTop10-" + threadCountSCS);
                System.out.println("top10客户发送量推送服务线程启动");
                while (isPushSCS) {
                    for (Integer statusSC : statusSCS) {
                        try {
                            List<SmsMCustomerStaVo> smsMCustomerStaTop10 = smsMonitorMapper.findSmsMCustomerStaTop10(statusSC);
                            List<SmsMCustomerStaView> smsMCustomerStaViewList = new ArrayList<>();
                            int i = 1;
                            for (SmsMCustomerStaVo sm : smsMCustomerStaTop10) {
                                SmsMCustomerStaView smsMCustomerStaView = new SmsMCustomerStaView();
                                smsMCustomerStaView.setId(i);
                                smsMCustomerStaView.setShortName(SmsSymbol.customerMap.get(sm.getCustomerNo()).getShortName());
                                smsMCustomerStaView.setCustomerName(SmsSymbol.customerMap.get(sm.getCustomerNo()).getName());
                                smsMCustomerStaView.setSubmitCount(sm.getAllCount());
                                Integer issueCount = sm.getSendSuccessCount() + sm.getSendFailCount() + sm.getSubmitSuccessCount(); //下发总量 = 总量除开提交失败
                                smsMCustomerStaView.setIssueCount(issueCount);
                                //成功率(前30分钟成功率)
                                Double sendSuccessCountRate = 0D;
                                if(sm != null && sm.getAllCountThirty() != null &&  sm.getAllCountThirty() != 0){
                                    sendSuccessCountRate = sm.getSendSuccessCountThirty() / sm.getAllCountThirty().doubleValue();
                                }
                                //未知率
                                Double unknownRateRate = 0D;
                                if(sm != null && sm.getAllCount() != null && sm.getAllCount() != 0){
                                    //sendSuccessCountRate = sm.getSendSuccessCount() / issueCount.doubleValue(); //发送成功率
                                    unknownRateRate = sm.getSubmitSuccessCount() / sm.getAllCount().doubleValue(); //未知率 = 提交成功 / 提交总量
                                }
                                smsMCustomerStaView.setSuccessRate(sendSuccessCountRate == 0 ?"0%":new DecimalFormat("#0.00").format(sendSuccessCountRate * 100) + "%");
                                smsMCustomerStaView.setUnknownRate(unknownRateRate == 0 ?"0%":new DecimalFormat("#0.00").format(unknownRateRate * 100) + "%");
                                i++;
                                smsMCustomerStaViewList.add(smsMCustomerStaView);
                            }
                            //List<SmsMCustomerStaView> collect = smsMCustomerStaViewList.stream().sorted(Comparator.comparing(SmsMCustomerStaView::getSubmitCount).reversed()).collect(Collectors.toList());
                            SmsMCustomerStaTop10Ws.sendInfo(statusSC,smsMCustomerStaViewList);

                        } catch (Exception e) {
                            // TODO Auto-generated catch block
                            log.error("top10客户发送量推送服务报错",e );
                        }
                    }
                    try {
                      Thread.sleep(1000);
                    }catch (Exception e){
                        System.out.println(e);
                    }
                }
                System.out.println("top10客户发送量推送服务线程停止");
                threadCountSCS--;
            }
        }.start();
    }

涉及的查询sql

  • 以上smsMonitorMapper.findSmsMCustomerStaTop10(statusSC);(传参区分查 前日/昨日/今日 数据)
  • oracle数据库查询语句
<select id="findSmsMCustomerStaTop10" resultMap="SmsMCustomerStaResultMap">
		select t.* from (
		 SELECT SUM(ALL_COUNT) ALL_COUNT,SUM(SUBMIT_SUCCESS_COUNT) SUBMIT_SUCCESS_COUNT,SUM(SUBMIT_FAIL_COUNT) SUBMIT_FAIL_COUNT,
		 SUM(SEND_SUCCESS_COUNT) SEND_SUCCESS_COUNT,SUM(SEND_FAIL_COUNT) SEND_FAIL_COUNT,SUM(ALL_COUNT_THIRTY) ALL_COUNT_THIRTY,
		SUM(SEND_SUCCESS_COUNT_THIRTY) SEND_SUCCESS_COUNT_THIRTY,CUSTOMER_NO
		 FROM SMS_M_CUSTOMER_STA
		 <if test="statusSCS == 1">
			 WHERE STA_DATE_TIME >= trunc(sysdate)
		 </if>
		<if test="statusSCS == 2">
			WHERE STA_DATE_TIME >= trunc(sysdate-1) AND STA_DATE_TIME <![CDATA[ < ]]> trunc(sysdate)
		</if>
		<if test="statusSCS == 3">
			WHERE STA_DATE_TIME >= trunc(sysdate-2) AND STA_DATE_TIME <![CDATA[ < ]]> trunc(sysdate-1)
		</if>
	    GROUP BY CUSTOMER_NO ORDER BY ALL_COUNT DESC)t where rownum &lt;= 20
	</select>

推送数据给前端演示图

在这里插入图片描述

zeki豪
关注
专栏目录
springboot集成websocket实时推送消息给前端
Dncfjy_的博客
02-28 674
springboot集成websocket推送消息给前端
后端 消息 转发_springCloud 后端使用webSocket向前端推送消息
weixin_39737368的博客
12-20 445
1、webSocketwebSocket长连接是一种在单个tcp连接上进行全双工通信的协议，允许双向数据推送。一般微服务提供的restful API只是对前端请求做出相应。使用webSocket可以实现后端主动向前端推送消息。2、springboot使用webSocket1、pom文件添加依赖org.springframework.bootspring-boot-starter-websocket...
WebSocket怎么在SpringBoot项目中自动推送消息到前端？
Lockin_C的博客
08-08 895
WebSocket在SpringBoot项目中自动推送消息到前端
java后端主动往前端推送消息
weixin_37046340的博客
07-14 490
实现Java后端主动往前端推送消息的方法 一、流程概述 为了实现Java后端主动往前端推送消息，我们可以采用WebSocket技术。WebSocket是一种在单个TCP连接上进行全双工通信的协议，可以实现服务器主动向客户端推送消息。下面是整个流程的概述： 步骤 描述 1 前端与后端建立WebSocket连接 ...
使用websocket给前台推送消息
lhw244的专栏
06-24 1878
websocket给前台推送消息
websocket 推送前端-2 （推荐）
flymoringbird的博客
03-21 1040
【代码】websocket 推送前端-2 （推荐）
html5 的 webScoket 和 C# 建立Socket连接
weixin_30865427的博客
08-09 575
最近使用的web项目中，需要服务器直接触发前端显示效果。 所以研究了一下websocket: 名词解释： WebSocketWebSocket协议是一种双向通信协议，它建立在TCP之上，同http一样通过TCP来传输数据，但是它和http最大的不同有两点： 1.WebSocket是一种双向通信协议，在建立连接后，WebSocket服务器和Browser/UA都能主动的向对方发送或...
websocket实现前后台数据更新
05-31
1、前端页面 UI01.HTML 页面，采用echarts折线图、柱状图、饼图、仪表盘等显示形式，展示后台发送的数据； 2、javascript websocket.js，websocket页面使用javascript文件，定义.onopen、onmessage、onclose、on...
JAVA 实现WebSocket推送数据到数据大屏页面
qrn196789910的博客
07-21 4711
上篇文章，说到做一个大数据可视化的数据大屏，这里我用了开源的项目去进行二次开发，然后进行数据对接就好，不知道的可以看看数据大屏实例 接下来，我们要考虑的是这么把数据进行对接的问题了，起初我是使用 jquery 的ajax进行数据对接，但是你会发现一个问题，就是数据更新的时候你这么处理？刷新页面再次请求服务端接口，这里我听到一个朋友说，他们之前开发的时候，前端是通过ajax轮询去调用服务端接口的，这样看似是解决问题了，其实是不可取的，对服务端很不又好，确却的说是错误的，然后他们就使用了WebSocket 进行
redis+websocket 实现统计数据实时推送
热门推荐
qq_39125531的博客
08-23 1万+
刚刚进入这个公司是三年前，我也刚刚满打满算有了两年工作经验，开发时很少会考虑性能、安全这些方面的东西。那时候公司需要我做一个监控大屏，就是满是统计图表的一个页面，投影出来展示。刚刚接手的时候我觉得这个项目的难点有两个：图表插件和统计sql。经过一段时间的开发，项目基本完成，图表选择用的highchars，参照着demo里的数据格式传入数据并没有想象中的困难，sql也勉勉强强的写了出来了，但是性能一
WebSocket实现前台实时显示数据库数据
qq_42695926的博客
11-09 1万+
业务逻辑： 在浏览器和服务器之间建立WebSocket双工连接，启动一个线程，设置私有变量数据修改时间，循环读取数据库实时表中某个传感器的数据修改时间，与私有变量进行对比，如果相同则不做任何改动，若不同，则把查询到的时间赋值给私有变量，同时向浏览器发送推送消息，前端通过ajax发送请求更新数据。 添加依赖： 用之前 需查询依赖版本是否与spring版本兼容 WebSocket依赖： &lt;de...
SpringBoot 实现WebSocket页面消息推送及Redis 发布订阅和队列功能
纸上得来终觉浅，绝知此事要躬行
05-30 9673
项目简介：采用SpringBoot开发项目实现大屏数据展示功能，轻量级处理额外需求业务。基于Redis服务发布订阅功能，实现系统有新数据的时候主动推送数据到大屏的WebSocket监听页面进行展示。队列的消费需要提供接口这个方式不够友好，发布订阅只需要在另一个服务器上同样部署一个springboot开发的应用并订阅相同的主题即可（队列功能适合同一应用环境下，引用项目打包后的jar包进行开发即可）。...
通过webSocket实现服务端推送消息到前端页面
had__had的博客
06-15 2420
pom文件中引入依赖 <!-- 开启websocket支持--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> 配置类 @Component
我有 7种 实现web实时消息推送的方案，7种！
程序员内点事
07-19 1547
推送的场景比较多，比如有人关注我的公众号，这时我就会收到一条推送消息，以此来吸引我点击打开应用。消息推送(push)通常是指网站的运营工作等人员，通过某种工具对用户当前网页或移动设备APP进行的主动消息推送。消息推送一般又分为web端消息推送和移动端消息推送。上边的这种属于移动端消息推送，web端消息推送常见的诸如站内信、未读邮件数量、监控报警数量等，应用的也非常广泛。+1就可以了。push）和拉（pull）两种形式，下边我们逐个了解下。钱能解决的需求都不是问题。...
使用webSocket 实现给前端发消息
weixin_45447370的博客
07-28 2112
通过webSocket去实现订阅的功能。例如将一个对象通过ws发给前端。WebsocketMethods类。WsMessageHeader类。StructBasic类。TStructUtils类。WsClient类。
Springboot Vue WebSocket 实现后端向前端实时推送数据库信息
G1012_的博客
08-04 4725
代码】Springboot Vue WebSocket 实现后端向前端实时推送数据库信息。
用WebSocket实现后端消息实时推送到前端
weixin_43128990的博客
01-19 9468
1.前端调用WebSocket server代码： //调用WebSocket server batchSeting() { this.openStatue = 1; const serve = window.location.hostname; this.websock = new WebSocket(`ws://${serve}:8088/e...
利用WebSocket定时推送数据给前端
Java_DongDong的专栏
10-15 3112
第一步：引入Jar包，以Maven项目为例 <!-- WebSocket --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> &...
集成框架 -- websocket发消息给前端
寿春
10-21 1936
基于连接可以做健全，前提必须有同一个域名，ws协议下可以长连接，其他的连接配置参数可以在后端校验。完成连接后，后端可以发送消息到前端，用于消息传输，但是websocket是不稳定的，netty有稳定版本的。前言： 使用websocket的原因，是因为项目中会出现无法服务器调用前端的情况，基于此TCP长连接协议，所以用了ws协议封装了一层，流反向调用。使用websocket 前端需要连接对应的服务域名，域名替换为ws，打到集群主机。注册使用bean 用来扫描端点。
websocket实时推送数据前端
最新发布
09-13
WebSocket是一种在单个TCP连接上进行全双工通信的协议，它为Web应用程序提供了一种在客户端和服务器之间进行实时双向通信的方法。使用WebSocket，服务器可以主动向客户端推送数据，而不仅仅是客户端请求数据时服务器才响应。这对于实现如聊天应用、实时监控系统、游戏等需要即时通信的应用非常有用。 前端实现WebSocket实时推送数据的基本步骤如下： 1. 创建WebSocket连接：前端首先需要创建一个WebSocket对象，并指定要连接的服务器地址。一旦连接建立，就可以进行双向数据交换。 ```javascript var socket = new WebSocket('ws://服务器地址'); ``` 2. 监听WebSocket事件：在WebSocket对象上可以监听几个关键事件： - open：连接建立时触发。 - message：接收到服务器发送的消息时触发。 - close：连接被关闭时触发。 - error：发生错误时触发。 ```javascript socket.onopen = function(event) { // 连接成功 }; socket.onmessage = function(event) { // 收到消息 var data = event.data; // 处理接收到的数据 }; socket.onclose = function(event) { // 连接关闭 }; socket.onerror = function(event) { // 发生错误 }; ``` 3. 发送数据：前端可以通过`send`方法向服务器发送数据。 ```javascript socket.send('需要发送的数据'); ``` 4. 关闭连接：当不再需要与服务器通信时，可以通过调用`close`方法来关闭WebSocket连接。 ```javascript socket.close(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值