TransWikia.com

Conexión WebSocket Angular - Spring falla desde IP Pública

Stack Overflow en español Asked by Javigim29 on January 2, 2021

Tengo una aplicación web que consiste en un chat creado con Angular que utiliza un backend java creado con Spring.

El frontend en Angular está alojado en un servidor web Apache en mi red local y el .jar de Spring está ejecutado en la misma máquina aprovechando su servidor Tomcat embebido.

Se utiliza una conexión mediante WebSockets con el protocolo STOMP para el envío y la recepción de los mensajes entre Angular y el broker en Spring. Todo funciona correctamente con las pruebas en local pero cuando hago una redirección en el router para que la aplicación esté disponible desde fuera de la red algo falla.

Concretamente, se presenta al usuario el menú de login del chat pero el botón conectar (que es el botón que inicia la conexión con el endpoint del WebSocket) parece fallar, dejo a continuación las respectivas capturas del código:

DATOS:

IP local donde se alojan ambos servicios: 192.168.1.84.

Puerto Apache: 80.

Puerto Tomcat Spring: 8080.

El firewall en el PC local está deshabilitado para descartar.

Redirección en el router:

Puerto/Rango Externo: 80

Puerto/Rango Interno: 80

Dirección IP: 192.168.1.84

Error lanzado, consola del navegador desde IP externa a la red local:

GET http://192.168.1.84:8080/chat-websocket/info=1581605093560_net::ERR_CONNECTION_REFUSED

WebSocketConfig.java (Configuración conexión Websocket Backend):

package com.medlinetec.springboot.backend.chat;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{

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

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/chat/");
        registry.setApplicationDestinationPrefixes("/app");
    }

}

chat.component.html (Botón en Angular que llama a la función para realizar la conexión):

<li class="nav-item mr-2">
        <button class="btn btn-success" type="button" (click)="conectar()"
        *ngIf="!conectado" [disabled]="!mensaje.username">Conectar</button>
</li>

chat.component.ts (Componente Angular que gestiona la conexión al WebSocket):

export class ChatComponent implements OnInit {

  private client: Client;

  ngOnInit() {
    this.client = new Client();
    this.client.webSocketFactory = () => {
      return new SockJS("http://192.168.1.84:8080/chat-websocket");
  }

  this.client.onConnect = (frame) => {
      console.log("Conectados: " + this.client.connected + " : " + frame);
      this.conectado = true;
  }}

  conectar(): void {
    this.client.activate();
  }

PD: También he probado poniendo la IP pública de mi red en la línea “return new SockJS” del “chat.component.ts” sin resultados.

Además, como curiosidad, si entro desde cualquier PC de la red local apuntando a la IP Pública de mi red funciona sin problemas, pero si lo hago desde un dispositivo en la red 3G (por ejemplo), es cuando sucede el error.

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP