java-Websocket-InvalidStateError：尚未建立连接

我无法将Angular2前端与Spring的websocket后端连接.

Spring配置xml文件：

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:websocket="http://www.springframework.org/schema/websocket"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket-4.0.xsd">

    <!-- Scan classpath for annotations (eg: @Service, @Repository etc) -->
    <context:component-scan base-package="com.hestalis"/>

    <!-- Enable @Controller annotation support -->
    <mvc:annotation-driven/>

    <websocket:message-broker application-destination-prefix="/app">
        <websocket:stomp-endpoint path="/chat">
            <websocket:sockjs/>
        </websocket:stomp-endpoint>
        <websocket:simple-broker prefix="/topic"/>
    </websocket:message-broker>

</beans>

Angular2组件：

import * as SockJS from 'sockjs-client';
import {Stomp} from 'stompjs';
import {Component} from '@angular/core';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'hs-game',
    styleUrls: ['resources/css/game.css'],
    templateUrl: 'app/partials/game.html',
    //providers: [ GameService ]
})
export class GameComponent {
    stompClient: any;
    activityId: any;
    text: any;
    messages = [];
    messageIds = [];

    seconds = 0;
    minutes = 0;
    hours = 0;

    constructor() {
    }

    ngOnInit() {
        this.connect();
        this.sendMessage("Player is connected");

        let timer = Observable.timer(0, 1000);
        timer.subscribe(t=>this.setTimer());
    }

    setTimer() {
        this.seconds++;
        if (this.seconds >= 60) {
            this.seconds = 0;
            this.minutes++;
            if (this.minutes >= 60) {
                this.minutes = 0;
                this.hours++;
            }
        } 
    }

    sendMessage(message) {
        var id = Math.floor(Math.random() * 1000000);
        this.stompClient.send('/app/chat', {}, JSON.stringify({ message: message, id: id }));
        this.messageIds.push(id);
    }

    connect() {
        var that = this;
        var socket = new SockJS('/chat');
        this.stompClient = Stomp.over(socket);
        this.stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            that.stompClient.subscribe('/topic/message/', function (greeting) {
                that.messages.push(JSON.parse(greeting.body).content);
            });
        }, function (err) {
            console.log('err', err);
        });
    }

    startListener() {

    }
}

我有InvalidStateError：尚未建立连接,但浏览器中出现异常：

如何正确配置我的Stomp和SockJS端点？我的应用程序部署在“ /”下.

解决方法:

我前段时间找到了解决此问题的方法,我也将其发布在这里.

问题是：npm install sockjs-client下载sockjs-node而不是客户端.我希望他们会尽快解决.

如果您遇到相同的问题,则应下载此文件http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js将其放在项目中,并在system-config.ts中指向它.

标签：spring-websocket,java,angular,typescript,spring
来源： https://codeday.me/bug/20191011/1889571.html