vue3和springboot使用websocket通信

前端端口：9090

后端端口：8080

vue3

引入依赖：

npm install sockjs-client @stomp/stompjs

vue页面

<template><div><h1>WebSocket 示例</h1><button @click="sendMessage">发送消息</button><div>{{ messages }}</div></div>
</template><script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import SockJS from "sockjs-client";
import { Stomp } from "@stomp/stompjs";const messages = ref();
let stompClient: any = null;//websocket连接
const connect = () => {const socket = new SockJS("http://localhost:8080/ws");stompClient = Stomp.over(socket);stompClient.connect({},(frame: string) => {console.log("Connected: " + frame);stompClient.subscribe("/topic/greetings", (message: { body: string }) => {console.log("Received: " + message.body);messages.value = message.body;//messages.value.push(message.body);});},(error: string) => {console.error("Error: " + error);});
};//发送消息
const sendMessage = () => {if (stompClient && stompClient.connected) {stompClient.send("/app/hello", {}, "hello, world");} else {console.error("No STOMP connection available");}
};onMounted(() => {connect();
});onBeforeUnmount(() => {if (stompClient) {stompClient.disconnect();}
});
</script><style scoped>
/* 添加你的样式 */
</style>

springboot

引入依赖

        <!-- Spring Boot WebSocket依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

websocket配置

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/topic"); // 使用内存中的简单代理来广播消息config.setApplicationDestinationPrefixes("/app"); // 客户端发送消息到服务器的前缀}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/ws").setAllowedOrigins("http://localhost:9090") // 允许的来源列表.withSockJS(); // 注册 WebSocket 端点，并启用 SockJS 备份传输方式}
}

controller

@MessageMapping("/hello")@SendTo("/topic/greetings")public String greeting(String message) {System.out.println(message);return "你好";}

测试

点击按钮

 另一个连接这个广播主题的页面也会接受到信息

后端控制台

 

 ===============================注意====================================

这里说明一下，假如vue文件里的onMounted将连接和发送两个函数写在一起，即：

onMounted(() => {
  connect();

  sendMessage();
});

 你会发现sendMessage（）里并没有发送到后端，后端你也没有返回消息。

原因：

异步性：WebSocket 连接是异步的。这意味着 connect 函数会立即返回，而实际的连接过程会在之后发生。因此，如果您在 connect 函数返回后立即调用 sendMessage，stompClient 可能还没有被成功初始化，因为连接可能还没有建立。