用代码实现springboot通过websocket从服务器向前端发送视频图片文档信息
时间: 2023-12-16 10:06:28 浏览: 29
这里给出一个基于Spring Boot和Spring WebSocket的例子,实现WebSocket从服务器向前端发送视频、图片、文档等信息:
```java
// 服务器端代码
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new MyHandler(), "/websocket").setAllowedOrigins("*");
}
private static class MyHandler extends TextWebSocketHandler {
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
System.out.println("Client connected");
// 发送视频信息
Path videoPath = Paths.get("video.mp4");
byte[] videoBytes = Files.readAllBytes(videoPath);
BinaryMessage videoMessage = new BinaryMessage(videoBytes);
session.sendMessage(videoMessage);
// 发送图片信息
Path imagePath = Paths.get("image.jpg");
byte[] imageBytes = Files.readAllBytes(imagePath);
String imageData = Base64.getEncoder().encodeToString(imageBytes);
TextMessage imageMessage = new TextMessage("{\"type\": \"image\", \"data\": \"" + imageData + "\"}");
session.sendMessage(imageMessage);
// 发送文档信息
Map<String, String> documentData = new HashMap<>();
documentData.put("title", "Sample Document");
documentData.put("content", "This is a sample document.");
TextMessage documentMessage = new TextMessage("{\"type\": \"document\", \"data\": " + new ObjectMapper().writeValueAsString(documentData) + "}");
session.sendMessage(documentMessage);
}
}
}
// 前端代码
const socket = new WebSocket('ws://localhost:8080/websocket');
socket.onopen = () => {
console.log('WebSocket connected');
};
socket.onmessage = (event) => {
const message = JSON.parse(event.data);
if (message.type === 'image') {
const img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + message.data;
document.body.appendChild(img);
} else if (message.type === 'document') {
const title = document.createElement('h1');
title.innerText = message.data.title;
const content = document.createElement('p');
content.innerText = message.data.content;
document.body.appendChild(title);
document.body.appendChild(content);
}
};
const video = document.createElement('video');
video.controls = true;
document.body.appendChild(video);
socket.binaryType = 'arraybuffer';
socket.onmessage = (event) => {
const buffer = event.data;
const videoBlob = new Blob([buffer]);
const videoUrl = URL.createObjectURL(videoBlob);
video.src = videoUrl;
};
```
这个例子中,使用Spring Boot和Spring WebSocket创建WebSocket服务,并在客户端连接上来时,分别发送视频、图片、文档信息给客户端。客户端使用WebSocket API创建WebSocket连接,并在接收到服务器发送的消息时,根据消息类型分别处理视频、图片、文档信息。