Question

我使用SpringBoot和Angular2的WebSocket有问题：

不兼容SockJS！主站点使用：“1.1.4”，iframe：“1.0.0”。

我认为该错误（Incompatibile SockJS！主站点使用：“1.1.4”，iframe：“1.0.0”。）会产生握手响应的下一个问题。

Spring Boot：

WebSocket配置

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");
    }
}

控制器

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;
    }
}

Angular2

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版本进行了硬编码，从而解决了该问题。

requestLayout()

Answer 2

iframe中使用的版本是服务器设置

创建服务器时，您需要更改sockjs_url参数以匹配您在前端服务的版本。

Answer 3

您的问题可能与客户端丢失的升级请求标头有关。您可以检查Tomcat日志并尝试找到类似以下内容的文件：

Handshake failed due to invalid Upgrade header: null

这是因为升级头没有从Nginx / Appache Http Server传递到Spring。通过WebSocket在客户端和服务器之间进行握手连接时，需要此标头。您可以在此处找到有关WebSocket握手的更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers

因此，请检查您的负载均衡器或http服务器配置。使用示例Nginx配置检查以下类似问题：

https://github.com/sockjs/sockjs-client/issues/388

Nginx配置示例：

location / {
proxy_pass http://localhost:8080;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;

# For WebSocket upgrade header
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

}

不兼容的SockJS！主站点使用：“1.1.4”，iframe：“1.0.0”。怎么处理？

不兼容SockJS！主站点使用：“1.1.4”，iframe：“1.0.0”。

Spring Boot：

Angular2

3 个答案: