以下是一个基于 Spring Boot、WebSocket 和 Vue 实现后端实时向前端推送数据的代码示例:1. 后端代码```@Controllerpublic class WebSocketController {private final WebSocketService webSocketService;@Autowiredpublic WebSocketController(WebSocketService webSocketService) {this.webSocketService = webSocketService;}@GetMapping("/")public String index() {return "index";}@Scheduled(fixedDelay = 1000)public void pushData() {webSocketService.sendAll(String.valueOf(System.currentTimeMillis()));}@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}}``````@Servicepublic class WebSocketService {private final List sessions = new CopyOnWriteArrayList();public void add(Session session) {sessions.add(session);}public void remove(Session session) {sessions.remove(session);}public void sendAll(String message) {sessions.forEach(session -> {try {session.getBasicRemote().sendText(message);} catch (IOException e) {e.printStackTrace();}});}}```2. 前端代码```
Real-time data:
```在这个示例中,我们在后端创建了一个定时任务,每秒钟向所有连接上的客户端推送当前时间戳。我们还创建了一个 WebSocketService,用于管理客户端连接和消息发送。在前端,我们通过 Vue 的 mounted 生命周期创建了一个 WebSocket 连接,并在每次接收到服务器发来的消息时将其添加到一个数据列表中,然后在模板中通过 v-for 渲染出来。要注意的是,我们在前端中只创建了一个 WebSocket 连接,用于接收服务器推送的数据。这是因为 WebSocket 是全双工通信,可以同时进行发送和接收操作。
暂无评论内容