Веб-розетка с Angular и пружиной - PullRequest
Новая
       45

Веб-розетка с Angular и пружиной

1 голос
/ 05 апреля 2020

Я пытаюсь установить соединение Websocket между Java Spring Backend и Angular Frontend.

Проблема, с которой я сталкиваюсь, заключается в том, что кажется, что веб-интерфейс не работает при попытке вызвать / ws / info? t = 1586086970794 и я не могу понять, почему или где делается этот звонок. Я использую sock JS с stomp, но я не смог найти никакой информации о вызываемой информационной конечной точке, и она не используется напрямую в коде.

Это мой Backend: 

@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 Ответ

1 голос
/ 05 апреля 2020

Я нашел свою ошибку. Так как я установил spring.servlet.context-path = / api в моем application.yml, мне нужно было использовать http://localhost: 8080 / api / ws в моем javascript вместо http://localhost: 8080 / ws Тогда все работало как шарм

...