websocket实时推送数据springboot
时间: 2025-01-11 09:40:23 浏览: 48
### 如何在 Spring Boot 中使用 WebSocket 实现实时数据推送
#### 配置 WebSocket 支持
为了使应用程序支持 WebSocket,在 `pom.xml` 文件中引入依赖项[^1]:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
接着,创建一个配置类来启用 WebSocket 功能并注册端点。
```java
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
}
```
此代码片段设置了 STOMP 协议用于客户端与服务器之间的通信,并指定了消息代理前缀 `/topic` 和应用目的地前缀 `/app`[^2]。
#### 创建控制器发送消息给前端页面
编写一个简单的 REST 控制器用来触发向所有订阅者广播更新的消息。
```java
@RestController
public class MessageController {
private final SimpMessagingTemplate messagingTemplate;
@Autowired
public MessageController(SimpMessagingTemplate messagingTemplate){
this.messagingTemplate = messagingTemplate;
}
@GetMapping("/send/{message}")
public String sendMessage(@PathVariable String message){
// 发送消息至/topic/greetings路径下所有的已订阅用户
messagingTemplate.convertAndSend("/topic/greetings", "Hello, " + message);
return "Sent";
}
}
```
上述方法接收来自 HTTP 请求中的参数作为问候语的一部分,并将其推送给所有监听该主题的客户机。
#### 前端 JavaScript 客户端连接到 WebSocket 并订阅频道
下面是一个 HTML 页面的例子,它展示了如何利用 SockJS 和 STOMP 来建立 WebSocket 连接并向特定的主题发起订阅请求。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>WebSocket Example</title>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<body>
<div id="greeting">Greeting:</div>
<button onclick="connect()">Connect</button>
<script type="text/javascript">
var stompClient = null;
function connect() {
var socket = new SockJS('/ws');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/greetings', function (greeting) {
showGreeting(JSON.parse(greeting.body).content);
});
});
}
function showGreeting(message) {
document.querySelector("#greeting").innerHTML += "<br/>" + message;
}
</script>
</body>
</html>
```
这段脚本实现了当点击按钮后尝试连接 WebSocket 服务端口;一旦成功,则立即订阅名为 '/topic/greetings' 的通道等待新消息的到来。每当收到新的通知时就会调用 `showGreeting()` 函数显示出来。
阅读全文
相关推荐


















