使用 Spring Boot3.3 + Thymeleaf + WebSocket 实现服务端数据推送及心跳机制

竹林幽深

于 2024-08-31 08:29:31 发布

点赞数

原文链接：https://mp.weixin.qq.com/s/FXC-uL_IaNKoNvY3YB7XhQ

版权

原创编程疏影路条编程 2024年08月31日 07:31 河北

使用 Spring Boot3.3 + Thymeleaf + WebSocket 实现服务端数据推送及心跳机制

在现代 Web 应用中，实时通信成为越来越多场景的核心需求。例如，在线聊天、股票行情推送、游戏服务器的实时状态更新等，都需要在客户端和服务器之间保持实时数据交互。传统的 HTTP 请求/响应模型虽然能够满足部分需求，但由于其基于轮询或长连接的实现方式，往往存在效率低、延迟高等问题。为了解决这些不足，WebSocket 应运而生。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它能够在客户端和服务器之间建立一条持久的连接通道，允许双方随时推送数据，而不需要像传统 HTTP 那样频繁地建立和关闭连接。WebSocket 在降低通信延迟、减少网络资源消耗等方面具有显著优势，因此在高实时性、高并发的应用场景中被广泛采用。

然而，WebSocket 的优势也带来了新的挑战。由于 WebSocket 连接的长期性，如何保持连接的稳定性，尤其是在网络不稳定或长时间未进行数据传输的情况下，是一个需要重点关注的问题。如果不进行适当的处理，WebSocket 连接可能会因为各种原因被中断，导致数据无法及时推送到客户端，影响用户体验。因此，在实际开发中，我们通常需要引入“心跳机制”，通过定期发送心跳消息来检测连接的状态，并及时采取措施恢复中断的连接。

本文将通过一个基于 Spring Boot 和 Thymeleaf 的示例项目，深入探讨如何实现 WebSocket 服务端数据推送及心跳机制。我们将展示如何在服务端处理 WebSocket 连接的建立、消息的发送与接收、以及心跳机制的实现。同时，还将结合前端的实现，演示如何通过 JavaScript 与 WebSocket 进行交互，从而实现一个完整的实时通信系统。本篇文章将为大家提供一个全面、深入的指导，帮助在实际项目中高效实现 WebSocket 通信及其稳定性保障。

运行效果：

若想获取项目完整代码以及其他文章的项目源码，且在代码编写时遇到问题需要咨询交流，欢迎加入下方的知识星球。

项目配置

pom.xml 配置

首先，我们需要在 Spring Boot 项目的 pom.xml 文件中引入相关依赖，包括 WebSocket 支持、Thymeleaf 模板引擎以及前端相关的依赖：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>3.3.3</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.icoderoad</groupId>
	<artifactId>heartbeat</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>heartbeat</name>
	<description>Demo project for Spring Boot</description>
	
	<properties>
		<java.version>17</java.version>
	</properties>
	<dependencies>
		
		<!-- Spring Boot Starter Web -->
	    <dependency>
	        <groupId>org.springframework.boot</groupId>
	        <artifactId>spring-boot-starter-web</artifactId>
	    </dependency>
	
	    <!-- Spring Boot WebSocket -->
	    <dependency>
	        <groupId>org.springframework.boot</groupId>
	        <artifactId>spring-boot-starter-websocket</artifactId>
	    </dependency>
	
	    <!-- Thymeleaf -->
	    <dependency>
	        <groupId>org.springframework.boot</groupId>
	        <artifactId>spring-boot-starter-thymeleaf</artifactId>
	    </dependency>
	
	    <!-- Lombok (用于简化代码) -->
	    <dependency>
	        <groupId>org.projectlombok</groupId>
	        <artifactId>lombok</artifactId>
	        <scope>provided</scope>
	    </dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

2.2 application.yml 配置

在 application.yml 中，我们可以配置 WebSocket 的相关属性以及其他必要的配置项：

server:
  port: 8080

spring:
  thymeleaf:
    cache: false
    mode: HTML
    encoding: UTF-8
    servlet:
      content-type: text/html

logging:
  level:
    org.springframework.web.socket: DEBUG

WebSocket 服务端实现

应用启动类 HeartbeatApplication：

package com.icoderoad.heartbeat;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.scheduling.annotation.EnableScheduling;

@SpringBootApplication
@EnableScheduling  // 启用定时任务
public class HeartbeatApplication {

	public static void main(String[] args) {
		SpringApplication.run(HeartbeatApplication.class, args);
	}

}

配置 WebSocket 处理器

我们首先定义一个 WebSocket 处理器，用于处理客户端的连接、消息以及关闭事件：

package com.icoderoad.heartbeat.handler;

import java.util.HashSet;
import java.util.Set;

import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

@Component
public class WebSocketHandler extends TextWebSocketHandler {

