angular - 不兼容的 SockJS!主站使用: "1.1.4", iframe : "1.0.0". 怎么处理？

Question

我在使用 SpringBoot 和 Angular2 时遇到了 WebSocket 问题:

不兼容的 SockJS!主站点使用:“1.1.4”，iframe:“1.0.0”。

截图:consoleOutput

我认为该错误(不兼容 SockJS!主站点使用:“1.1.4”，iframe:“1.0.0”。)会产生握手响应的下一个问题。

Spring Boot :

网络套接字配置

package com.example.demo;

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

@Configuration
@EnableWebSocketMessageBroker
@EnableScheduling
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

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

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

Controller

package com.example.demo;


import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class WebSocketController {

    @MessageMapping("/send/message") 
    @SendTo("/chat/greetins")
    public String onReceivedMessage(String message) {
        return message;
    }
}

Angular 2

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    private serverUrl = "/api/socket";
    private title = "WebSockets chat";
    private stompClient;

    constructor() {

    }

    ngOnInit() {
        this.initializeWebSocketConnection();   
    }

    initializeWebSocketConnection() {
        var ws = new SockJS(this.serverUrl);
        this.stompClient = Stomp.over(ws);
        let that = this;
        this.stompClient.connect({}, function(frame) {
            console.log("Connection Success.");
            that.stompClient.subscribe("/chat/greetings", (message) => {
                if (message.body) {
                    $(".chat").append("<div class='message'>" + message.body + "</div>");
                }
            });
        } );
    }

    sendMessage() {
        let message = $('#input').val(); 
        this.stompClient.send("app/send/message", {}, message);
        $('#input').val('');
    }
}

感谢帮助。

Answer 1

我通过在服务器端(Spring/Java)手动硬编码 SockJS 版本来修复它

@Override
public void registerStompEndpoints( StompEndpointRegistry registry ) 
{
     registry.addEndpoint( "/socket" )
        .setAllowedOrigins( "*" )
        .withSockJS( )
        .setClientLibraryUrl( "https://cdn.jsdelivr.net/sockjs/1.1.4/sockjs.min.js" ); 
}

更新:使用相对路径加载 JS 库(本地)

@Override
public void registerStompEndpoints( StompEndpointRegistry registry )
{
   registry.addEndpoint( "/socket" )
       .setAllowedOrigins( "*" )
       .withSockJS( )
       .setClientLibraryUrl( "../lib/sockjs-client/dist/sockjs.min.js" ); // Added
}