带有 Angular 和 Spring 的 Websocket

Posted 2023-02-16

【中文标题】带有 Angular 和 Spring 的 Websocket

【英文标题】：Websocket with Angular and Spring

【发布时间】：2020-04-05 11:55:23

【问题描述】：

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

我遇到的问题是前端在尝试调用 /ws/info?t=1586086970794 时似乎失败了，我无法弄清楚为什么或在哪里进行了该调用。我正在使用带有 stomp 的 sockJS，但我找不到任何有关正在调用的 info-endpoint 的信息，并且它没有直接在代码中使用。

这是我的后端：

@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 的调用失败

【参考方案1】：

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