Spring 核心技术解析【纯干货版】- XVIII：Spring 网络模块 Spring-WebSocket 模块精讲

在现代 Web 开发中，实时通信已成为提升用户体验的关键技术之一。传统的 HTTP 轮询方式存在较高的延迟和带宽开销，而 WebSocket 作为一种全双工通信协议，能够在客户端和服务器之间建立持久连接，实现高效的双向数据传输。

Spring 框架在 WebSocket 方面提供了完善的支持，并通过 Spring-WebSocket 模块简化了 WebSocket 服务器的开发，使得开发者可以快速构建基于 WebSocket 的实时应用。

本文将深入解析 Spring-WebSocket 模块，并提供一个完整的 WebSocket 聊天服务器示例，帮助开发者快速掌握 Spring WebSocket 的核心技术。

文章目录

- - 1、Spring-WebSocket 模块介绍
  - - 1.1、Spring-WebSocket 模块概述
    - 1.2、Spring-WebSocket 模块依赖
    - 1.3、Spring-WebSocket 模块作用
  - 2、Spring WebSocket 案例：一个简单的 WebSocket 聊天服务器
  - - 2.1、添加 Maven 依赖
    - 2.2、创建 WebSocket 处理器
    - 2.3、配置 WebSocket 服务器
    - 2.4、创建 Web 应用初始化类
    - 2.5、创建 WebSocket 客户端（HTML+JavaScript）
    - 2.6、运行 WebSocket 服务器
    - 2.7、运行效果
  - X、后记

1、Spring-WebSocket 模块介绍

1.1、Spring-WebSocket 模块概述

Spring WebSocket 模块，是 Spring 框架中用于支持 WebSocket 协议的部分，WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，使得客户端和服务器可以进行实时交互，常用于即时通讯、在线游戏、股票报价等场景。

1.2、Spring-WebSocket 模块依赖

Spring-Web 模块的依赖有两个，分别是 Spring-Context 模块和 Spring-Core 模块和 Spring-Web 模块。

其中 Spring Beans 模块是对 Spring Bean 进行定义，实现 IOC 基础功能的模块。而 Spring-Core 是 Spring 中的基础模块，它提供了框架运行所必需的核心功能。

1.3、Spring-WebSocket 模块作用

Spring-WebSocket 模块作用：

负责提供 WebSocket 协议的支持，实现双向、实时的消息通信。
适用于需要低延迟通信的应用，如在线聊天、股票行情推送、协作编辑等。
允许基于 WebSocket 进行长连接通信，相比传统 HTTP 轮询方式更高效。
可结合 STOMP 协议，实现基于消息队列的 WebSocket 交互，增强可扩展性。

2、Spring WebSocket 案例：一个简单的 WebSocket 聊天服务器

下面是一个基于 Spring-WebSocke t的 WebSocket 服务器示例。我们将手动配置 WebSocket，并使用 Spring WebSocket + Tomcat（或其他 Servlet 容器）实现一个简单的 WebSocket 聊天服务器。

功能：搭建 WebSocket 服务器，支持多个客户端连接。客户端可以向服务器发送消息，服务器会广播该消息给所有连接的客户端。

2.1、添加 Maven 依赖

<dependencies>
    <!-- Spring WebSocket -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-websocket</artifactId>
        <version>6.1.3</version>
    </dependency>

    <!-- Spring Web -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-web</artifactId>
        <version>6.1.3</version>
    </dependency>

    <!-- Java WebSocket API -->
    <dependency>
        <groupId>javax.websocket</groupId>
        <artifactId>javax.websocket-api</artifactId>
        <version>1.1</version>
    </dependency>

    <!-- Tomcat WebSocket 实现 -->
    <dependency>
        <groupId>org.apache.tomcat</groupId>
        <artifactId>tomcat-websocket</artifactId>
        <version>10.1.17</version>
    </dependency>
</dependencies>

2.2、创建 WebSocket 处理器

我们需要实现 TextWebSocketHandler 来处理 WebSocket 消息。

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

import java.io.IOException;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;

public class ChatWebSocketHandler extends TextWebSocketHandler {
    private static final Set<WebSocketSession> sessions = Collections.synchronizedSet(new HashSet<>());

    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        sessions.add(session);
        System.out.println("新用户连接: " + session.getId());
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
        System.out.println("收到消息: " + message.getPayload());
        
        // 广播消息给所有连接的客户端
        for (WebSocketSession webSocketSession : sessions) {
            if (webSocketSession.isOpen()) {
                webSocketSession.sendMessage(new TextMessage("用户 " + session.getId() + " 说: " + message.getPayload()));
            }
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, org.springframework.web.socket.CloseStatus status) {
        sessions.remove(session);
        System.out.println("用户断开: " + session.getId());
    }
}

2.3、配置 WebSocket 服务器

创建 WebSocket 配置类，注册 WebSocket 处理器。

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

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

2.4、创建 Web 应用初始化类

由于不使用 Spring Boot，我们需要手动初始化 DispatcherServlet 和 WebSocket 配置。

import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRegistration;

public class WebAppInitializer implements WebApplicationInitializer {
    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {
        // 创建 Spring 上下文
        AnnotationConfigWebApplicationContext context = new AnnotationConfigWebApplicationContext();
        context.register(WebSocketConfig.class);

        // 创建 DispatcherServlet
        ServletRegistration.Dynamic dispatcher = servletContext.addServlet("dispatcher", new DispatcherServlet(context));
        dispatcher.setLoadOnStartup(1);
        dispatcher.addMapping("/");
    }
}

2.5、创建 WebSocket 客户端（HTML+JavaScript）

客户端使用 HTML+JavaScript 连接 WebSocket 服务器，并发送/接收消息。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 聊天</title>
</head>
<body>
    <h2>WebSocket 聊天</h2>
    <input type="text" id="message" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>
    <ul id="messages"></ul>

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

        socket.onopen = () => console.log("已连接 WebSocket 服务器");
        socket.onmessage = (event) => {
            const li = document.createElement("li");
            li.textContent = event.data;
            document.getElementById("messages").appendChild(li);
        };

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