SpringBoot3+WebSocket构建实时聊天应用：Vue3+TS前端全攻略

在互联网应用中，实时通信功能越来越重要。本文将详细介绍如何使用 SpringBoot3、WebSocket、Vue3 和 TypeScript 构建一个简易的在线聊天室。我们将从后端 WebSocket 服务的搭建到前端 Vue3 应用的实现，一步步讲解，并提供完整的源码参考。这个方案可以部署在例如宝塔面板这类服务器控制面板上，方便管理 Nginx 反向代理和SSL证书。

WebSocket 协议详解

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。与传统的 HTTP 短连接相比，WebSocket 允许服务器主动向客户端推送数据，无需客户端发起请求，从而实现实时通信。它非常适合需要实时数据更新的应用，例如在线聊天、实时监控、股票行情等。在服务端，Netty、Tomcat 等容器都提供了对 WebSocket 的良好支持，可以方便地构建高并发的实时应用。使用 WebSocket 可以减少 HTTP 频繁握手的开销，降低服务器压力，提高系统整体的吞吐量和并发连接数。

WebSocket 核心概念

• 握手（Handshake）: 客户端和服务器之间建立 WebSocket 连接的初始过程。
• 帧（Frame）: WebSocket 通信的基本数据单元。
• 心跳（Heartbeat）: 为了保持连接活跃，客户端和服务器定期发送的探测消息。

SpringBoot3 后端 WebSocket 服务搭建

首先，我们需要创建一个 SpringBoot3 项目，并引入 WebSocket 依赖。

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

接下来，创建一个 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 {

    private final ChatWebSocketHandler chatWebSocketHandler;

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

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatWebSocketHandler, "/chat").setAllowedOrigins("*"); // 允许所有来源，生产环境需要配置
    }
}

创建一个 WebSocket Handler 处理消息：

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.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())) { // 排除发送者自身
                s.sendMessage(new TextMessage(payload));
            }
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, org.springframework.web.socket.CloseStatus status) throws Exception {
        sessions.remove(session);
        System.out.println("Session closed: " + session.getId());
    }
}

Vue3+TypeScript 前端实现

使用 Vue CLI 创建一个新的 Vue3 项目，并选择 TypeScript 作为开发语言。

npm install -g @vue/cli
vue create chat-app
# 选择 Vue 3 和 TypeScript

安装 WebSocket 客户端库：

npm install vue-socket.io

在 main.ts 中配置 WebSocket：

import { createApp } from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

const socket = SocketIO('http://localhost:8080'); // 替换为你的后端 WebSocket 地址

createApp(App)
  .use(new VueSocketIO({
    debug: true,
    connection: socket,
  }))
  .mount('#app')

创建聊天组件 ChatRoom.vue：

<template>
  <div class="chat-room">
    <div class="messages">
      <div v-for="(message, index) in messages" :key="index" class="message">
        {{ message }}
      </div>
    </div>
    <div class="input-area">
      <input type="text" v-model="newMessage" @keyup.enter="sendMessage">
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { useSockets } from 'vue-socket.io';

export default defineComponent({
  name: 'ChatRoom',
  setup() {
    const messages = ref<string[]>([])
    const newMessage = ref('')
    const { socket } = useSockets();

    onMounted(() => {
      socket.on('message', (data: string) => {
        messages.value.push(data)
      })
    })

    const sendMessage = () => {
      if (newMessage.value.trim() !== '') {
        socket.emit('message', newMessage.value)
        messages.value.push('我: ' + newMessage.value)
        newMessage.value = ''
      }
    }

    return {
      messages,
      newMessage,
      sendMessage,
    }
  },
})
</script>

<style scoped>
.chat-room {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 10px;
}

.messages {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #eee;
  padding: 5px;
}

.input-area {
  margin-top: 10px;
}

input[type="text"] {
  width: 70%;
  padding: 5px;
}

button {
  padding: 5px 10px;
}
</style>

实战避坑经验总结

• 跨域问题：在 SpringBoot 后端配置中，使用 setAllowedOrigins("*") 允许所有来源，但在生产环境中，需要配置具体的域名，避免安全风险。也可以考虑使用 Nginx 反向代理，统一入口。
• WebSocket 连接断开：需要处理 WebSocket 连接断开的情况，例如客户端网络不稳定、服务器重启等。可以在后端实现心跳机制，定期检测连接状态。前端也需要监听 close 事件，重新建立连接。
• 消息格式：前后端需要统一消息格式，例如使用 JSON 格式传递数据。可以使用 JSON 序列化和反序列化库，方便数据处理。
• 性能优化：对于高并发的聊天室应用，需要考虑性能优化。可以使用消息队列，异步处理消息。也可以使用集群部署，提高系统的可用性和扩展性。
• Nginx配置：如果使用Nginx作为反向代理，需要配置WebSocket的代理规则，例如设置 proxy_http_version 1.1; 和 proxy_set_header Upgrade $http_upgrade;。同时，可以利用 Nginx 的负载均衡功能，将请求分发到多个后端服务器，提高系统的并发能力。

通过以上步骤，我们就可以搭建一个简单的在线聊天室。实际应用中，还需要考虑更多因素，例如用户认证、权限管理、消息持久化等。但本文提供的框架可以作为一个良好的起点，帮助你快速构建实时通信应用。