[SPRING] Websocket - InvalidStateError : 연결이 아직 설정되지 않았습니다.

Websocket - InvalidStateError : 연결이 아직 설정되지 않았습니다.

Angular2 프론트 엔드와 Spring의 websocket 백엔드를 연결할 수 없습니다.

봄 구성 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 엔드 포인트를 올바르게 구성하는 방법은 무엇입니까? 내 응용 프로그램은 '/'아래에 배포됩니다.

해결법

1. ==============================

   1.나는이 문제에 대한 해결책을 얼마 전에 발견했다. 나는 또한 여기에 게시 할 것이다.

   나는이 문제에 대한 해결책을 얼마 전에 발견했다. 나는 또한 여기에 게시 할 것이다.

   문제는 다음과 같습니다. npm은 클라이언트 대신 sockjs-node를 다운로드합니다. 빨리 해결할 수 있기를 바랍니다.

   동일한 문제가 발생하면 http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js 파일을 프로젝트에 저장하고 system-config.ts 파일을 가리켜 야합니다.

from https://stackoverflow.com/questions/40057710/websocket-invalidstateerror-the-connection-has-not-been-established-yet by cc-by-sa and MIT license