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で指してください。