前后端实时数据通信
实现前后端实时数据转换通常涉及到以下几个步骤：
-
后端提供数据转换接口。
-
前端实时数据获取。
-
前端实时数据转换。
-
前端实时展示转换后数据。
以下是一个简单的例子，假设后端提供了一个接口来转换某种数据格式，前端使用JavaScript和WebSocket实现实时数据转换。
后端接口（Python示例使用Flask）:
from flask import Flask, request, jsonifyapp = Flask(__name__)@app.route('/convert_data', methods=['POST'])
def convert_data():# 获取数据并转换data = request.json['data']# 假设这里有数据转换逻辑converted_data = perform_data_conversion(data)return jsonify({'converted_data': converted_data})def perform_data_conversion(data):# 转换逻辑return data # 假设是转换数据，实际应用中会有更复杂的逻辑if __name__ == '__main__':app.run(debug=True)前端实现（JavaScript使用WebSocket）:
// 假设WebSocket服务地址为 'ws://localhost:5000/convert_data'const socket = new WebSocket('ws://localhost:5000/convert_data');// 收到服务器发送的消息时触发socket.onmessage = function(event) {const response = JSON.parse(event.data);// 处理转换后的数据console.log(response.converted_data);};// 发送需要转换的数据socket.onopen = function() {socket.send(JSON.stringify({ data: "Some data to convert" }));};简单前端使用WebSocket与后端建立实时通信，发送需要转换的数据，并接收转换后的数据。实际应用中，你可能需要处理连接断开和重连的逻辑，以及错误处理等。
1具体实现添加依赖到你的pom.xml
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2配置WebSocket：
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/ws").withSockJS();}@Overridepublic void configureMessageBroker(MessageBrokerRegistry registry) {registry.enableSimpleBroker("/topic");registry.setApplicationDestinationPrefixes("/app");}
}3创建WebSocket控制器：
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;@Controller
public class WebSocketController {@MessageMapping("/convertData")@SendTo("/topic/convertedData")public String convertData(String data) {// 这里实现数据转换逻辑String convertedData = convertDataLogic(data);return convertedData;}private String convertDataLogic(String data) {// 转换逻辑return "Converted " + data;}
}4前端使用WebSocket：
const socket = new WebSocket('ws://' + window.location.host + '/ws');
socket.onopen = function(event) {console.log('WebSocket connected');
};socket.onmessage = function(event) {console.log('Received message: ' + event.data);
};function sendData() {const data = document.getElementById('data-to-send').value;socket.send(JSON.stringify({destination: '/app/convertData',content: data}));
}5确保前端订阅了转换后数据的topic
socket.send(JSON.stringify({destination: '/user/queue/convertedData',disconnectDelay: 5000
}));前端发送一个消息到/app/convertData，后端的WebSocketController接收这个消息，执行数据转换逻辑，并通过@SendTo注解发送转换后的数据到/topic/convertedData。前端订阅了这个topic，以便接收实时转换后的数据。