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 我需要使用 http://localhost:8080/api/ws in my javascript instead of http://localhost:8080/ws 然后一切都很顺利

Angular 和 Spring 的 Websocket

Websocket with Angular and Spring

spring

stomp

websocket

angular