javascript - 通过 HTTPS 的 Web 套接字

Question

我是网络套接字编程的新手。实际上，我使用 Angular-8 和 Rest -API 和 Spring boot 构建了一个 Web 应用程序。一切都按预期在本地工作，这意味着在 HTTP 上。但我无法通过 HTTPS（生产服务器）建立套接字连接。我正在使用的库：

Angular ---> Stomp.js & Stomp-client

Spring ----> spring-boot-starter-websocket

服务器---> Nginx

下面是它的代码。

// 套接字服务.ts

import { Injectable, NgZone } from '@angular/core';
import * as Stomp from 'stompjs';
import * as SockJS from 'sockjs-client';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';
@Injectable()

export class SocketService {

  private socketUrl = environment.serviceUrl+'socket?user=';
  private stompClient = null;
  constructor(private route: Router, private ngZone: NgZone) {
  }

  _connect(emailId) {
    let ws = new SockJS(this.socketUrl + emailId);

    // disconnect previous socket
    this._disconnect();
    this.stompClient = Stomp.over(ws);

    let that = this;
    this.stompClient.connect({}, function (frame) {
      //subscribe to get response from server
      that.stompClient.subscribe('/user/queue', (message) => {
        let response = JSON.parse(message.body);
        that.ngZone.run(() => {
          if (response['code'] == 1) {
            localStorage.setItem('token', response['newToken']);   // new token with expiry 2 hour
            localStorage.setItem('emailId', response['username']);
            that.route.navigate(['/pages/dashboard']);

            //disconnect the socket
            that._disconnect();
          }
        });
      });

    });
  }

  _disconnect() {
    if (this.stompClient !== null) {
      this.stompClient.disconnect();
    }
  }
}

// SocketConfig.java

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketConfig.class);

    public static final String ENDPOINT_CONNECT = "neoeyed/socket";
    public static final String SUBSCRIBE_USER_PRIVATE = "/private";
    public static final String SUBSCRIBE_USER_REPLY = "/reply";
    public static final String SUBSCRIBE_QUEUE = "/queue";

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint(ENDPOINT_CONNECT).setHandshakeHandler(new 
                 CustomSocketPrincipalHandler())
                .setAllowedOrigins("*").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker(SUBSCRIBE_QUEUE, SUBSCRIBE_USER_REPLY, "/topic", "/user");
        config.setApplicationDestinationPrefixes(SUBSCRIBE_USER_PRIVATE);
    }

    // various listeners for debugging purpose

    @EventListener
    public void handleSubscribeEvent(SessionSubscribeEvent event) {
        LOGGER.info("<==> handleSubscribeEvent: username=" + event.getUser().getName() + ", event=" + 
        event);
    }

    @EventListener
    public void handleConnectEvent(SessionConnectEvent event) {
        LOGGER.info("===> handleConnectEvent: username=" + event.getUser().getName() + ", event=" + 
        event);
    }

    @EventListener
    public void handleDisconnectEvent(SessionDisconnectEvent event) {
        LOGGER.info("<=== handleDisconnectEvent: username=" + event.getUser().getName() + ", event=" 
        + event);
    }

}

// 自定义-nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid; 

events {
worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types; 
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    #gzip  on;     
    include /etc/nginx/conf.d/*.conf;

    server {
        location / {
            proxy_pass example.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            # WebSocket support
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $http_connection;
        }
    }
}

谢谢你。 https://example.com在有效的 ssl 证书上运行

标签： javascriptangularspring-bootnginxwebsocket