<think>嗯，用户想了解如何在Spring Boot和Vue3 TypeScript中使用
WebSocket和SockJS实现
连接并带有UI反馈。首先，我需要回忆这两个技术的整合步骤。
首先，Spring Boot方面，
WebSocket的支持通常需要添加依赖，比如spring-boot-starter-
websocket。然后，配置
WebSocket的相关组件，比如启用@Enable
WebSocketMessageBroker，配置消息代理。不过用户提到了SockJS，这意味着可能需要处理SockJS的兼容性，特别是当
WebSocket不可用时降级为轮询。需要创建一个
WebSocket配置类，继承Abstract
WebSocketMessageBrokerConfigurer或者使用新的接口，比如
WebSocketMessageBrokerConfigurer。同时，要注册Stomp端点，并启用SockJS。
然后是控制器部分，使用@MessageMapping处理客户端发送的消息，可能还需要@SendTo注解来指定回复的目的地。这部分需要确保消息能够正确路由。
接下来是Vue3方面，用户使用TypeScript，所以需要安装sockjs-client和@stomp/stompjs库。在Vue组件中，需要建立
连接，可能需要使用SockJS作为传输方式，然后通过STOMP协议订阅主题。需要处理
连接成功、接收消息、
断开连接等事件，并在UI上给出反馈，比如显示
连接状态、消息列表等。
需要注意的是，跨域问题，Spring Boot后端需要配置允许跨域，或者在
WebSocket配置中处理。另外，Vue前端在
连接时可能需要指定正确的端点，比如使用SockJS的URL，如http://localhost:8080/ws，并确保后端端点正确注册。
可能的错误点包括依赖版本不兼容，比如sockjs-client和stompjs的版本问题，或者Spring Boot的
WebSocket配置不正确导致
连接失败。此外，前端在订阅主题时路径是否正确，比如是否匹配后端@SendTo的路径。
测试时，可以先用简单的消息发送，比如客户端发送一个消息，服务端返回确认，前端显示出来。同时，处理
连接断开的情况，比如
网络问题，前端需要重新
连接或提示用户。
还需要考虑UI反馈，比如
连接状态的变化，使用响应式变量控制按钮的禁用状态，或者显示加载中的提示。错误处理方面，捕获
连接错误并提示用户。
最后，可能需要前后端的日志查看，比如Spring Boot控制台查看
WebSocket连接是否建立，浏览器的开发者工具查看
WebSocket请求和消息传输情况。</think>以下分步骤讲解Spring Boot
WebSocket与Vue3 TypeScript+SockJS的整合实现：
一、Spring Boot后端配置（基于STOMP协议）
1. 添加依赖
```gradle
implementation 'org.springframework.boot:spring-boot-starter-
websocket'
```
2.
WebSocket配置类
```java
@Configuration
@Enable
WebSocketMessageBroker
public class
WebSocketConfig implements
WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws") //
连接端点
.setAllowedOriginPatterns("*")
.withSockJS(); // 启用SockJS支持
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic"); // 消息代理前缀
registry.setApplicationDestinationPrefixes("/app"); // 应用请求前缀
}
}
```
3. 消息控制器
```java
@Controller
public class MessageController {
@MessageMapping("/hello")
@SendTo("/topic/greetings")
public String greeting(String message) {
return "ECHO: " + message + " @ " + new Date();
}
}
```
二、Vue3前端实现（TypeScript + Composition API）
1. 安装依赖
```bash
npm install sockjs-client @stomp/stompjs
```
2. 封装
WebSocket工具类
```typescript
// src/utils/
websocket.ts
import { Client } from '@stomp/stompjs';
import SockJS from 'sockjs-client';
let stompClient: Client | null = null;
export const connect = (url: string, onMessage: (msg: string) => void) => {
const socket = new SockJS(url);
stompClient = new Client({
webSocketFactory: () => socket,
onConnect: () => {
stompClient?.subscribe('/topic/greetings', (message) => {
onMessage(message.body);
});
},
onStompError: (frame) => {
console.error('STOMP协议错误:', frame.headers.message);
}
});
stompClient.activate();
};
export const disconnect = () => {
if (stompClient) {
stompClient.deactivate();
}
};
export const sendMessage = (content: string) => {
stompClient?.publish({
destination: '/app/hello',
body: content
});
};
```
3. Vue组件实现
```vue
<template>
<div>
<button
@click="toggleConnection"
:disabled="connecting"
>
{{ isConnected ? '
断开连接' : '建立
连接' }}
</button>
<input v-model="inputMessage" @keyup.enter="send"/>
<button @click="send">发送</button>
<div class="message-list">
<div v-for="(msg, index) in messages" :key="index">
{{ msg }}
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { connect, disconnect, sendMessage } from '../utils/
websocket';
const isConnected = ref(false);
const connecting = ref(false);
const inputMessage = ref('');
const messages = ref<string[]>([]);
const toggleConnection = () => {
if (!isConnected.value) {
connecting.value = true;
connect('http://localhost:8080/ws', (msg: string) => {
messages.value.push(msg);
});
isConnected.value = true;
connecting.value = false;
} else {
disconnect();
isConnected.value = false;
}
};
const send = () => {
if (inputMessage.value.trim()) {
sendMessage(inputMessage.value);
inputMessage.value = '';
}
};
</script>
```
三、关键问题处理
1. 跨域配置：确保Spring Boot配置允许跨域
```java
// 在
WebSocketConfig中添加
registry.addEndpoint("/ws")
.setAllowedOriginPatterns("*") // 生产环境需指定具体域名
.withSockJS();
```
2. 心跳检测配置（防止
自动断开）
```typescript
// 修改connect方法中的Client配置
stompClient = new Client({
// ...其他配置
heartbeatIncoming: 4000,
heartbeatOutgoing: 4000,
});
```
3. 断线重连机制
```typescript
// 在工具类中添加重试逻辑
let reconnectAttempts = 0;
const maxReconnectAttempts = 5;
const connect = (/* 参数 */) => {
// ...原有配置
stompClient.on
WebSocketClose = () => {
if (reconnectAttempts < maxReconnectAttempts) {
setTimeout(() => {
reconnectAttempts++;
connect(url, onMessage);
}, 3000);
}
};
};
```
四、运行验证流程
1. 启动Spring Boot应用
2. 运行Vue前端
3. 点击"建立
连接"按钮，观察浏览器开发者工具中的WS
连接
4. 输入消息测试双向通信
5.
断开网络测试重连机制
典型问题排查：
1.
连接失败：检查后端端口、端点路径是否匹配
2. 消息未接收：检查STOMP订阅路径与后端@SendTo路径是否一致
3. SockJS
报错：确保前端使用的协议与后端匹配（HTTP/HTTPS）
建议通过浏览器开发者工具的Network面板观察
WebSocket连接状态和消息传输情况。
扫一扫
8316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
