java - Websocket - InvalidStateError : The connection has not been established yet

Question

我无法将 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: The connection has not been established yet 异常:

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

Answer 1

我前段时间找到了解决这个问题的方法，我也会在这里发布。

问题是:npm install sockjs-client 下载 sockjs-node 而不是客户端。我希望他们能尽快修复它。

如果你遇到同样的问题，你应该下载这个文件 http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js 把它放在你的项目中并指向它在 system-config.ts 中。