前端用uniapp打包的h5,后端用java,用sse方式给指定ID发送实时信息,写出详细的代码
时间: 2024-11-29 12:32:27 浏览: 0
在使用uniapp打包H5页面后,前端通过服务器发送事件源(Server-Sent Events, SSE)与Java后端进行实时数据通信。下面是一个简单的前端(JavaScript)和后端(Java)实现的步骤:
**前端(HTML + JavaScript)部分:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Realtime Communication</title>
</head>
<body>
<div id="realtimeData"></div>
<script>
// 创建一个事件监听器来处理来自服务器的数据
const source = new EventSource('/stream?id=your_unique_id');
source.addEventListener('message', (event) => {
// 解析接收到的消息
const data = JSON.parse(event.data);
document.getElementById('realtimeData').innerHTML += `Received: ${data.message}\n`;
});
// 错误处理
source.addEventListener('error', () => {
console.error('Error occurred while connecting to server');
});
</script>
</body>
</html>
```
在这个例子中,`EventSource`会周期性地从`/stream?id=your_unique_id`这个URL获取实时更新。当服务器有新的消息时,它会触发`message`事件。
**后端(Java - SpringBoot 示例):**
首先,你需要引入Spring的WebSockets支持(如果你还没有的话):
```java
import org.springframework.web.socket.messaging.SessionMessage;
import org.springframework.web.socket.messaging.StompSession;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketService;
import org.springframework.web.socket.server.standard.ServletServerContainerFactoryBean;
// ...
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
}
@Bean
public ServletServerContainerFactoryBean createWebSocketContainer() {
// ...配置WebSocket容器...
return new ServletServerContainerFactoryBean();
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/stream")
.withSockJS()
.setAllowedOrigins("*") // 允许跨域请求
.addInterceptors(new YourInterceptor()); // 添加自定义拦截器
}
}
// 自定义WebSocket处理器
@Component
public class RealtimeEventHandler implements WebSocketHandler {
private final Map<String, StompSession> sessions = new ConcurrentHashMap<>();
@Override
public void handleTextMessage(StompSession session, TextMessage message) {
String id = session.getId(); // 获取session ID
// 这里假设你有一个推送服务,将新数据转换成JSON并发送给特定用户
String newData = ...; // 例如从数据库查询
sendMessageTo(session, "message", newData); // 发送消息
}
private void sendMessageTo(StompSession session, String event, String payload) {
try {
session.sendMessage(new SessionMessage<>(event, payload));
} catch (IOException e) {
log.error("Failed to send message", e);
}
}
}
```
这里我们创建了一个`RealtimeEventHandler`类作为WebSocket处理器,负责接收客户端的连接,并处理消息发送。`handleTextMessage`方法会在服务器向指定ID的客户端发送实时数据时被调用。
阅读全文