springboot vue 实现websocket
时间: 2025-03-11 10:15:30 浏览: 14
如何在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]。
相关推荐


















