SpringBoot3 携手 WebSocket 和 Vue3，TypeScript 加持打造实时聊天应用

在当今快节奏的网络世界中，实时通信的重要性日益凸显。无论是企业内部的协同办公，还是社交娱乐平台的互动交流，都需要稳定、高效的实时通信解决方案。本文将深入探讨如何利用 SpringBoot3、WebSocket、Vue3 和 TypeScript 技术栈，构建一个简易但功能完善的在线聊天室，并附带完整的源码参考，助你快速掌握相关技术。

技术选型与架构设计

后端：SpringBoot3 + WebSocket

• SpringBoot3：作为 Java 生态中最流行的微服务框架，SpringBoot3 简化了 WebSocket 应用的开发流程，提供了开箱即用的支持。其依赖注入、自动配置等特性，极大地提高了开发效率。同时，SpringBoot3 良好的扩展性，也方便我们集成其他组件，例如消息队列（RabbitMQ、Kafka）等，构建更复杂的实时通信系统。
• WebSocket：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它实现了服务器与客户端之间的实时数据推送，无需像传统的 HTTP 轮询那样频繁发起请求，大大降低了服务器的压力。在本项目中，我们使用 Spring 的 WebSocket 支持，处理客户端的连接请求、消息发送和断开连接等事件。为了保证高并发，可能还需要考虑 Nginx 的反向代理和负载均衡，同时调整 Nginx 的 worker_processes 和 worker_connections 参数，以及操作系统的文件句柄限制。

前端：Vue3 + TypeScript

• Vue3：Vue3 拥有更快的渲染速度、更小的体积以及更好的 TypeScript 支持。其 Composition API 使得代码组织更加清晰，逻辑复用更加方便。在本聊天室应用中，Vue3 负责处理用户界面渲染、用户输入事件、以及 WebSocket 消息的接收和展示。
• TypeScript：TypeScript 是一种 JavaScript 的超集，它为 JavaScript 增加了静态类型检查，提高了代码的可维护性和可读性。通过 TypeScript，我们可以在编译时发现潜在的类型错误，减少运行时 Bug 的发生。同时，TypeScript 提供的代码提示和自动补全功能，也能显著提升开发效率。

代码实现

后端代码（SpringBoot3）

1. 添加 WebSocket 依赖

在 pom.xml 文件中添加 Spring WebSocket 的依赖：

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

2. 创建 WebSocket 配置类

创建一个配置类，用于注册 WebSocketHandler 和 HandshakeInterceptor：

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 ChatWebSocketHandler chatWebSocketHandler;

    public WebSocketConfig(ChatWebSocketHandler chatWebSocketHandler) {
        this.chatWebSocketHandler = chatWebSocketHandler;
    }

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatWebSocketHandler, "/chat").setAllowedOrigins("*"); // 允许跨域，生产环境不推荐
    }
}

3. 创建 WebSocketHandler

创建一个类，实现 WebSocketHandler 接口，处理客户端的连接、消息和断开连接事件：

import org.springframework.stereotype.Component;
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.List;
import java.util.concurrent.CopyOnWriteArrayList;

@Component
public class ChatWebSocketHandler extends TextWebSocketHandler {

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

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
        System.out.println("New session established: " + session.getId());
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        System.out.println("Message received: " + payload);
        // 广播消息到所有客户端
        for (WebSocketSession s : sessions) {
            if (s.isOpen() && !s.getId().equals(session.getId())) { // 不发给自己
                try {
                    s.sendMessage(new TextMessage(payload));
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, int statusCode, String reason) throws Exception {
        sessions.remove(session);
        System.out.println("Session closed: " + session.getId());
    }
}

前端代码（Vue3 + TypeScript）

1. 安装依赖

使用 npm 或 yarn 安装 Vue3 和 TypeScript 相关的依赖：

npm install vue@next typescript vue-tsc -D
npm install --save-dev @types/node

2. 创建 WebSocket 连接

在 Vue 组件中，使用 JavaScript 的 WebSocket API 创建与服务器的连接：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('');
    const messages = ref<string[]>([]);
    const socket = new WebSocket('ws://localhost:8080/chat'); // 替换为你的 WebSocket 地址

    onMounted(() => {
      socket.onopen = () => {
        console.log('WebSocket connected');
      };

      socket.onmessage = (event) => {
        messages.value.push(event.data);
      };

      socket.onclose = () => {
        console.log('WebSocket disconnected');
      };

      socket.onerror = (error) => {
        console.error('WebSocket error:', error);
      };
    });

    const sendMessage = () => {
      if (message.value) {
        socket.send(message.value);
        message.value = '';
      }
    };

    return {
      message,
      messages,
      sendMessage,
    };
  },
};

3. 显示消息

在 Vue 模板中，使用 v-for 指令循环显示接收到的消息：

<template>
  <div>
    <input type="text" v-model="message" @keyup.enter="sendMessage" />
    <button @click="sendMessage">Send</button>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

实战避坑经验总结

• 跨域问题：在开发阶段，可以使用 @CrossOrigin 注解或配置 Spring Security 允许跨域访问。但在生产环境中，务必谨慎处理跨域问题，避免安全风险。可以使用 Nginx 反向代理解决。
• WebSocket 连接关闭：WebSocket 连接可能会因为网络问题或服务器重启而关闭。前端需要监听 onclose 事件，并进行重连操作。可以使用指数退避算法来避免重连风暴。
• 消息格式：为了方便前后端处理，建议统一消息格式，例如使用 JSON 格式。可以使用 Gson 或 Jackson 等库进行 JSON 序列化和反序列化。
• 并发处理：在高并发场景下，需要考虑 WebSocketHandler 的线程安全问题。可以使用 CopyOnWriteArrayList 等线程安全的集合类来存储 WebSocketSession。
• 性能优化：对于大规模的聊天室应用，需要考虑性能优化。可以使用消息队列（例如 RabbitMQ 或 Kafka）来分发消息，减轻 WebSocket 服务器的压力。同时，可以考虑使用连接池来管理 WebSocket 连接，提高连接的复用率。此外，SpringBoot 的性能监控工具（例如 Prometheus 和 Grafana）也可以用来监控 WebSocket 服务器的性能指标，帮助我们发现潜在的性能瓶颈。

通过以上步骤，我们成功地使用 SpringBoot3、WebSocket、Vue3 和 TypeScript 构建了一个简单的在线聊天室。希望这个示例能帮助你更好地理解和应用这些技术，构建更强大的实时通信应用。