前端websocket和后端websocket区别

<think>好的，我现在需要帮助用户解决在前端使用Vue通过WebSocket与后端Spring Boot交互并打印消息的问题。首先，我得回顾用户提供的引用内容，特别是引用[1]中的Vue组件结构和WebSocket连接代码，以及引用[2]和[3]提到的后端SpringBoot配置。用户的问题是如何在前端发送消息到后端，并在前端打印接收到的消息。根据引用[1]，前端的ChatRoom.vue已经使用了socket.io-client库，通过WebSocket连接到后端。但可能用户的后端使用的是SpringBoot的WebSocket支持，而socket.io是Node.js的库，可能存在兼容性问题。因此，我需要确认前后端使用的WebSocket库是否兼容。Spring Boot通常使用STOMPoverWebSocket，而前端可能需要使用SockJS或者原生WebSocket API，而不是socket.io。这可能是一个关键点，用户可能在这里遇到了问题。 接下来，我需要调整前端的代码，使用原生WebSocket或者SockJS来连接SpringBoot后端。根据引用[3]，后端配置了WebSocket端点，所以前端需要对应地连接到该端点。例如，使用newWebSocket('ws://localhost:8080/ws')或者SockJS。然后，在前端建立连接，监听onmessage事件来处理接收到的消息，并在页面上显示。同时，发送消息时使用send方法。然后，后端的SpringBoot需要配置WebSocket处理器，可能是通过@MessageMapping注解来处理前端发送的消息，并将消息打印到控制台。同时，后端可能需要将接收到的消息广播回前端，或者进行其他处理。需要确保后端的配置正确，比如启用WebSocket支持，设置允许的跨域来源等。最后，用户可能需要验证消息是否正确发送和接收。比如，在Vue组件中维护一个消息列表，当发送消息时，将其添加到列表中，并在接收到后端消息时也添加到列表，从而实现实时显示。同时，在后端控制台查看打印的消息，确保通信正常。 需要检查的步骤包括：前端是否正确连接WebSocket，是否正确发送和接收消息；后端是否正确处理消息并打印；是否有跨域问题需要解决；以及前后端的WebSocket路径是否一致。可能还需要添加错误处理，比如在WebSocket连接失败时给出提示。</think>以下是使用Vue前端与Spring Boot后端通过WebSocket交互的实现步骤： ### 一、前端Vue实现 1. **安装依赖** ```bash npm install sockjs-client stompjs ``` 2. **WebSocket工具类**（新建`src/utils/websocket.js`） ```javascript import Stomp from 'stompjs' import SockJS from 'sockjs-client' let stompClient = null export default { connect(context) { const socket = new SockJS('http://localhost:8080/ws') stompClient = Stomp.over(socket) stompClient.connect({}, () => { stompClient.subscribe('/topic/messages', message => { context.commit('ADD_MESSAGE', JSON.parse(message.body)) }) }) }, sendMessage(message) { stompClient.send("/app/chat", {}, JSON.stringify(message)) } } ``` 3. **Vue组件实现**（参考引用[1]的组件结构） ```vue <template> <div> <div v-for="(msg, index) in messages" :key="index">{{ msg.content }}</div> <input v-model="inputMsg" @keyup.enter="send"/> </div> </template> <script> import websocket from '@/utils/websocket' export default { data() { return { messages: [], inputMsg: '' } }, mounted() { websocket.connect(this.$store) }, methods: { send() { websocket.sendMessage({ content: this.inputMsg }) this.inputMsg = '' } } } </script> ``` ### 二、后端Spring Boot实现 1. **添加依赖**（pom.xml） ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 2. **WebSocket配置类**（参考引用[3]的配置） ```java @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/ws").withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } ``` 3. **消息处理控制器** ```java @Controller public class MessageController { @MessageMapping("/chat") @SendTo("/topic/messages") public Message handleMessage(Message message) { System.out.println("Received: " + message.getContent()); // 打印接收到的消息 return message; } } ``` ### 三、验证流程 1. 前端发送消息时，消息会通过STOMP协议发送到`/app/chat`路径 2. 后端接收后打印到控制台，并广播到`/topic/messages` 3. 前端订阅`/topic/messages`接收广播消息

