Angular中WebSocket未发起连接请求的问题排查求助

云原生阿岚

2026-7-4

Fixes for Angular RxJS WebSocket Connection Not Initiating

1. Subscribe to the WebSocketSubject (Critical!)

RxJS WebSocketSubject is a cold observable—it won't start the connection until you subscribe to it. Your code creates the socket$ instance but never triggers the connection, which explains the lack of network/console activity.

Update your service to subscribe to the subject, and add error handling to catch connection issues:

constructor(private http: HttpClient) {
  console.log("Connect to WebSocket");
  // Subscribe to trigger the WebSocket connection
  this.socket$.subscribe({
    next: (msg) => console.log('Received:', msg),
    error: (err) => console.error('WebSocket error:', err),
    complete: () => console.log('Connection closed')
  });
}

2. Validate the Environment URL

Ensure environment.websocket_url is set to ws://localhost:3000 (not http://—using HTTP instead of WS will break the WebSocket handshake).

3. Configure CORS on Your Go Server

Browsers enforce CORS restrictions (Postman does not). If your Angular app runs on a different port (e.g., http://localhost:4200), your Go server must allow cross-origin WebSocket requests.

Example CORS setup for Go's gorilla/websocket library:

func serveWs(w http.ResponseWriter, r *http.Request) {
  // Set CORS headers
  w.Header().Set("Access-Control-Allow-Origin", "http://localhost:4200")
  w.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS")
  
  // Handle preflight OPTIONS request
  if r.Method == "OPTIONS" {
    w.WriteHeader(http.StatusOK)
    return
  }
  
  // Upgrade to WebSocket with origin check
  upgrader := websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
      return r.Header.Get("Origin") == "http://localhost:4200"
    },
  }
  conn, err := upgrader.Upgrade(w, r, nil)
  if err != nil {
    log.Println(err)
    return
  }
  // ... rest of your WebSocket logic
}