springboot+websocket+vue
时间: 2024-12-31 11:39:10 浏览: 11
### 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 对象,并设置了三个事件处理器分别对应于打开连接时、发生错误时和接收到来自服务器的信息时的行为。
阅读全文