引言

在现代Web开发中，实时数据交互变得越来越重要，而WebSocket作为HTML5标准的一部分，提供了一种全双工、长连接的通信方式，使得服务器与客户端可以进行双向实时通信。但在实际应用中，由于浏览器同源策略的限制，前端应用直接访问后端WebSocket服务可能会受到阻碍，尤其是在前后端部署不在同一域名或端口下的情况下。这时，我们可以借助Nginx反向代理来解决这一问题。

本文将详细介绍如何在基于SpringBoot+Vue3的项目中配置Nginx以代理WebSocket，从而实现实时、跨域的数据通信。

步骤一：搭建Spring Boot WebSocket服务

首先，在Spring Boot后端创建并配置WebSocket服务。这里简述一个基本的WebSocket处理器：

// 引入相关依赖
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myWebSocketHandler(), "/ws").setAllowedOrigins("*"); // 允许所有来源
    }

    @Bean
    public MyWebSocketHandler myWebSocketHandler() {
        return new MyWebSocketHandler();
    }
}

// WebSocket消息处理器
@Component
public class MyWebSocketHandler extends TextWebSocketHandler {

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
        String payload = message.getPayload();
        // 处理接收到的消息
        // ...
        session.sendMessage(new TextMessage("Received: " + payload));
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 连接建立后的处理
        // ...
    }
}

步骤二：Vue3前端建立WebSocket连接

在Vue3前端，我们使用WebSocket API创建连接，并确保连接地址是Nginx代理的WebSocket路径（假设为/api/ws）：

import { onMounted, ref } from 'vue';

export default {
  setup() {
    const socket = ref(null);

    onMounted(() => {
      // 创建WebSocket连接
      socket.value = new WebSocket('/api/ws');

      socket.value.onopen = function(event) {
        console.log('WebSocket连接已打开');
      };

      socket.value.onmessage = function(event) {
        console.log('接收到消息：', event.data);
      };

      socket.value.onerror = function(error) {
        console.error('WebSocket错误：', error);
      };
    });

    // 发送消息到服务器的方法
    const sendMessage = (msg) => {
      if (socket.value.readyState === WebSocket.OPEN) {
        socket.value.send(msg);
      } else {
        console.log('WebSocket还未准备好发送消息');
      }
    };

    return {
      sendMessage
    };
  }
};

步骤三：配置Nginx代理WebSocket

在Nginx服务器上，我们需要设置WebSocket的反向代理。编辑Nginx配置文件（如 /etc/nginx/sites-available/default），添加如下配置：

server {
    listen 80; # 或者你希望监听的其他端口
    server_name your-domain.com; # 替换为你的域名

    location /api/ws {
        proxy_pass http://localhost:8080/ws; # 后端WebSocket服务的实际地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_read_timeout 60s; # 可根据需要调整超时时间
    }

    # ...其他常规HTTP请求的代理配置...
}

保存配置后，重启Nginx服务，使新的配置生效。

通过以上步骤，我们在SpringBoot+Vue3项目中成功配置了Nginx对WebSocket的代理。当Vue3前端尝试连接到/api/ws时，实际上是由Nginx转发至本地运行的Spring Boot WebSocket服务，从而实现了跨越不同源的WebSocket通信。

小结

综上所述，利用Nginx强大的反向代理功能，不仅可以解决WebSocket的跨域问题，还可以帮助我们更好地管理网络流量和负载均衡，提高整个系统的稳定性和可靠性。