springboot vue 实现websocket

如何在Spring Boot和Vue项目中实现WebSocket通信
添加依赖项
为了使 Spring Boot 支持 WebSocket 功能，在 pom.xml 文件中需加入以下依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
登录后复制
这一步骤确保了应用程序能够处理 WebSocket 连接请求[^3]。
配置WebSocket支持
创建配置类以启用消息代理并定义端点映射规则。通过继承 AbstractSessionWebSocketMessageBrokerConfigurer 或者使用注解方式简化配置过程，允许前端连接到指定路径下的 WebSocket 服务。
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws").withSockJS();
}
}
登录后复制
此代码片段设置了 STOMP 协议作为传输层之上的一层抽象，并开放 /ws 路径供客户端建立 SockJS 型 WebSocket 连接[^1]。
创建控制器接收消息
编写一个简单的控制器用于监听来自特定目的地的消息事件，并向订阅该主题的所有会话广播响应信息。
@Controller
public class ChatController {

@MessageMapping("/hello")
@SendTo("/topic/greetings")
public Greeting greeting(HelloMessage message) throws Exception {
Thread.sleep(1000); // simulated delay
return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
}
}
登录后复制
上述例子中的 @MessageMapping 注解指定了要匹配的目的地模式；而 @SendTo 则决定了返回的数据应该发送给哪些已注册的主题订阅者。
Vue前端集成
安装必要的 npm 包如 sockjs-client 和 stompjs 来管理与后端之间的交互逻辑。
npm install --save sockjs-client stompjs
登录后复制
接着可以在组件内部初始化 Stomp 客户端实例并与服务器保持持续通讯状态。
import SockJS from 'sockjs-client';
import { Client } from '@stomp/stompjs';

const client = new Client({
brokerURL: 'http://localhost:8080/ws',
connectHeaders: {},
debug: (str) => console.log(str),
reconnectDelay: 5000,
heartbeatIncoming: 4000,
heartbeatOutgoing: 4000,
});

client.onConnect = () => {
console.log('Connected to WS');
};

client.activate();

export default {
name: 'ChatApp',
data() {
return {
messages: [],
text: ''
};
},
methods: {
sendMessage(event) {
const payload = JSON.stringify({name: this.text});
client.publish({destination: '/app/hello', body: payload});
event.target.reset();
},
subscribeMessages() {
client.subscribe('/topic/greetings', response => {
let msg = JSON.parse(response.body);
this.messages.push(msg.content);
});
}
},
mounted(){
this.subscribeMessages();
}
};
登录后复制
这段 JavaScript 代码实现了基本的聊天室功能，它能向后台推送新消息以及接收其他用户的发言更新[^2]。
握手流程说明
WebSocket 的握手机制遵循HTTP协议标准，由客户端发起带有特殊头部字段（例如Upgrade、Connection等）的GET 请求至目标 URL 。一旦服务器同意升级，则回复相应的确认报文完成整个协商过程[^4]。