SpringBoot集成WebSocket实现后台向前端推送信息的示例

下面我来详细讲解一下“SpringBoot集成WebSocket实现后台向前端推送信息”的完整攻略。

简介

WebSocket是一种在Web浏览器和服务器之间进行双向通信的技术，它可以让Web页面实时获取到服务器端推送的信息，因此它被广泛应用于实时推送、在线聊天、在线游戏等场景。SpringBoot框架对WebSocket进行了良好的支持，可以非常方便地实现后台向前端推送信息的功能。

实现步骤

下面我们来详细介绍一下SpringBoot集成WebSocket实现后台向前端推送信息的步骤。

1. 添加WebSocket依赖

在pom.xml文件中添加如下依赖：

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

2. 定义WebSocket配置类

新建一个类，命名为WebSocketConfig，并添加@Configuration和@EnableWebSocket注解。

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/myHandler").setAllowedOrigins("*");
    }

    @Bean
    public MyHandler myHandler() {
        return new MyHandler();
    }

}

上述代码中，我们通过WebSocketConfigurer接口的registerWebSocketHandlers方法注册了一个WebSocket处理器，这个处理器的名称为"/myHandler"，对应MyHandler类。其中，setAllowedOrigins("*")表示允许跨域访问。

3. 定义WebSocket处理器

新建一个类，命名为MyHandler，继承自TextWebSocketHandler，并实现以下方法：

public class MyHandler extends TextWebSocketHandler {

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

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

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

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        for (WebSocketSession s : sessions) {
            s.sendMessage(message);
        }
    }

}

上述代码中，我们首先定义了一个sessions列表，用于保存所有已连接的WebSocketSession实例。在afterConnectionEstablished方法中，我们将新的WebSocketSession实例添加到sessions列表中；在afterConnectionClosed方法中，我们将已关闭的WebSocketSession实例从sessions列表中删除；在handleTextMessage方法中，我们遍历sessions列表，将收到的消息通过sendMessage方法发送给所有的WebSocketSession实例。

4. 前端页面接收消息

在前端页面中，可以通过WebSocket连接到MyHandler处理器，从而接收到后台推送的消息。示例代码如下：

<script>
    var socket = new WebSocket("ws://localhost:8080/myHandler");
    socket.onmessage = function(event) {
        console.log(event.data);
    };
</script>

上述代码中，我们通过WebSocket对象的onmessage事件监听后台传来的消息，并将消息写入到控制台中。这样，当后台向前端推送消息时，就会在控制台中输出消息内容。

示例说明

示例一

假设我们现在有一个在线聊天室的需求，聊天室中可以实时接收到其他用户发送的消息。我们可以通过WebSocket和SpringBoot实现这个功能。

具体实现步骤如下：

添加WebSocket依赖：

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

定义WebSocket配置类：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatHandler(), "/chat").setAllowedOrigins("*");
    }

    @Bean
    public ChatHandler chatHandler() {
        return new ChatHandler();
    }
}

定义WebSocket处理器：

public class ChatHandler extends TextWebSocketHandler {
    private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();

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

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

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        for (WebSocketSession s : sessions) {
            s.sendMessage(message);
        }
    }
}

前端页面接收消息：

<script>
    var socket = new WebSocket("ws://localhost:8080/chat");
    socket.onmessage = function(event) {
        var data = JSON.parse(event.data);
        var message = "[" + data.from + "]: " + data.message;
        var li = document.createElement("li");
        li.innerHTML = message;
        document.getElementById("messages").appendChild(li);
    };

    function send() {
        var message = document.getElementById("message").value;
        var from = document.getElementById("from").value;
        socket.send(JSON.stringify({
            from: from,
            message: message
        }));
        document.getElementById("message").value = "";
    }
</script>

上述代码中，我们定义了一个聊天室的界面，包括输入框、发送按钮和消息列表。当用户输入消息后，点击发送按钮，就会将消息发送给后台的WebSocket处理器MyHandler。而当MyHandler接收到消息后，会将消息发送给所有的WebSocketSession实例，从而广播给所有在线用户。在线用户的页面会实时收到后台传来的消息。

示例二

假设我们现在想要向所有在线用户实时推送某个股票的实时价格。我们可以通过WebSocket和SpringBoot实现这个功能。

具体实现步骤如下：

添加WebSocket依赖：

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

定义WebSocket配置类：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(stockHandler(), "/stock").setAllowedOrigins("*");
    }

    @Bean
    public StockHandler stockHandler() {
        return new StockHandler();
    }
}

定义WebSocket处理器：

public class StockHandler extends TextWebSocketHandler {
    private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();

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

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

    private void sendPrice(WebSocketSession session) throws IOException {
        Random random = new Random();
        double price = random.nextDouble() * 100;
        session.sendMessage(new TextMessage(Double.toString(price)));
    }

    @Scheduled(fixedDelay = 1000)
    public void sendPriceToAll() throws IOException {
        for (WebSocketSession session : sessions) {
            sendPrice(session);
        }
    }
}

上述代码中，我们在WebSocket处理器中定义一个sendPrice方法，用于向特定的WebSocketSession实例发送一个随机的股价信息。在afterConnectionEstablished方法中，我们添加新连接的WebSocketSession实例，并且发送一个初始股价信息。在sendPriceToAll方法中，我们将当前的股价信息广播给所有在线的WebSocketSession实例，从而实现实时股价更新的功能。

前端页面接收消息：

<script>
    var socket = new WebSocket("ws://localhost:8080/stock");
    socket.onmessage = function(event) {
        document.getElementById("price").innerHTML = event.data;
    };
</script>

上述代码中，我们定义了一个页面，用于显示股价信息。当我们连接到StockHandler处理器所在的地址时，就能接收到后台传来的股价信息，并将其实时地显示在页面上。

总结

通过以上示例，我们可以看出SpringBoot集成WebSocket实现后台向前端推送信息非常简单，只需要几行代码就能实现实时推送。通过WebSocket，我们可以轻松地实现实时推送、在线聊天、在线游戏等场景，为我们的Web应用添加更加完善的实时交互功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SpringBoot集成WebSocket实现后台向前端推送信息的示例 - Python技术站