Not retrieving anydata on sockets. Only on init.

[Fridthjof]

I've made this small test with at Spring Boot server and Angular 4 over Sockets.

I have a small graph that is showing data, and should show it realtime.

At the moment i'm only getting the last data created serverData by this:

    @SubscribeMapping("/data")
    public List initDataConnection() {
        makeRandomData(1);
        System.out.println("Subscription on data");
        return liveDataTest;
    }

Current my Angular looks like this

import {Component, OnDestroy, OnInit} from '@angular/core';
import {StompService} from '@stomp/ng2-stompjs';
import {Subscription} from 'rxjs/Subscription';
import {Observable} from 'rxjs/Observable';
import {Message} from '@stomp/stompjs';

import * as Stomp from 'stompjs';
import * as SockJS from 'sockjs-client';
import * as $ from 'jquery';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
//     private serverUrl = 'http://192.168.3.129:8080/socket';
    public title = 'Websocket Test';
//     private stompClient;
//     private stompClientLiveData;
//
//     constructor() {
//         this.initializeWebSocketConnection();
//     }
//
//     ngOnInit() {
//         this.initializeWebSocketConnection();
//     }
//
//     initializeWebSocketConnection() {
//         const ws = new SockJS(this.serverUrl);
//
//         this.stompClient = Stomp.over(ws);
//         const that = this;
//         this.stompClient.connect({}, function (frame) {
//             that.stompClient.subscribe('/data', (message) => {
//                 if (message.body) {
//                     $('.chat').append('<div class=\'message\'>' + message.body + '</div>');
//                 }
//             });
//         });
//     }
//
//     sendMessage(message) {
//         this.stompClient.send('/batchServer/responseData', {}, message);
//         $('#input').val('');
//     }
// }

    // Stream of messages
    private subscription: Subscription;
    public messages: Observable<Message>;

    dataIsReady: Boolean = false;

    public subscribed: boolean;

    public history: Array<any> = [];

    constructor(private _stompService: StompService) {
    }

    ngOnInit() {
        this.subscribed = false;
        this.subscribe();
    }

    public subscribe() {
        if (this.subscribed) {
            return;
        }

        // Stream of messages
        this.messages = this._stompService.subscribe('/batchServer/data');

        // Subscribe a function to be run on_next messages
        this.subscription = this.messages.subscribe(this.onNext, error2 => console.log(error2));
        this.subscribed = true;
    }

    public unsubscribe() {
        if (!this.subscribed) {
            return;
        }

        // This will internally unsubsribe from Stomp Broker
        this.subscription.unsubscribe();
        this.subscription = null;
        this.messages = null;

        this.subscribed = false;
    }

    ngOnDestroy() {
        this.unsubscribe();
    }

    public onNext = (message: Message) => {
        console.log(message);
        // Store message in a history Array
        this.history.push(message.body);

        console.log(JSON.parse(message.body));
        // this.lineChartData = ;
        this.loopData(JSON.parse(message.body));
    };

    public makeData() {
        this._stompService.publish('/batchServer/responseData', 'hello');
    }
}

When i click a button and makeData() is called, it sends a msg 'hello' which the server respons on by a

this.template.convertAndSend("/data", 'hello');

My webproject is not retrieving any data though. If i'm using another stomp work (outcommented code) it works as it should

My module:

export function receiverProvider() {
    return new SockJS('http://192.168.3.129:8080/socket');
}

const stompConfig: StompConfig = {
    // Which server?
    url: receiverProvider,

    // Headers
    // Typical keys: login, passcode, host
    headers: {
    //     login: 'guest',
    //     passcode: 'guest'
    },

    // How often to heartbeat?
    // Interval in milliseconds, set to 0 to disable
    heartbeat_in: 0, // Typical value 0 - disabled
    heartbeat_out: 20000, // Typical value 20000 - every 20 seconds
    // Wait in milliseconds before attempting auto reconnect
    // Set to 0 to disable
    // Typical value 5000 (5 seconds)
    reconnect_delay: 10000,

    // Will log diagnostics on console
    debug: true
};

[kum-deepak]

Can please copy the output on the console and attach as a file.

[Fridthjof]

As stated. it gets no response from the 'Hello' msg.

[kum-deepak]

Seems quite strange, please share both your server and client so that I can run and check it.

I am not a Java programmer, so, please include adequate instruction on how do I install and run the server.

[Fridthjof]

https://github.com/Fridthjof/websockets-spring

https://github.com/Fridthjof/websockets---ng2-stompjs

Here you go. Please let me know if there is more i need to add.

[kum-deepak]

For the server, is there any command line instruction to run it or I will have to use IntelliJ?

[Fridthjof]

Either package .jar file and run it, or easier to run it from IntelliJ if you already got it.

[kum-deepak]

I will install IntelliJ community and try

[kum-deepak]

I am able to run the applications - I needed to install a JDK 😄

I can see one possible issue at https://github.com/Fridthjof/websockets---ng2-stompjs/blob/master/src/app/app.component.ts#L140

It should probably be:

        this.messages = this._stompService.subscribe('/data');

[Fridthjof]

Funny. That did actually solve the Livedata problem. But bugged the "on Subscription" request. Thanks for the help! 👍

[kum-deepak]

One suggestion, unless you have to support IE8/IE9, you can avoid SockJS (which is advisable). You need to drop the .withSockJS() in your WebSocketConfiguration.java and change the URL in the client side.

[Fridthjof]

Yes. That was also my intention.