SpringMVC WebSocket 实现与实时通信应用 - 智猿学院-IT界的百科全书

好的，没问题！咱们这就来聊聊 Spring MVC WebSocket，顺便一起搞点儿实时通信的小应用。准备好咖啡，系好安全带，咱们要起飞喽！

Spring MVC WebSocket：让你的服务器和浏览器“眉来眼去”

各位看官，想象一下，你正在用浏览器浏览一个网页，突然，网页上的数据“嗖”的一下自己更新了，不用你手动刷新，是不是感觉很神奇？这就是实时通信的魅力。而 WebSocket，就是实现这种“心有灵犀一点通”的关键技术。

传统的 HTTP 协议，就像你给朋友写信，写完寄出去，然后傻等着回信。服务器收到请求才回复，没请求就装死，效率忒低。WebSocket 就不一样了，它建立的是一个“长连接”，就像你和朋友开了个视频通话，可以随时互通消息，不用每次都重新拨号。

Spring MVC 呢，就是 Java Web 开发界的一位老大哥，它简化了 Web 应用的开发，让我们可以更专注于业务逻辑，而不是各种繁琐的配置。Spring MVC 结合 WebSocket，简直就是珠联璧合，可以轻松构建出各种实时通信应用。

WebSocket 的基本原理：握手、数据传输、关闭

WebSocket 的工作流程其实很简单，主要分为三个阶段：

握手 (Handshake): 客户端（比如浏览器）发起一个 HTTP 请求，告诉服务器：“嘿，老兄，我想和你建立一个 WebSocket 连接！” 这个请求里包含了一些特殊的头部信息，表明客户端想升级到 WebSocket 协议。服务器如果同意，就返回一个特殊的 HTTP 响应，表示握手成功。
数据传输 (Data Transfer): 握手成功后，客户端和服务器之间就建立了一个双向的、持久的连接。双方可以随时互相发送数据，而且不用像 HTTP 那样每次都重新建立连接。
关闭 (Closing): 当客户端或服务器想关闭连接时，会发送一个关闭帧 (Close Frame)。收到关闭帧的一方会回复一个确认帧，然后连接就断开了。

Spring WebSocket 的配置：让 Spring 认识 WebSocket

要让 Spring MVC 支持 WebSocket，我们需要做一些配置，让 Spring 知道如何处理 WebSocket 请求。

