springboot + vue实现websocket

### 使用 Spring Boot 和 Vue 实现 WebSocket 功能集成 #### 添加依赖项 为了实现基于 Spring Boot 的 WebSocket 服务，首先需要引入必要的 Maven 或 Gradle 依赖。以下是 Maven 中的配置： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 上述依赖允许开发者构建支持 WebSocket 协议的服务端应用[^1]。 #### 创建 WebSocket 配置类 通过定义一个 `WebSocketConfig` 类来启用并配置 WebSocket 支持。该类需继承自 `AbstractWebSocketMessageBrokerConfigurer` 并重写相关方法： ```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(); // 注册 WebSocket 终端点 } } ``` 此代码片段实现了 STOMP over WebSocket 的基本设置，其中 `/ws` 是客户端连接到服务器的终端点地址[^2]。 #### 处理消息控制器 创建一个控制器用于接收和响应来自前端的消息。例如： ```java @Controller public class ChatController { @MessageMapping("/chat") @SendTo("/topic/messages") public Message sendMessage(Message message) throws Exception { Thread.sleep(100); // 模拟延迟处理时间 return new Message(message.getFrom(), message.getText()); } } // 数据传输对象 (DTO) class Message { private String from; private String text; // 构造函数、getter 和 setter 方法省略... } ``` 以上逻辑表明当接收到发往 `/chat` 路径的消息时会自动将其转发至订阅者列表中的所有客户机上显示出来[^3]。 #### 前端 Vue.js 实现 在 Vue.js 方面，则可以通过 sockjs-client 及 stomp-js 这两个库完成与后台交互的部分工作流程如下所示: 安装所需 npm 包： ```bash npm install --save sockjs-client@latest stompjs@latest ``` 编写组件代码样例: ```javascript <script setup lang="ts"> import SockJS from 'sockjs-client'; import * as Stomp from 'stompjs'; let wsClient = null; onMounted(() => { const socket = new SockJS('http://localhost:8080/ws'); wsClient = Stomp.over(socket); wsClient.connect({}, frame => { console.log(`Connected: ${frame}`); wsClient.subscribe('/topic/messages', response => { console.log(response.body); }); }); }); const sendMessage = () => { if (!wsClient || !wsClient.connected) return alert("Not connected!"); let msgContent = document.getElementById("messageInput").value.trim(); if(msgContent.length === 0){ alert("Please enter a valid message."); return ; } wsClient.send("/app/chat", {}, JSON.stringify({from:"User",text:msgContent})); }; </script> <template> <div id="container"> <input type="text" placeholder="Type your message here..." id="messageInput"/> <button v-on:click="sendMessage">Send</button> </div> </template> ``` 上面展示了如何利用 JavaScript 封装好的 API 接口去建立持久化双向通信链路以及监听特定主题下的更新通知事件[^4][^5]。 ---

### Spring Boot 中集成 WebSocket 并与 Vue 前端通信 #### 一、Spring Boot 后端配置 为了使应用程序支持 WebSocket，在 `com.yl.framework.websocket` 包下创建名为 `WebSocketConfig.java` 的类，该类通过 `@Configuration` 注解标记为配置文件，并定义了一个返回 `ServerEndpointExporter` 类型的 Bean 方法来启动 WebSocket 支持[^1]。 ```java package com.yl.framework.websocket; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } ``` 接着实现具体的 WebSocket 处理逻辑。通常会有一个带有 `@ServerEndpoint("/ws/{userId}")` 注解的组件用于处理来自客户端的消息请求以及向特定用户发送消息的方法 `sendOneWebSocket()`[^3]。 对于更复杂的应用场景，可能还需要引入其他技术栈如 MySQL 存储数据、多线程提高性能、Redis 缓存机制等辅助功能开发[^2]。 #### 二、Vue.js 客户端连接设置 在 Vue 应用程序中建立 Web Socket 连接可以利用原生 JavaScript API 或者第三方库（比如 socket.io-client）。这里展示一种简单的方式： ```javascript // main.js or any component file where you want to establish the connection. let ws = null; if (window.location.protocol === 'http:') { ws = new WebSocket('ws://localhost:8080/ws/' + this.userId); } else { ws = new WebSocket('wss://localhost:8080/ws/' + this.userId); // For HTTPS connections } ws.onopen = () => console.log("Connection opened..."); ws.onerror = error => console.error(`WebSocket error observed: ${error}`); ws.onmessage = event => handleIncomingMessage(event.data); function handleIncomingMessage(data){ // Process incoming message here... } ``` 以上代码片段展示了如何根据当前页面协议自动匹配合适的 URL 来初始化 WebSocket 对象，并设置了三个事件处理器分别对应于打开连接时、发生错误时和接收到来自服务器的信息时的行为。