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

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

  • 前提须知: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>

推送数据给前端演示图

前端实现websocket实时推送,实操,websocket,前端,java文章来源地址https://www.toymoban.com/news/detail-551371.html

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

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

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

相关文章

  • 【实时数仓】介绍、需求分析、统计架构分析和ods层日志行为数据采集

    普通的实时计算 优先考虑时效性,所以从数据源采集经过实时计算直接得到结果。如此做时效性更好,但是弊端是由于计算过程中的中间结果没有沉淀下来,所以当面对大量实时需求的时候,计算的复用性较差(如B想要使用A的结果),开发成本随着需求增加直线上升。 实时

    2023年04月23日
    浏览(54)
  • 《尚贤达猎头网站流量统计模块》,通过HTTP自定义模块实时获取asp.net网站访问流量,并保存到数据库

    开发了个网站流量统计模块,实时获取asp.net网站访问流量,并保存到数据库。 一、功能: 通过HTTP自定义模块实时获取网站流量 二、支持平台:windows+IIS 三、安装方法: 1、将文件www.sunsharer.cn.dll复制到网站bin目录下; 2、将配置好的sqlstr.txt复制到网站bin目录下; 3、将数据

    2024年01月16日
    浏览(45)
  • websocket多实例推送解决方案-数据实时展示

    需求 需要前端展示实时的订单数据信息。如下图所示,实时下单实时页面统计更新展示   思路方案 前端使用websocket 建立通信   后端监听数据库的binglog变更,实时得到最新数据,推送到前端  现状及问题 客户端想实现实时获取数据的变更,使用了websocket+kafkaMq,当数据库变

    2024年02月03日
    浏览(42)
  • webSocket实现数据的实时推送(附:前后端代码)

            之前开发的一个管理系统项目中,首页是数据大屏展示,一开始我是用JS的 setInterval() 方法,设置一个时间,每过时间发起一次 ajax 请求。虽然也能凑活着用,但总感觉不是最优的方法,而且还比较占用资源,所以学习 WebSocke ,以下是本人的一些学习心得及前后端的

    2024年02月02日
    浏览(51)
  • 【Spring Boot 实现 WebSocket实时数据推送-服务端】

    一、WebSocket配置类 二、WebSocket服务端类 三、WebSocket的连接池类 四、启动Spring Boot服务 五、测试WebSocket连接 WebSocket在线测试工具: http://www.easyswoole.com/wstool.html 测试连接 服务地址:ws://172.18.42.29:14785/endPoint/1 服务启动的IP:172.18.42.29 服务端口:14785 WS的URl:/endPoint 入参:1 六

    2023年04月25日
    浏览(41)
  • WebSocket:实现实时互动、数据推送的利器,你了解多少

    WebSocket技术是一种基于TCP协议的全双工通信协议,它允许浏览器和服务器之间进行实时、双向的通信。相比传统的HTTP请求-响应模式,WebSocket提供了持久连接,可以实时地推送数据,减少了通信的延迟。 WebSocket的工作原理是通过建立一条持久连接来实现实时通信。首先,浏览

    2024年01月18日
    浏览(46)
  • vue和node使用websocket实现数据推送,实时聊天

    需求:node做后端根据websocket,连接数据库,数据库的字段改变后,前端不用刷新页面也能更新到数据,前端也可以发送消息给后端,后端接受后把前端消息做处理再推送给前端展示 使用node ./app.js运行项目 在需要使用websocket连接的页面引入 默认如下: id为243 在数据库改为

    2024年02月15日
    浏览(51)
  • Vue使用WebSocket实现实时获取后端推送的数据。

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

    2024年02月08日
    浏览(50)
  • 多个数据webSocket推送太快导致前端渲染卡顿问题优化

    作者代码写的不怎么样,谅解!主要思路就是把websocket接收到的数据用一个数组暂存起来,达到一定数量一起修改统一渲染,可根据项目数据推送数据的速度适当调解数组大小,然后再加了一个可能一段时间内都到不到数组达标渲染数量,就使用定时器直接做渲染,防止数据

    2024年02月12日
    浏览(49)
  • 大数据(二)大数据行业相关统计数据

    目录 一、大数据相关的各种资讯 二、转载自网络的大数据统计数据 2.1、国家大数据政策 2.2、产业结构分析 2.3、应用结构分析 2.4、数据中心 2.5、云计算 1.    据IDC预测,到2025年全球 数据产生量将达到180ZB ,其中物联网设备将占据很大一部分。 2.    据Gartner预测,到2021年

    2024年02月10日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包