带有SockJS连接丢失问题的Spring Websocket

Question

我正在开发一个使用弹簧靴，角度cli和sockjs的Web应用程序。

WebSocket实现：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractSecurityWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/info", "/user", "/notif");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

Angular websocket util实现：

注意：此类用于连接Web套接字和订阅例程！

@Injectable()
export class WebSocketUtil {

  stompClient = null;

  constructor() {
  }

  connect(subscribers: Subscriber[] = null) {
    let _this = this;
    let socket = new SockJS("https://localhost/ws");
    if (socket != null) {
      this.stompClient = Stomp.over(socket);
      if (this.stompClient != null) {
        console.log("Stomp client is connected!");

        let headers = {};
        headers["X-CSRF-TOKEN"] = ...;// csrf code

        this.stompClient.connect(headers, (frame) => {
          subscribers.forEach((subscriber) => {
            _this.stompClient.subscribe(subscriber.URL, subscriber.CALLBACK);
          });
        }, () => {
          console.log(_this.stompClient);
        });
      } else {
        throw {
          name: "StompClientNotRegistered",
          message: "Stomp client is not registered!"
        };
      }
    } else {
      throw {
        name: "SocketEstablishFailed",
        message: "Socket cannot be established!"
      };
    }
  }

  send(message) {
    this.stompClient.send(message.url, JSON.stringify(message.params));
  }
}

Angular订户类实现：

注意：此类用于将订阅例程绑定到stomp客户端！

export class Subscriber {
  constructor(private url: string = "", private callback: any) {
  }

  get URL() {
    return this.url;
  }

  get CALLBACK() {
    return this.callback;
  }
}

WebsocketUtil用法：

注意：在视图初始化阶段之后调用此代码片段。

this.webSocketUtil.connect([
      new Subscriber("/notif", function (data) {
        console.log(data);
      }),
      new Subscriber("/user", function (data) {
        console.log(data);
      })
    ]);

上面的代码导致Web浏览器（FF和chrome）控制台出现以下错误：

注意：https://localhost/ws可以访问并返回“欢迎来到SockJS！”信息。

Answer 1

最后，我解决了以下问题：

1. 添加适当的重写配置到Apache2配置 - 我忽略了它:(

   ...
   
   RewriteEngine On
   RewriteCond %{HTTP:Upgrade} =websocket [NC]
   RewriteRule ^/ws/(.*)       ws://localhost:8080/ws/$1 [P,L]    
   
   ...

2. 在安全配置类中为/ ws请求添加permit-all权限： @Configuration @EnableWebSecurity公共类WebSecurityConfig扩展WebSecurityConfigurerAdapter {

   ...
   
   @Override
   protected void configure(HttpSecurity http) throws Exception {
       ...
       http.authorizeRequests().antMatchers("/ws/**").permitAll();
       ...
   }

   }
3. 在websocket配置类中为SimpTypes添加permit-all权限： @Configuration @EnableWebSocketMessageBroker公共类WebSocketConfig扩展AbstractSecurityWebSocketMessageBrokerConfigurer {...

   @Override
   protected void configureInbound(MessageSecurityMetadataSourceRegistry messages) {
       messages.simpTypeMatchers(SimpMessageType.CONNECT, SimpMessageType.SUBSCRIBE, SimpMessageType.HEARTBEAT,
               SimpMessageType.UNSUBSCRIBE, SimpMessageType.DISCONNECT).permitAll();
   }

   }