    // 存储当前活跃的会话
    private static final Set<WebSocketSession> sessions = new HashSet<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 连接建立时添加到 sessions 集合
        sessions.add(session);
        System.out.println("连接建立：" + session.getId());
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 接收到消息时处理逻辑
        System.out.println("接收到消息：" + message.getPayload());
        session.sendMessage(new TextMessage("服务端响应：" + message.getPayload()));
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        // 连接关闭时从 sessions 集合移除
        sessions.remove(session);
        System.out.println("连接关闭：" + session.getId());
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        // 处理连接错误
        System.err.println("连接出错：" + exception.getMessage());
        sessions.remove(session);
    }

    // 发送心跳消息
    public void sendHeartbeat() {
        for (WebSocketSession session : sessions) {
            if (session.isOpen()) {
                try {
                    session.sendMessage(new TextMessage("heartbeat"));
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

WebSocket 配置类

接下来，我们配置 WebSocket 的映射路径并注册处理器：

package com.icoderoad.heartbeat.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

import com.icoderoad.heartbeat.handler.WebSocketHandler;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    private final WebSocketHandler myWebSocketHandler;

    public WebSocketConfig(WebSocketHandler myWebSocketHandler) {
        this.myWebSocketHandler = myWebSocketHandler;
    }

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 注册 WebSocket 处理器并映射到 /ws 路径
        registry.addHandler(myWebSocketHandler, "/ws").setAllowedOrigins("*");
    }
}

心跳机制的实现

为了保持 WebSocket 连接的活跃，我们可以通过定时发送心跳消息来检测连接状态。可以使用 Spring 的 @Scheduled 注解实现定时任务：

package com.icoderoad.heartbeat.scheduler;

import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

import com.icoderoad.heartbeat.handler.WebSocketHandler;

@Component
public class HeartbeatScheduler {

    private final WebSocketHandler myWebSocketHandler;

    public HeartbeatScheduler(WebSocketHandler myWebSocketHandler) {
        this.myWebSocketHandler = myWebSocketHandler;
    }

    @Scheduled(fixedRate = 30000)  // 每隔30秒发送一次心跳
    public void sendHeartbeat() {
        myWebSocketHandler.sendHeartbeat();
    }
}

视图控制类：

package com.icoderoad.heartbeat.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {
	
	@GetMapping("/")
    public String index(Model model) {
        return "index";
    }

}

前端实现

前端使用 Thymeleaf 模板引擎结合 Bootstrap 进行简单的界面展示，并通过 JavaScript 实现与 WebSocket 的通信。

Thymeleaf 模板

在 src/main/resources/templates 目录下创建 index.html 模板文件作为前端页面。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>WebSocket 示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h1>WebSocket 示例</h1>
    <button id="connectBtn" class="btn btn-primary">连接</button>
    <button id="disconnectBtn" class="btn btn-danger">断开</button>
    <div class="mt-3">
        <input type="text" id="messageInput" class="form-control" placeholder="输入消息">
        <button id="sendBtn" class="btn btn-success mt-2">发送消息</button>
    </div>
    <div class="mt-3">
        <h3>接收消息：</h3>
        <div id="messages"></div>
    </div>
</div>

<script>
    let websocket;

    document.getElementById('connectBtn').addEventListener('click', function () {
        websocket = new WebSocket("ws://localhost:8080/ws");

        websocket.onopen = function () {
            console.log("WebSocket 连接成功");
        };

        websocket.onmessage = function (event) {
            console.log("收到消息：" + event.data);
            document.getElementById('messages').innerHTML += '<p>' + event.data + '</p>';
        };

        websocket.onclose = function () {
            console.log("WebSocket 连接关闭");
        };
    });

    document.getElementById('disconnectBtn').addEventListener('click', function () {
        if (websocket) {
            websocket.close();
        }
    });

    document.getElementById('sendBtn').addEventListener('click', function () {
        const message = document.getElementById('messageInput').value;
        if (websocket && websocket.readyState === WebSocket.OPEN) {
            websocket.send(message);
        }
    });
</script>
</body>
</html>

总结

本文详细介绍了如何在 Spring Boot 项目中使用 WebSocket 实现服务端数据推送和心跳机制。通过结合 Thymeleaf 模板引擎和 Bootstrap，我们实现了一个简单的前端页面，并展示了 WebSocket 的基本用法。WebSocket 的心跳机制有助于保持连接的稳定性，在实际项目中可以根据需要进一步优化心跳策略和消息处理逻辑。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码来知识星球

竹林幽深

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 Spring Boot3.3 + Thymeleaf + WebSocket 实现服务端数据推送及心跳机制

本文详细介绍了如何在 Spring Boot 项目中使用 WebSocket 实现服务端数据推送和心跳机制。通过结合 Thymeleaf 模板引擎和 Bootstrap，我们实现了一个简单的前端页面，并展示了 WebSocket 的基本用法。WebSocket 的心跳机制有助于保持连接的稳定性，在实际项目中可以根据需要进一步优化心跳策略和消息处理逻辑。今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码来知识星球。
复制链接

扫一扫