实时列表更新！使用Spring Boot和WebSocket实现前台数据刷新

guzhoumingyue

于 2024-08-11 17:44:14 发布

阅读量208

点赞数 3

文章标签： java websocket

本文链接：https://blog.csdn.net/guzhoumingyue/article/details/141108711

版权

当使用Spring Boot框架来实现前台列表的自动刷新时，可以使用WebSocket来实现。下面是一个简单的示例代码：

首先，确保你的Spring Boot项目中已经添加了WebSocket的依赖。

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

接下来，在Spring Boot应用的主类上添加@EnableWebSocket注解以启用WebSocket。

@SpringBootApplication
@EnableWebSocket
public class DemoApplication {

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

然后，创建一个WebSocket处理器类，用于处理WebSocket消息的接收和发送。

@Component
public class WebSocketHandler extends TextWebSocketHandler {

    private final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理收到的消息
        String payload = message.getPayload();
        // 假设刷新列表的请求消息为"refresh"
        if ("refresh".equals(payload)) {
            // 发送刷新列表的消息给所有连接的客户端
            sendMessageToAll("refresh");
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session);
    }

    private void sendMessageToAll(String message) throws IOException {
        for (WebSocketSession session : sessions) {
            session.sendMessage(new TextMessage(message));
        }
    }
}

最后，创建一个控制器类，用于处理前台页面的请求。

@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "home";
    }
}

在前台页面上，可以使用JavaScript连接WebSocket，并发送刷新列表的请求消息。

<!DOCTYPE html>
<html>
<head>
    <title>Spring Boot WebSocket Demo</title>
    <script type="text/javascript">
        var socket = new WebSocket("ws://localhost:8080/websocket");

        socket.onopen = function(event) {
            console.log("WebSocket connected");
        };

        socket.onmessage = function(event) {
            var message = event.data;
            // 假设收到的消息为"refresh"时刷新列表
            if ("refresh" === message) {
                // 刷新列表的逻辑
                console.log("Refreshing list");
            }
        };

        socket.onclose = function(event) {
            console.log("WebSocket disconnected");
        };

        function refreshList() {
            // 发送刷新列表的请求消息
            socket.send("refresh");
        }
    </script>
</head>
<body>
    <h1>Spring Boot WebSocket Demo</h1>
    <button onclick="refreshList()">Refresh List</button>
</body>
</html>

注意：上述代码中的localhost:8080需要根据实际的应用配置进行修改。WebSocket连接的URL和路径需要与WebSocketHandler类中的配置保持一致。

这只是一个简单的示例，实际应用中可能需要根据具体的业务需求进行适当的修改。希望对你有所帮助！