websocket 实现后端主动前端推送数据、及时通讯(vue3 + springboot)

在Vue3和Spring Boot中实现WebSocket进行后端主动前端推送数据及时通讯的示例代码如下：

后端（Spring Boot）:

1. 添加依赖（在pom.xml中）:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2. 配置WebSocket (WebSocketConfig.java):

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
    }
}

3. 创建WebSocket服务 (WebSocketService.java):

@Service
public class WebSocketService {
    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;
 
    public void sendMessageToClient(String destination, String message) {
        simpMessagingTemplate.convertAndSend(destination, message);
    }
}

前端（Vue3）:

1. 安装依赖:

npm install vue-socket.io-extended

2. 设置WebSocket连接并监听消息 (main.js):

import { createApp } from 'vue'
import App from './App.vue'
import { Socket } from 'vue-socket-io-extended'
 
const app = createApp(App)
 
const socket = app.use(Socket, {
  connection: 'ws://localhost:8080/ws',
  // 可以添加额外的传递给socket.io的选项
})
 
app.mount('#app')

3. 在组件中发送和接收消息 (Notification.vue):

<template>
  <div>
    <!-- 显示接收到的消息 -->
    <div v-for="message in messages" :key="message">{{ message }}</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      messages: []
    }
  },
  mounted() {
    // 监听服务端推送的消息
    this.$socket.on('message', (data) => {
      this.messages.push(data)
    })
  },
  methods: {
    // 发送消息到服务端
    sendMessage(message) {
      this.$socket.emit('message', message)
    }
  }
}
</script>

后端发送消息:

当你需要从后端发送消息到前端时，可以在任何需要的地方调用WebSocketService中的sendMessageToClient方法。

@RestController
public class SomeController {
 
    @Autowired
    private WebSocketService webSocketService;
 
    @GetMapping("/sendMessage")
    public void sendMessage() {
        String message = "Hello, this is a message from server!";
        webSocketService.sendMessageToClient("/topic/publ