在前端使用 WebSocket 向服务器发送数据时，主要通过 WebSocket 对象的 `send()` 方法实现。该方法允许将字符串、二进制数据（如 `ArrayBuffer` 或 `Blob`）发送到服务器。以下是实现方法及示例： ### 在 Vue 组件中实现发送数据 基于提供的 Vue 示例代码，WebSocket 连接已在 `mounted()` 生命周期钩子中初始化，并在连接成功后设置了定时器以定期发送数据。以下是相关实现方法： - **初始化 WebSocket 连接** 在 `websocket()` 方法中，创建 WebSocket 实例并监听 `onopen` 事件。当连接建立后，设置定时器并通过 `send()` 方法发送数据。例如，每两秒发送一次 `'Holle'` 消息[^1]。 - **使用 `send()` 方法发送数据** `send()` 方法支持多种数据格式，包括字符串、`ArrayBuffer` 和 `Blob`。例如，发送 JSON 格式的数据可将对象转换为字符串后再发送： ```javascript const data = { message: "Hello Server" }; this.ws.send(JSON.stringify(data)); ``` - **清理资源** 在组件销毁前，需清除定时器并关闭 WebSocket 连接，以避免内存泄漏。通过 `clearInterval()` 清除定时器，并调用 `close()` 方法关闭连接。 ### 在后端（Spring Boot）接收数据 在 Spring Boot 后端，需配置 WebSocket 并实现 `TextWebSocketHandler` 来处理接收到的消息。以下为关键步骤： 1. **添加依赖** 在 `pom.xml` 中添加 WebSocket 依赖： ```xml <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>5.1.8.RELEASE</version> </dependency> ``` 2. **配置 WebSocket** 创建配置类并注册 WebSocket 处理器： ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new MyWebSocketHandler(), "/websocket") .setAllowedOrigins("*"); } } ``` 3. **实现消息处理** 创建 `WebSocketHandler` 子类以处理接收到的消息： ```java public class MyWebSocketHandler extends TextWebSocketHandler { @Override public void handleTextMessage(WebSocketSession session, TextMessage message) { String payload = message.getPayload(); // 处理接收到的消息 System.out.println("Received: " + payload); // 可选：向客户端发送响应 try { session.sendMessage(new TextMessage("Server received: " + payload)); } catch (IOException e) { e.printStackTrace(); } } } ``` ### 示例代码 #### Vue 组件发送数据 ```javascript methods: { websocket() { this.ws = new WebSocket(this.wsUrl); if (typeof (WebSocket) === "undefined") { alert("您的浏览器不支持socket"); } else { this.ws.onopen = () => { this.testSetinterval = setInterval(() => { setTimeout(() => { const data = { message: "Hello Server" }; this.ws.send(JSON.stringify(data)); }, 0); }, 1000 * 2); this.$once('hook:beforeDestroy', () => { clearInterval(this.testSetinterval); this.ws.close(); console.log("定时器清除了"); }); }; this.ws.onmessage = evt => { console.log("连接成功"); }; this.ws.onclose = e => { console.log('websocket 断开'); console.log(e.code + ' ' + e.reason + ' ' + e.wasClean); }; } } } ``` #### Spring Boot 后端处理数据 ```java public class MyWebSocketHandler extends TextWebSocketHandler { @Override public void handleTextMessage(WebSocketSession session, TextMessage message) { String payload = message.getPayload(); System.out.println("Received: " + payload); try { session.sendMessage(new TextMessage("Server received: " + payload)); } catch (IOException e) { e.printStackTrace(); } } } ``` ### 总结 - 前端使用 `WebSocket.send()` 方法发送数据，支持多种数据格式。 - 后端通过 `TextWebSocketHandler` 接收并处理消息。 - 需要确保在组件销毁时清理资源，避免内存泄漏。