SpringBoot+Angular2 WebSocket报错：SockJS版本不兼容如何解决？

Hey there, let's tackle this SockJS version mismatch issue you're facing—it's a common gotcha when building WebSocket functionality with Spring Boot and Angular 2, and it absolutely can cause handshake failures as you suspected.

What's Causing This Error? #

This message tells you that the SockJS client version running in your Angular app (1.1.4) doesn't match the version of the SockJS iframe resource served by your Spring Boot server (1.0.0). SockJS uses iframes to handle browser compatibility for certain transport methods, and version mismatches break this compatibility, leading to handshake issues.

Step-by-Step Solutions #

1. 统一前后端SockJS版本（关键！） #

The core fix is aligning the SockJS versions used on both ends:

• Backend (Spring Boot):
  Check your build file (pom.xml for Maven, build.gradle for Gradle) to confirm the version of SockJS your server is using. Spring Boot's spring-boot-starter-websocket pulls in the server-side SockJS implementation via spring-websocket, which is tied to your Spring Boot version:

  • Spring Boot 2.x typically uses SockJS 1.0.x on the server side.
  • Spring Boot 3.x supports newer SockJS versions (like 1.1.x+).

  If you're on Spring Boot 2.x, you'll need to downgrade your Angular SockJS client to 1.0.0. If you want to use SockJS 1.1.4, consider upgrading your Spring Boot version to 3.x (ensure your project is compatible with Java 17+ first).

• Frontend (Angular 2):
  Open your package.json and adjust the sockjs-client version to match the server's:

  "dependencies": {
    // ... other dependencies
    "sockjs-client": "^1.0.0" // Match this to your server's SockJS version
  }
  

  Then run npm install to update the dependency.

2. Verify Your Spring Boot WebSocket Configuration #

Double-check your WebSocket config class to ensure SockJS is properly enabled. It should look something like this (adjust paths to match your setup):

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic"); // Enable simple in-memory broker for topics
        config.setApplicationDestinationPrefixes("/app"); // Prefix for app-specific messages
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // Register your endpoint and enable SockJS fallback
        registry.addEndpoint("/ws-connection").withSockJS();
    }
}

Make sure you're not overriding the default SockJS resource paths—Spring Boot automatically serves the correct iframe files based on your dependencies.

3. Clean Up Angular Frontend Code #

Ensure your Angular component is connecting to the correct endpoint and using the updated SockJS client:

import { Component, OnInit } from '@angular/core';
import * as SockJS from 'sockjs-client';
import { Stomp } from '@stomp/stompjs';

@Component({
  selector: 'app-websocket',
  templateUrl: './websocket.component.html'
})
export class WebSocketComponent implements OnInit {
  private stompClient: any;

  ngOnInit(): void {
    this.connect();
  }

  connect(): void {
    // Connect to the exact endpoint registered in Spring Boot
    const socket = new SockJS('http://localhost:8080/ws-connection');
    this.stompClient = Stomp.over(socket);

    this.stompClient.connect({}, (frame: string) => {
      console.log('Connected to WebSocket: ', frame);
      // Subscribe to your desired topic
      this.stompClient.subscribe('/topic/updates', (message: any) => {
        console.log('Received message: ', message.body);
      });
    }, (error: any) => {
      console.error('Connection error: ', error);
    });
  }
}

Avoid importing multiple versions of SockJS or using outdated Stomp client wrappers.

4. Clear Browser Cache #

Old cached SockJS resources can still cause version mismatches even after updating dependencies. Force a hard refresh (Ctrl+F5 on Windows/Linux, Cmd+Shift+R on Mac) or clear your browser's cache to ensure the latest files are loaded.

Handling SockJS Version Incompatibility (General Fixes) #

If you run into this issue again in the future, follow these quick steps:

• Align versions first: Always ensure the frontend sockjs-client version matches (or is compatible with) the server-side SockJS version provided by Spring Boot.
• Check dependency locks: Use mvn dependency:tree (Maven) or gradle dependencies (Gradle) to verify the exact SockJS version your backend is using.
• Avoid custom SockJS resources: Don't manually serve SockJS iframe files—let Spring Boot handle this via its built-in resources.
• Test across browsers: Some browsers cache more aggressively, so verify the fix works in multiple environments.

内容的提问来源于stack exchange，提问作者scorpion