当前位置:首页 > 文章 > 正文内容

websocket前后端数据实时更新(前端+后端)

廖万里3年前 (2022-10-27)文章124811

做的项目中需要将后端提供的数据展示在前端页面,一开始我是用JS的setInterval()方法,设置一个时间,每过时间发起一次ajax请求。虽然也能凑活着实现,但总感觉数据不是实时刷新的,而且还占用资源,所以学习WebSocke,并总结了一下,以下是本人总结的前后端WebSocke相关代码:


一、后端:

1.pom.xml添加WebSocke依赖

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

2.WebSocke配置类

@Configurationpublic class WebSocketConfig {    /**
     * 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket  ,如果你使用外置的tomcat就            
        不需要该配置文件
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {        return new ServerEndpointExporter();
    }

}

3.WebSocke服务类

@ServerEndpoint(value = "/webSocket")//主要是将目前的类定义成一个websocket服务器端, 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端@Component@EnableScheduling// cron定时任务@Datapublic class WebSocket {    private static final Logger logger = LoggerFactory.getLogger(WebSocket.class);    /**
     * 静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
     */
    private static int onlineCount = 0;    /**
     * concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
     */
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();    /**
     * 与某个客户端的连接会话,需要通过它来给客户端发送数据
     */
    private Session session;    public static CopyOnWriteArraySet<WebSocket> getWebSocketSet() {        return webSocketSet;
    }    public static void setWebSocketSet(CopyOnWriteArraySet<WebSocket> webSocketSet) {
        WebSocket.webSocketSet = webSocketSet;
    }    /**
     * 从数据库查询相关数据信息,可以根据实际业务场景进行修改
     */
    @Resource
    private IndexService indexService;    private static IndexService indexServiceMapper;    @PostConstruct
    public void init() {
        WebSocket.indexServiceMapper = this.indexService;
    }    /**
     * 连接建立成功调用的方法
     *
     * @param session 会话
     */
    @OnOpen
    public void onOpen(Session session) throws Exception {        this.session = session;
        webSocketSet.add(this);        //查询当前在线人数
        int nowOnline = indexServiceMapper.nowOnline();        this.sendMessage(JSON.toJSONString(nowOnline));
    }    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        logger.info("参数信息:{}", message);        //群发消息
        for (WebSocket item : webSocketSet) {            try {
                item.sendMessage(JSON.toJSONString(message));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);        if (session != null) {            try {
                session.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }    /**
     * 发生错误时调用
     *
     * @param session 会话
     * @param error   错误信息
     */
    @OnError
    public void onError(Session session, Throwable error) {
        logger.error("连接异常!");
        error.printStackTrace();
    }    /**
     * 发送信息
     *
     * @param message 消息
     */
    public void sendMessage(String message) throws IOException {        this.session.getBasicRemote().sendText(message);
    }    /**
     * 自定义消息推送、可群发、单发
     *
     * @param message 消息
     */
    public static void sendInfo(String message) throws IOException {
        logger.info("信息:{}", message);        for (WebSocket item : webSocketSet) {
            item.sendMessage(message);
        }
    }
}

 4.定时任务(为了给前端实时推送数据,我这里写了个定时任务,定时任务我用的是cron表达式,不懂的同学可以上这个网址学习:cron表达式

@Slf4j@Componentpublic class IndexScheduled {    @Autowired
    private IndexMapper indexMapper;    /**
     * 每3秒执行一次
     */
    //@Scheduled(cron = "0/3 * * * * ? ") //我这里暂时不需要运行这条定时任务,所以将注解注释了,朋友们运行时记得放开注释啊
    public void nowOnline() {
        System.err.println("*********   首页定时任务执行   **************");

        CopyOnWriteArraySet<WebSocket> webSocketSet = WebSocket.getWebSocketSet();        int nowOnline = indexMapper.nowOnline();
        webSocketSet.forEach(c -> {            try {
                c.sendMessage(JSON.toJSONString(nowOnline));
            } catch (IOException e) {
                e.printStackTrace();
            }
        });

        System.err.println("/n 首页定时任务完成.......");
    }

}

二、前端:

前端的代码非常的简单,直接上代码。

<body class="gray-bg"><div class="online">
   <span class="online">测试在线人数:<span id="online"></span>&nbsp人</span></div><script th:inline="javascript">
    
    let websocket = null;    let host = document.location.host;    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {        //连接WebSocket节点
        websocket = new WebSocket("ws://" + host + "/webSocket");
    } else {        alert('浏览器不支持webSocket');
    }    
    //连接发生错误的回调方法
    websocket.onerror = function () {        setMessageInnerHTML("error");
    };    
    //连接成功建立的回调方法
    websocket.onopen = function (event) {        setMessageInnerHTML("open");
    };    
    //接收到消息的回调方法
    websocket.onmessage = function (event) {        let data = event.data;        console.log("后端传递的数据:" + data);        //将后端传递的数据渲染至页面
        $("#online").html(data);
    };    
    //连接关闭的回调方法
    websocket.onclose = function () {        setMessageInnerHTML("close");
    };    
    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    };    
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
    
    };    
    //关闭连接
    function closeWebSocket() {
        websocket.close();
    };    
    //发送消息
    function send() {        let message = document.getElementById('text').value;
        websocket.send(message);
    };    
</script></body>

 


本文链接:https://www.kkkliao.cn/?id=169 转载需授权!

分享到:

版权声明:本文由廖万里的博客发布,如需转载请注明出处。


“websocket前后端数据实时更新(前端+后端)” 的相关文章

一个时代终于结束了,电商行业被改写

一个时代终于结束了,电商行业被改写

如果你仔细观察近两年电商行业的新变化,你会明显地感觉到,时代一次又一次被改写。淘宝为什么被拼多多赶超了?抖音是娱乐平台,却为什么突然改做电商了?因为一个时代结束了。众所周知,传统的电商是货架电商。货架店上的本质就是把产品上到店里,然后通过搜索引擎优化或者付费推广的模式,带来流量,然后通过促销的方法,...

6G专利申请量比拼:美国占比35.2%,日本占比9.9%,中国排第几?

6G专利申请量比拼:美国占比35.2%,日本占比9.9%,中国排第几?

5G对于现在的人们来说已经不是什么神秘的存在,很多国家通过近些年的研究都已经逐步掌握了5G技术。不过就5G技术发展的成熟度、设备完善程度以及信号铺设范围来说,我国都是当之无愧的世界第一。但是随着科技技术的不断发展,对于6G的技术研发也被提上日程。不少国家都开始攻克6G技术,并取得了各项专利。根据有关...

六零后已经渐渐老了,都是独生子女家庭,以后怎样养老?

六零后已经渐渐老了,都是独生子女家庭,以后怎样养老?

我是68年的,今年54岁,我也只有一个女儿,以后怎么养老的问题,我在十年前就开始准备了,所以我的养老问题我现在一点都不担心,因为我早已经准备好了。我从上班到退休一直在银行储蓄柜工作。工作小柜台,人生大舞台,在几十年的工作中我见识了形形色色的人,也见过很多老人特别是没有退休金的老人晚年凄苦的生活。所以...

六年前端面试报告

六年前端面试报告

2022.10.20 在当前公司待了两年多,被离职了,拿了点赔偿金继续面试。薪资期望 13-15, 趁着今天1024整理下面试过程。上一次面试我是4年经验,简历也好改,加上两年经验,补上现公司项目就出去找工作了。简历改完后,首先分析下自己现阶段水平,大概能要多少,定一个期望薪资。再就是背面试题了。自...

嫦娥五号样品揭秘:月球如何“延寿”8亿年?

嫦娥五号样品揭秘:月球如何“延寿”8亿年?

文 | 《中国科学报》记者 冯丽妃嫦娥五号玄武岩与阿波罗玄武岩形成示意图。受访者供图月球一直“活到”了什么时候?这是月球演化历史研究中科学家一直想了解的一个重大科学问题。一年前,中科院地质与地球物理研究所(以下简称地质地球所)的科学家们利用嫦娥五号带回的月球样品,证明月球在距今20亿年前仍喷发过滚烫...

木匠的狂傲——魅族手机兴亡史·上

木匠的狂傲——魅族手机兴亡史·上

由于老罗以工匠自诩,黄章也为其木工手艺自豪,故以木匠代指黄章。本来黄章拥有着罗永浩难以比拟的各种优势,例如他的魅族是国内最早做智能手机的,他也是国内“粉丝文化”和“饥饿营销”的鼻祖,他的魅族还有自己的手机工厂,甚至早期没创办小米的雷军还非常想投资魅族!可是魅族还是落得了和锤子一样的结局——被收购。下...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。