vue3和springboot利用websocket通讯

前端端口：9090
后端端口：8080
vue3

引入依靠：
   npm install sockjs-client @stomp/stompjs
  vue页面

1. <template>
2.   <div>
3.     <h1>WebSocket 示例</h1>
4.     <button @click="sendMessage">发送消息</button>
5.     <div>
6.       {{ messages }}
7.     </div>
8.   </div>
9. </template>
11. <script setup lang="ts">
12. import { onBeforeUnmount, onMounted, ref } from "vue";
13. import SockJS from "sockjs-client";
14. import { Stomp } from "@stomp/stompjs";
16. const messages = ref();
17. let stompClient: any = null;
19. //websocket连接
20. const connect = () => {
21.   const socket = new SockJS("http://localhost:8080/ws");
22.   stompClient = Stomp.over(socket);
23.   stompClient.connect(
24.     {},
25.     (frame: string) => {
26.       console.log("Connected: " + frame);
27.       stompClient.subscribe("/topic/greetings", (message: { body: string }) => {
28.         console.log("Received: " + message.body);
29.         messages.value = message.body;
30.         //messages.value.push(message.body);
31.       });
32.     },
33.     (error: string) => {
34.       console.error("Error: " + error);
35.     }
36.   );
37. };
39. //发送消息
40. const sendMessage = () => {
41.   if (stompClient && stompClient.connected) {
42.     stompClient.send("/app/hello", {}, "hello, world");
43.   } else {
44.     console.error("No STOMP connection available");
45.   }
46. };
48. onMounted(() => {
49.   connect();
50. });
52. onBeforeUnmount(() => {
53.   if (stompClient) {
54.     stompClient.disconnect();
55.   }
56. });
57. </script>
59. <style scoped>
60. /* 添加你的样式 */
61. </style>

复制代码

springboot

引入依靠

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

复制代码

websocket设置

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

复制代码

controller

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

复制代码

测试

点击按钮

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

后端控制台

 
 ===============================注意====================================
这里阐明一下，假如vue文件里的onMounted将毗连和发送两个函数写在一起，即：
   onMounted(() => {
  connect();
    sendMessage();
});
   你会发现sendMessage（）里并没有发送到后端，后端你也没有返回消息。
原因：
异步性：WebSocket 毗连是异步的。这意味着 connect 函数会立即返回，而实际的毗连过程会在之后发生。因此，假如您在 connect 函数返回后立即调用 sendMessage，stompClient 大概还没有被乐成初始化，因为毗连大概还没有创建。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。