Websocket - InvalidStateError: Die Verbindung wurde noch nicht hergestellt

Question

Ich kann Angular2-Front-End nicht mit Spring-Websocket-Back-End verbinden.

Spring-Konfiguration XML-Datei:

<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 Komponente:

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() { 

    } 
} 

Und ich habe InvalidStateError: Die Verbindung wird aufgebaut wurde noch nicht Ausnahme im Browser hat:

Wie man richtig c meinen Stomp- und SockJS-Endpunkt konfigurieren? Meine Anwendung wird bereitgestellt unter: '/'.

Answer 1

Ich habe vor einiger Zeit eine Lösung für dieses Problem gefunden, ich werde es hier auch posten.

Das Problem ist, dass: npm install sockjs-client downloads sockjs-Knoten anstelle von Client. Ich hoffe, sie werden es bald beheben.

Wenn Sie mit dem gleichen Problem konfrontiert sind, sollten Sie diese Datei herunterladen http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js in Ihrem Projekt und zeigen Sie darauf in system-config.ts.