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

Question

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 있습니다

: 연결이 브라우저에서 아직 예외를 설정되지 않은

제대로 c하는 방법 내 Stomp 및 SockJS 끝점을 구성 하시겠습니까? 내 응용 프로그램은 '/'아래에 배포됩니다.

Answer 1

얼마 전이 문제에 대한 해결책을 찾았습니다. 여기에 게시하겠습니다.

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

동일한 문제가 발생하면 http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js 파일을 다운로드하여 system-config.ts에 붙여 넣으십시오.