添加依赖: 首先，在你的 pom.xml 文件中添加 WebSocket 的依赖。
```
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
如果你用的是老版本的 Spring，可能需要手动添加 spring-websocket 和 spring-messaging 依赖。

配置 WebSocketHandler: 创建一个类，实现 WebSocketHandler 接口。这个接口定义了处理 WebSocket 事件的方法，比如连接建立、收到消息、连接关闭等等。

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

@Component
public class MyWebSocketHandler extends TextWebSocketHandler {

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        System.out.println("服务器收到消息: " + payload);

        // 回复消息给客户端
        session.sendMessage(new TextMessage("服务器说: " + payload));
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("连接建立: " + session.getId());
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, org.springframework.web.socket.CloseStatus status) throws Exception {
        System.out.println("连接关闭: " + session.getId() + ", 关闭状态: " + status);
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        System.out.println("传输错误: " + session.getId() + ", 错误信息: " + exception.getMessage());
    }
}

这个例子中，我们创建了一个 MyWebSocketHandler，它继承了 TextWebSocketHandler，专门处理文本消息。handleTextMessage 方法处理收到的消息，afterConnectionEstablished 方法在连接建立后被调用，afterConnectionClosed 方法在连接关闭后被调用，handleTransportError 方法处理传输过程中发生的错误。

配置 WebSocketConfigurer: 创建一个配置类，实现 WebSocketConfigurer 接口。这个接口用于注册 WebSocketHandler 和拦截器。

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 {

    private final MyWebSocketHandler myWebSocketHandler;

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

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

@EnableWebSocket 注解开启 WebSocket 支持。registerWebSocketHandlers 方法注册了 MyWebSocketHandler，并指定了 WebSocket 的访问路径为 /ws。setAllowedOrigins("*") 允许所有域名访问，生产环境请设置具体的域名，以保证安全。

编写客户端代码 (HTML + JavaScript): 在 HTML 页面中，使用 JavaScript 创建 WebSocket 连接，并发送和接收消息。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Example</title>
</head>
<body>
    <h1>WebSocket Example</h1>
    <input type="text" id="messageInput" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>
    <div id="messages"></div>

    <script>
        var websocket = new WebSocket("ws://localhost:8080/ws"); // 替换为你的 WebSocket 地址

        websocket.onopen = function(event) {
            console.log("WebSocket 连接已建立");
        };

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

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

        websocket.onerror = function(event) {
            console.error("WebSocket 发生错误");
        };

        function sendMessage() {
            var messageInput = document.getElementById("messageInput");
            var message = messageInput.value;
            websocket.send(message);
            messageInput.value = "";
            var messagesDiv = document.getElementById("messages");
            messagesDiv.innerHTML += "<p>发送: " + message + "</p>";
        }
    </script>
</body>
</html>

这段代码创建了一个 WebSocket 对象，连接到 ws://localhost:8080/ws。onopen、onmessage、onclose 和 onerror 函数分别处理连接建立、收到消息、连接关闭和发生错误事件。sendMessage 函数用于发送消息。

运行: 启动你的 Spring Boot 应用，然后在浏览器中打开 HTML 页面。你就可以在输入框中输入消息，点击“发送”按钮，看看服务器和浏览器是如何“眉来眼去”的了。

更高级的用法：使用 @MessageMapping 和 SimpMessagingTemplate

上面的例子用的是比较底层的 WebSocketHandler，需要手动处理消息的发送和接收。Spring 还提供了一种更高级的方式，使用 @MessageMapping 注解和 SimpMessagingTemplate 来简化 WebSocket 的开发。

添加依赖 (如果还没添加): 确保你的 pom.xml 文件中包含了 spring-boot-starter-websocket 依赖。

配置 WebSocketMessageBrokerConfigurer: 创建一个配置类，实现 WebSocketMessageBrokerConfigurer 接口。这个接口用于配置消息代理和端点。

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 WebSocketBrokerConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");  // 启用简单的消息代理，目的地以 /topic 开头
        config.setApplicationDestinationPrefixes("/app"); // 应用程序目的地以 /app 开头
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/gs-guide-websocket").setAllowedOrigins("*").withSockJS(); // 注册 STOMP 端点，并启用 SockJS
    }
}

@EnableWebSocketMessageBroker 注解开启基于 STOMP 的 WebSocket 支持。configureMessageBroker 方法配置消息代理，enableSimpleBroker("/topic") 启用一个简单的消息代理，所有发往 /topic 开头的消息都会被广播给所有订阅者。setApplicationDestinationPrefixes("/app") 设置应用程序目的地的统一前缀，所有发往 /app 开头的消息都会被路由到带有 @MessageMapping 注解的方法上。registerStompEndpoints 方法注册 STOMP 端点，/gs-guide-websocket 是客户端连接的地址。withSockJS() 启用 SockJS，用于兼容不支持 WebSocket 的浏览器。

创建 Controller 处理消息: 创建一个 Controller，使用 @MessageMapping 注解处理消息，并使用 SimpMessagingTemplate 发送消息。

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

@Controller
public class GreetingController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(1000); // 模拟延迟
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }

}

class HelloMessage {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

class Greeting {
    private String content;

    public Greeting(String content) {
        this.content = content;
    }

    public String getContent() {
        return content;
    }
}

@MessageMapping("/hello") 注解表示，所有发往 /app/hello 的消息都会被路由到 greeting 方法。@SendTo("/topic/greetings") 注解表示，greeting 方法的返回值会被发送到 /topic/greetings 目的地。HtmlUtils.htmlEscape 方法用于防止 XSS 攻击。

编写客户端代码 (HTML + JavaScript + STOMP): 在 HTML 页面中，使用 JavaScript 和 STOMP 客户端连接 WebSocket，并发送和接收消息。

<!DOCTYPE html>
<html>
<head>
    <title>STOMP WebSocket Example</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@7/bundles/stomp.umd.min.js"></script>
    <style>
        #messages {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>STOMP WebSocket Example</h1>
    <div>
        <label>请输入你的名字: </label>
        <input type="text" id="name" />
        <button onclick="connect()">连接</button>
    </div>
    <div id="messages"></div>

    <script>
        var stompClient = null;

        function connect() {
            var socket = new SockJS('/gs-guide-websocket');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/greetings', function (greeting) {
                    showMessage(JSON.parse(greeting.body).content);
                });
                sendName(); // 连接后自动发送消息
            });
        }

        function sendName() {
            var name = document.getElementById('name').value;
            stompClient.send("/app/hello", {}, JSON.stringify({'name': name}));
        }

        function showMessage(message) {
            var messagesDiv = document.getElementById('messages');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            messagesDiv.appendChild(p);
        }
    </script>
</body>
</html>

这段代码使用 SockJS 创建 WebSocket 连接，然后使用 STOMP 客户端 stompClient 连接到服务器。stompClient.connect 方法连接到服务器，并订阅 /topic/greetings 目的地。stompClient.send 方法发送消息到 /app/hello 目的地。showMessage 方法用于显示收到的消息。

运行: 启动你的 Spring Boot 应用，然后在浏览器中打开 HTML 页面。输入你的名字，点击“连接”按钮，你就可以看到服务器发送的问候语了。

实时通信应用：一些有趣的例子

有了 Spring MVC WebSocket，我们可以构建各种各样的实时通信应用。这里列举几个例子：

在线聊天室: 多个用户可以同时在一个聊天室里发送和接收消息。
实时股票行情: 股票价格可以实时更新，不用手动刷新页面。
在线游戏: 玩家可以实时互动，比如玩在线象棋、围棋等等。
协同编辑: 多个用户可以同时编辑同一个文档，实时看到彼此的修改。
实时监控: 监控系统可以实时显示服务器的运行状态、CPU 使用率、内存使用率等等。

一些注意事项

安全性: WebSocket 连接也需要考虑安全性问题。可以使用 TLS/SSL 加密连接，防止数据被窃听。同时，要对用户输入进行验证，防止 XSS 攻击。
性能: WebSocket 连接是长连接，会占用服务器资源。需要合理设计消息格式，避免发送过大的消息。可以使用连接池来管理 WebSocket 连接，提高性能。
可伸缩性: 如果你的应用需要支持大量的 WebSocket 连接，可以考虑使用分布式架构，将 WebSocket 服务器部署在多个节点上，并使用负载均衡器将客户端请求分发到不同的节点。
心跳机制: 为了检测 WebSocket 连接是否存活，可以使用心跳机制。客户端和服务器定期互相发送心跳消息，如果一段时间内没有收到心跳消息，就认为连接已经断开。

总结

Spring MVC WebSocket 提供了一种简单而强大的方式来构建实时通信应用。通过配置 WebSocketHandler 或使用 @MessageMapping 和 SimpMessagingTemplate，我们可以轻松地实现各种实时功能。当然，在实际应用中，还需要考虑安全性、性能和可伸缩性等问题。希望这篇文章能够帮助你入门 Spring MVC WebSocket，并构建出更多有趣的实时通信应用！

这篇文章的内容比较全面，从 WebSocket 的基本原理到 Spring MVC 的配置，再到实际应用，都做了详细的介绍。示例代码也比较完整，可以直接运行。希望对你有所帮助！

发表回复 取消回复

发表回复取消回复