Websocket - InvalidStateError: The connection has not been established yet

Question

I'm not able to connect Angular2 front-end with Spring's websocket back-end.

Spring configuration xml file:

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

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

    }
}

And I have InvalidStateError: The connection has not been established yet exception in the browser:

How to properly configure my Stomp and SockJS endpoint? My application is deployed under: '/'.

Answer 1

I found a solution to this problem some time ago, I'll post it here also.

The issue is that: npm install sockjs-client downloads sockjs-node instead of client. I hope they will fix it soon.

If you're facing the same issue you should download this file http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js put it in your project and point to it in system-config.ts.