SpringBoot+Vue3实现websocket

<!--websocket依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>2.6.11</version>
</dependency>

先创建一个配置类

@Configuration
@EnableWebSocket
@Slf4j
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        log.info("websocket启动成功!"); // 打印日志信息，表示WebSocket成功启动

        registry.addHandler(new WebSocketHandler(), "/ws/ruowu") // 注册WebSocket处理程序，指定处理程序和对应的URL路径
                .setAllowedOrigins("*"); // 设置允许的跨域来源，这里使用通配符表示允许来自任何域的请求
    }
}

再创建一个处理器类，我在这里设置了一个静态变量，可以直接调用这个静态变量来发送消息

@Component
@Slf4j
public class WebSocketHandler extends TextWebSocketHandler {

    public static WebSocketSession session; // 静态变量，保存WebSocketSession对象

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        WebSocketHandler.session = session; // 保存WebSocketSession对象
        // 处理连接建立后的逻辑
        log.info("WebSocket连接已建立"); // 打印日志信息，表示WebSocket连接已成功建立
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理接收到的文本消息
        String receivedMessage = message.getPayload(); // 获取接收到的消息内容
        log.info("接收到的消息：{}", receivedMessage); // 打印接收到的消息内容

        // 回复消息
        String replyMessage = "服务器收到了您的消息：" + receivedMessage; // 构造回复消息内容
        session.sendMessage(new TextMessage(replyMessage)); // 发送回复消息给客户端
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        // 处理连接关闭后的逻辑
        log.info("WebSocket连接已关闭"); // 打印日志信息，表示WebSocket连接已关闭
    }
}

vue3，接收后端发送的请求，路径一定要和后台的路径一致

<template>
      <el-button @click="sendMessage">同步日志</el-button>
      <h3>WebSocket 消息：</h3>
      <ul>
        <li v-for="message in messages" :key="message">{{ message }}</li>
      </ul>
</template>
<script setup lang="ts">
const socket = ref(null)
const messages = ref([])
onMounted(() => {
  // 建立WebSocket连接
  socket.value = new WebSocket('ws://localhost:8083/ws/ruowu')
  // 监听WebSocket事件
  socket.value.addEventListener('open', () => {
    console.log('WebSocket 连接已建立')
  })
  socket.value.addEventListener('message', (event) => {
    const receivedMessage = event.data
    console.log('接收到的消息：', receivedMessage)
    messages.value.push(receivedMessage)
  })
  socket.value.addEventListener('close', () => {
    console.log('WebSocket 连接已关闭')
  })
})

onBeforeUnmount(() => {
  if (socket.value) {
    socket.value.close()
  }
})
</script>