java - WebSocket前后连接问题

Question

我在 vpn 中有一个项目，我尝试使用 WebSocket 创建与套接字的聊天。这是控制器：

    @MessageMapping("/chat.send")
@SendTo("/topic/public")
public ChatMessage sendMessage (@Payload ChatMessage chatMessage){
    return chatMessage;
}

@MessageMapping("/chat.newUser")
@SendTo("/topic/public")
public ChatMessage newUser(@Payload ChatMessage chatMessage,
                           SimpMessageHeaderAccessor headerAccessor) {
    // Add username in web socket session
    headerAccessor.getSessionAttributes().put("username", chatMessage.getSender());
    return chatMessage;
}

这是听众：

       private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketEventListener.class);

@Autowired
private SimpMessageSendingOperations sendingOperations;

@EventListener
public void handleWebSocketConnectListener (final SessionConnectedEvent event){
    LOGGER.info("Se creo una nueva conexion chat");
    /*final StompHeaderAccessor headerAccessor = StompHeaderAccessor.wrap(event.getMessage());

    final String username = (String) headerAccessor.getSessionAttributes().get("username");

    final ChatMessage chatMessage = ChatMessage.builder()
            .type(MessageType.CONNECT)
            .sender(username)
            .build();

    sendingOperations.convertAndSend("/topic/public", chatMessage);*/
}

@EventListener
public void handleWebSocketDisconnectListener (final SessionDisconnectEvent event) {
    final StompHeaderAccessor headerAccessor = StompHeaderAccessor.wrap(event.getMessage());

    final String username = (String) headerAccessor.getSessionAttributes().get("username");

    final ChatMessage chatMessage = ChatMessage.builder()
            .type(MessageType.DISCONNECT)
            .sender(username)
            .build();

    sendingOperations.convertAndSend("/topic/public", chatMessage);
}

这是一个配置：

        @Override
public void configureMessageBroker(MessageBrokerRegistry config) {
    config.setApplicationDestinationPrefixes("/app");
    config.enableSimpleBroker("/topic"); //deberia cambiarse por el enableStompBroker
/*
        config.enableStompBrokerRelay("/topic")
                .setRelayHost("localhost")
                .setRelayPort(61613)
                .setClientLogin("guest")
                .setClientPasscode("guest");
*/
    }

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

评论的部分我就这样离开了它们，因为我正在研究如何解决这个问题。

现在，客户端使用angle和socketjs通过vpn连接。这是角度的代码

      export class WebSocketAPIService {

  private webSocketEndPoint: string = environment.baseurl + '/chat.newUser';
  private topic = '/topic/public';
  private stompClient: Stomp.Client;
  public mensajeRecibidoEmitter: EventEmitter<Message> = new EventEmitter<Message>();

  constructor() { }

  public _connect(): void {
    console.log('Initialize WebSocket Connection');
    const ws = new SockJS(this.webSocketEndPoint);
    this.stompClient = Stomp.over(ws);

    this.stompClient.connect({}, (frame: Frame) => {
      this.stompClient.subscribe(this.topic, (sdkEvent: Message) => {
        this.onMessageReceived(sdkEvent);
      });
      // _this.stompClient.reconnect_delay = 2000;
    }, (err) => this.errorCallBack(err));
  }

  public _disconnect(): void {
    if (this.stompClient !== null) {
      this.stompClient.disconnect(() => {
        console.log('Disconnected');

      });
    }
  }

  // on error, schedule a reconnection attempt
  errorCallBack(error) {
    console.log('errorCallBack -> ' + error);
    setTimeout(() => {
      // this._connect();
      console.log(' trying reconnect...');
    }, 5000);
  }

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

  onMessageReceived(message: Message): void {
    console.log('Message Recieved from Server :: ' + message);
    // this.appComponent.handleMessage(JSON.stringify(message.body));
    this.mensajeRecibidoEmitter.emit(message);
  }
}

并抛出此错误：

从源“http://localhost:4200”访问“http://192.168.100.71:8080/dpo_backend_dev/chat.newUser/info?t=1603389915235”处的 XMLHttpRequest 已被 CORS 策略阻止：“当请求的凭据模式为“包含”时，响应中的 Access-Control-Allow-Origin 标头不得为通配符“*”。XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

我不知道如何解决它，因为我正在学习使用 webSocket，但由于某种原因，我只听 localhosty 中发生的事情，而不是在 vpn 之间连接。有什么帮助吗？

标签： javaangularspringtypescriptwebsocket