发布于 由admin

Spring WebSocket支持：实现实时双向通信

Spring WebSocket讲座：实现实时双向通信

引言

大家好，欢迎来到今天的讲座！今天我们要聊聊Spring框架中的WebSocket技术。如果你曾经想过如何让网页和服务器之间进行实时的、双向的通信，那么你来对地方了！WebSocket就像是一条“高速公路”，它可以让浏览器和服务器之间的数据交换更加高效、快速，而且是全双工的（即双方可以同时发送和接收数据）。听起来是不是很酷？那就让我们一起深入了解一下吧！

什么是WebSocket？

在传统的HTTP通信中，客户端（通常是浏览器）发起请求，服务器响应请求，然后连接关闭。这种模式被称为“请求-响应”模型，适用于大多数Web应用。然而，对于需要实时更新的应用（如聊天应用、在线游戏、股票行情等），这种模型就显得不够灵活了。

WebSocket协议就是为了弥补这一不足而诞生的。它允许客户端和服务器之间建立一个持久的连接，并且可以在任何时候通过这个连接发送数据。换句话说，WebSocket提供了一种全双工通信的方式，使得客户端和服务器可以同时发送和接收消息，而不需要像HTTP那样每次都要重新建立连接。

WebSocket vs HTTP

特性 WebSocket HTTP
连接方式 持久连接，一次握手后保持通信 每次请求都需要重新建立连接
数据传输方向 全双工（双向通信） 单向（客户端请求，服务器响应）
传输效率 更高效，减少了不必要的握手和头部信息 每次请求都有较大的头部开销
适用场景 实时应用（如聊天、游戏、股票行情等） 静态内容、表单提交等

Spring WebSocket简介

Spring框架提供了对WebSocket的支持，使得开发者可以轻松地在Java应用程序中实现WebSocket功能。Spring WebSocket不仅支持标准的WebSocket协议，还提供了STOMP（Simple Text Oriented Messaging Protocol）协议的支持，方便我们在应用中实现更复杂的通信需求。

Spring WebSocket的核心组件

  1. @EnableWebSocket：用于启用WebSocket支持。
  2. WebSocketHandler：处理WebSocket连接的类。
  3. TextMessage 和 BinaryMessage：表示WebSocket消息的类。
  4. SimpMessagingTemplate：用于发送STOMP消息。
  5. @MessageMapping：类似于Spring MVC中的@RequestMapping，用于映射STOMP消息。

实现一个简单的WebSocket应用

接下来，我们通过一个简单的聊天应用来演示如何使用Spring WebSocket。这个应用将允许多个用户通过WebSocket连接到服务器，并实时发送和接收消息。

1. 添加依赖

首先，在pom.xml中添加Spring WebSocket的依赖：

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

2. 启用WebSocket支持

在主类或配置类上添加@EnableWebSocket注解，以启用WebSocket支持：

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;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 注册一个WebSocket处理器
        registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");
    }
}

3. 创建WebSocket处理器

接下来，创建一个WebSocketHandler来处理客户端的连接和消息。我们可以继承TextWebSocketHandler类，它是Spring提供的一个方便的实现类，专门用于处理文本消息。

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;

public class MyWebSocketHandler extends TextWebSocketHandler {

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 收到消息后，打印出来并广播给所有连接的客户端
        System.out.println("Received message: " + message.getPayload());

        // 广播消息给所有连接的客户端
        for (WebSocketSession client : clients) {
            if (client.isOpen()) {
                client.sendMessage(new TextMessage("Broadcast: " + message.getPayload()));
            }
        }
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 当有新客户端连接时，将其加入到客户端列表中
        clients.add(session);
        System.out.println("New client connected: " + session.getId());
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        // 当客户端断开连接时，将其从列表中移除
        clients.remove(session);
        System.out.println("Client disconnected: " + session.getId());
    }

    private List<WebSocketSession> clients = new CopyOnWriteArrayList<>();
}

4. 前端代码

为了让前端能够与WebSocket服务器通信，我们需要编写一些JavaScript代码。这里我们使用原生的WebSocket API来连接服务器并发送消息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
</head>
<body>
    <h1>WebSocket Chat</h1>
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
    <div id="messages"></div>

    <script>
        const socket = new WebSocket('ws://localhost:8080/ws');

        socket.onopen = function() {
            console.log('Connected to server');
        };

        socket.onmessage = function(event) {
            const messagesDiv = document.getElementById('messages');
            const messageElement = document.createElement('div');
            messageElement.textContent = event.data;
            messagesDiv.appendChild(messageElement);
        };

        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value;
            socket.send(message);
            input.value = '';
        }
    </script>
</body>
</html>

5. 运行应用

现在，你可以启动Spring Boot应用程序，并打开多个浏览器窗口来测试聊天功能。每个窗口都可以发送消息，所有连接的客户端都会实时收到这些消息。

使用STOMP协议

虽然上面的例子已经展示了如何使用WebSocket进行基本的通信，但在实际应用中，我们通常会使用更高级的消息协议，比如STOMP。STOMP是一种基于文本的简单消息协议，它为WebSocket提供了一层抽象，使得我们可以更容易地管理消息的订阅、发布和路由。

1. 启用STOMP支持

首先，我们需要在配置类中启用STOMP支持：

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 配置消息代理，设置广播和应用目的地前缀
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 注册STOMP端点，并允许跨域访问
        registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();
    }
}

2. 处理STOMP消息

接下来，我们使用@MessageMapping注解来处理STOMP消息。这个注解类似于Spring MVC中的@RequestMapping，但它专门用于处理STOMP消息。

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class ChatController {

    @MessageMapping("/chat")
    @SendTo("/topic/messages")
    public String handleMessage(String message) {
        // 收到消息后，广播给所有订阅了"/topic/messages"的客户端
        return "Broadcast: " + message;
    }
}

3. 修改前端代码

为了让前端能够使用STOMP协议，我们需要引入SockJS和stomp.js库。SockJS是一个兼容性更好的WebSocket客户端库，而stomp.js则是STOMP协议的实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>STOMP Chat</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/stomp.min.js"></script>
</head>
<body>
    <h1>STOMP Chat</h1>
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
    <div id="messages"></div>

    <script>
        const sock = new SockJS('/ws');
        const stompClient = Stomp.over(sock);

        stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/messages', function (message) {
                const messagesDiv = document.getElementById('messages');
                const messageElement = document.createElement('div');
                messageElement.textContent = message.body;
                messagesDiv.appendChild(messageElement);
            });
        });

        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value;
            stompClient.send("/app/chat", {}, message);
            input.value = '';
        }
    </script>
</body>
</html>

总结

通过今天的讲座，我们了解了Spring WebSocket的基本概念和实现方式。我们从最简单的WebSocket应用开始，逐步引入了STOMP协议，使我们的应用更加灵活和强大。WebSocket为我们提供了一种全新的通信方式，使得Web应用可以实现真正的实时交互。希望今天的分享对你有所帮助，如果有任何问题，欢迎随时提问！

谢谢大家，祝你们编码愉快！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注