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";
    }
    
    @MessageMapping("/send")
    public void send(String message) {
        webSocketService.sendAll(message);
    }
    
    @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>
    
    <input type="text" v-model="message" />
    <button @click="send">Send</button>
  </div>
</template>

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

在这个示例中，我们首先创建了一个 WebSocket 服务端，其中包含了一个用于处理客户端发送的消息的方法 send()，它会将接收到的消息发送给所有连接上的客户端。我们还创建了一个 WebSocketService，用于管理客户端连接和消息发送。

在前端，我们通过 Vue 的 mounted 生命周期创建了一个 WebSocket 连接，并在每次接收到服务器发来的消息时将其添加到一个数据列表中，然后在模板中通过 v-for 渲染出来。我们还在模板中添加了一个文本框和一个按钮，用于向服务器发送消息。当用户点击按钮时，我们创建一个新的 WebSocket 连接，并在连接打开后发送用户输入的消息，然后立即关闭连接。

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