springboot+websocket+vue实现后端实时向前端推送数据

以下是一个基于 Spring Boot、WebSocket 和 Vue 实现后端实时向前端推送数据的代码示例：

1. 后端代码

@Controller
public class WebSocketController {
    
    private final WebSocketService webSocketService;
    
    @Autowired
    public WebSocketController(WebSocketService webSocketService) {
        this.webSocketService = webSocketService;
    }
    
    @GetMapping("/")
    public String index() {
        return "index";
    }
    
    @Scheduled(fixedDelay = 1000)
    public void pushData() {
        webSocketService.sendAll(String.valueOf(System.currentTimeMillis()));
    }
    
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

@Service
public class WebSocketService {
    
    private final List<Session> 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. 前端代码

<template>
  <div>
    <h1>Real-time data:</h1>
    <ul>
      <li v-for="(data, index) in dataList" :key="index">{{ data }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    const ws = new WebSocket('ws://localhost:8080/ws');
    ws.onmessage = (event) => {
      this.dataList.push(event.data);
    };
    ws.onclose = () => {
      console.log('Connection closed');
    };
  }
}
</script>

在这个示例中，我们在后端创建了一个定时任务，每秒钟向所有连接上的客户端推送当前时间戳。我们还创建了一个 WebSocketService，用于管理客户端连接和消息发送。

在前端，我们通过 Vue 的 mounted 生命周期创建了一个 WebSocket 连接，并在每次接收到服务器发来的消息时将其添加到一个数据列表中，然后在模板中通过 v-for 渲染出来。

要注意的是，我们在前端中只创建了一个 WebSocket 连接，用于接收服务器推送的数据。这是因为 WebSocket 是全双工通信，可以同时进行发送和接收操作。