零基础入门：基于WebSocket的一对一聊天室实现

从HTTP到WebSocket：构建一对一聊天室

HTTP与WebSocket：TCP之上的两种通信方式

在构建实时应用（如聊天室、在线游戏等）时，我们通常需要服务器（后端）能够主动向客户端（前端）推送数据，而不是只能由客户端（前端）发起请求。传统的HTTP协议是一种无状态的请求-响应

协议，难以满足这样的需求。为此，WebSocket协议应运而生。

在之前用HTTP写CRUD时，我们一直是客户端（前端）向服务端（后端）发送请求，然后服务端（后端）从数据库中获取数据并返回给客户端（前端）数据（一般为JSON格式）。

HTTP 是一种无状态的请求-响应协议：

客户端发送请求，服务器返回响应
每次通信都需要建立新的TCP连接（HTTP/1.1引入持久连接有所改善）
服务器无法主动向客户端推送数据

WebSocket 则是全双工通信协议：

建立连接后，双方可以随时主动发送数据
一次握手，持久连接
低延迟，适合实时应用

为什么需要建立WebSocket连接？

通过上文，我们了解到websocket与http的区别之一：就是websocket要先建立连接

虽然HTTP协议可以模拟实时通信（如轮询、长轮询等），但这些方式效率低下，且增加了服务器和网络的负担。WebSocket的出现解决了以下问题：

降低延迟：一旦连接建立，消息可以立即在客户端和服务器之间传递，无需每次都要携带HTTP头。
全双工通信：连接建立后，客户端和服务器可以同时发送数据。
减少带宽消耗：WebSocket帧头部比HTTP头部小得多。

如何建立WebSocket连接？（具体效果如下图）

WebSocket连接的建立需要借助HTTP协议进行升级。具体步骤如下：

1.客户端发起握手请求：

客户端发送一个HTTP请求，其中包含Upgrade: websocket和Connection: Upgrade头部，以及一个Sec-WebSocket-Key随机字符串，表示希望升级到WebSocket协议。

2.服务器响应握手：

服务器验证请求后，返回一个HTTP 101状态码（表示切换协议成功），并在响应头中包含Upgrade: websocket和Connection: Upgrade，以及一个由客户端发送的Sec-WebSocket-Key计算而来的Sec-WebSocket-Accept值。

值得注意的是：这个Sec-WebSocket-Accept的计算方式为：将客户端发送的Sec-WebSocket-Key与固定的GUID字符串258EAFA5-E914-47DA-95CA-C5AB0DC85B11拼接，然后计算SHA-1哈希，最后进行Base64编码。

3.连接升级成功：

一旦握手完成，接下来的通信就使用WebSocket协议的数据帧格式，而不再是HTTP协议。

WebSocket通信

建立连接后，客户端和服务器就可以通过WebSocket协议发送和接收消息。WebSocket消息由一系列帧组成，可以传输文本数据或二进制数据。

发送消息：将消息封装成WebSocket帧，通过TCP连接发送。
接收消息：从TCP连接中读取WebSocket帧，并解析出消息。

这里比较难理解，我们借用下面两个图来说明websocket工作的整个过程以及websocket帧的数据格式。

一对一聊天室的实现

在前面的章节中，我们深入探讨了WebSocket协议的工作原理、连接建立过程以及通信机制。现在，让我们将这些理论知识付诸实践，构建一个完整的一对一实时聊天室系统。

本文将基于Spring Boot后端和Vue3前端，使用STOMP over WebSocket协议，实现一个功能完善的双人聊天应用。我们将使用咨询师11和用户26这两个固定角色来演示完整的通信流程。

我们之前讨论的WebSocket是底层协议，而STOMP是一个更高级的消息协议，它建立在WebSocket之上，提供了更简单的消息格式和交互模式。

在Spring Boot中，我们通常使用STOMP over WebSocket来构建消息传递系统。（对于STOMP不做太多的赘述）下面是流程图。

后端实现详解

1.引入依赖

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

2. WebSocket配置类

查看代码

package com.example.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.ChannelRegistration;
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;

/**
 * WebSocket配置类 - 简化版（只支持实时对话）
 * 
 * 核心功能：
 * 1. 配置消息代理，支持广播和点对点消息
 * 2. 注册WebSocket端点，支持浏览器兼容
 * 3. 配置消息通道和拦截器
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    /**
     * 配置消息代理
     * 启用简单内存消息代理，处理以"/topic"和"/queue"为前缀的消息
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 启用简单消息代理，用于广播和点对点消息
        config.enableSimpleBroker("/topic", "/queue");
        // 设置应用程序目的地前缀，客户端发送消息需要以"/app"开头
        config.setApplicationDestinationPrefixes("/app");
    }

    /**
     * 注册STOMP端点
     * 提供两种连接方式：SockJS和原生WebSocket
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 添加SockJS端点，支持浏览器兼容性
        registry.addEndpoint("/ws")
                .setAllowedOriginPatterns("*")
                .withSockJS();

        // 添加原生WebSocket端点，方便测试
        registry.addEndpoint("/ws-native")
                .setAllowedOriginPatterns("*");
    }
    
    /**
     * 配置客户端入站通道
     * 增加线程池大小，提高并发处理能力
     */
    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        // 配置STOMP解码器以更宽松地处理消息格式
        // 增加消息缓冲区大小
        registration.taskExecutor().corePoolSize(4).maxPoolSize(8);
        
        // 自定义消息处理，处理可能的格式问题
        registration.interceptors(new StompMessageInterceptor());
    }
    
    /**
     * 自定义STOMP消息拦截器，用于增强消息处理和错误恢复
     */
    public class StompMessageInterceptor implements org.springframework.messaging.support.ChannelInterceptor {
        
        @Override
        public org.springframework.messaging.Message<?> preSend(org.springframework.messaging.Message<?> message, org.springframework.messaging.MessageChannel channel) {
            // 这里可以添加消息日志或格式检查
            return message;
        }
        
        @Override
        public void postSend(org.springframework.messaging.Message<?> message, org.springframework.messaging.MessageChannel channel, boolean sent) {
            // 消息发送后的处理
        }
        
        @Override
        public boolean preReceive(org.springframework.messaging.MessageChannel channel) {
            return true;
        }
        
        @Override
        public org.springframework.messaging.Message<?> postReceive(org.springframework.messaging.Message<?> message, org.springframework.messaging.MessageChannel channel) {
            return message;
        }
    }
}

3. WebSocket消息控制器