具有Angular和Spring的Websocket

Question

我正在尝试在Java Spring后端和Angular前端之间建立Websocket连接。

我遇到的问题是，尝试调用/ ws / info？t = 1586086970794时，前端似乎失败，并且我无法弄清楚为什么或在哪里进行该调用。我正在将sockJS与stomp一起使用，但是我找不到有关被调用的信息端点的任何信息，因此未在代码中直接使用。

这是我的后端：

@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").setAllowedOrigins("http://localhost:4200").withSockJS();
    }
}

@Controller
public class PageWebsocketController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(1000); // simulated delay
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }

}

这是我的前端：

export class SocketService {
  webSocketEndPoint: string = 'http://localhost:8080/ws';
  topic: string = "/topic/greetings";
  stompClient: any;
  _connect() {
    console.log("Initialize WebSocket Connection");
    let ws = new SockJS(this.webSocketEndPoint);
    this.stompClient = Stomp.over(ws);
    const _this = this;
    _this.stompClient.connect({}, function (frame) {
      _this.stompClient.subscribe(_this.topic, function (sdkEvent) {
        _this.onMessageReceived(sdkEvent);
      });
      //_this.stompClient.reconnect_delay = 2000;
    }, (error) => {
      console.log("errorCallBack -> " + error)
      setTimeout(this._connect, 5000);
    });
  };

  _disconnect() {
    if (this.stompClient !== null) {
      this.stompClient.disconnect();
    }
    console.log("Disconnected");
  }

  _send(message) {
    console.log("calling logout api via web socket");
    this.stompClient.send("/app/hello", {}, JSON.stringify(message));
  }

  onMessageReceived(message) {
    console.log("Message Recieved from Server :: " + message);
  }
}

当前，我只是试图调用_connect函数并获得以下输出：

Initialize WebSocket Connection
Opening Web Socket...
GET http://localhost:8080/ws/info?t=1586087497720 net::ERR_CONNECTION_REFUSED
Whoops! Lost connection to http://localhost:8080/ws
socket.service.ts:23 errorCallBack -> Whoops! Lost connection to http://localhost:8080/ws

在网络选项卡中，我可以看到对交换协议的请求已成功，并且已交换以下消息：

o   1   
13:51:37.425
a["{\"type\":\"liveReload\"}"]  30  
13:51:37.426
a["{\"type\":\"overlay\",\"data\":{\"errors\":true,\"warnings\":false}}"]   73  
13:51:37.426
a["{\"type\":\"hash\",\"data\":\"64ab939817031c9011d5\"}"]  58  
13:51:37.427
a["{\"type\":\"ok\"}"]

但是对http://localhost:8080/ws/info?t=1586087497720的调用失败

Answer 1

我发现了我的错误。由于我在application.yml中设置了spring.servlet.context-path = / api，因此我需要在JavaScript中使用http://localhost:8080/api/ws而不是http://localhost:8080/ws然后一切都像魅力一样工作