Update Angular app data in real time using websocket

Question

I have API written in Spring on server side also managed websocket code that opens socket and continuously responds with some data (for example /getlikes returns number of likes).

How do I call this API in service that continuously checks for updated values (I don't want to use any time interval for service call)?

Once a client has subscribed to a websocket endpoint, simply send your messages from the server at any time, and all subscribed clients will receive the messages. — Markus Pscheidt, CommentedJun 20, 2018 at 11:27

Anuradha Gunasekara · Accepted Answer · 2018-06-20 08:01:40Z

you can use sockjs-client and do somethjing like this.

import { Component } from '@angular/core'; import * as Stomp from 'stompjs'; import * as SockJS from 'sockjs-client'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { private serverUrl = 'http://localhost:8080/socket' private title = 'WebSockets chat'; private stompClient; constructor(){ this.initializeWebSocketConnection(); } public initializeWebSocketConnection(){ let ws = new SockJS(this.serverUrl); this.stompClient = Stomp.over(ws); let that = this; this.stompClient.connect({}, function(frame) { that.stompClient.subscribe("/chat", (message) => { if(message.body) { $(".chat").append("<div class='message'>"+message.body+"</div>") console.log(message.body); } }); }); } public sendMessage(message){ this.stompClient.send("/app/send/message" , {}, message); $('#input').val(''); } }

you can find a full tutorial on this in this article

@anirudha hie thanks for reply ,i am using spring server (not node js) can we do this SockJs and StompJS — Bhagvat Lande, CommentedJun 20, 2018 at 7:35
thanks i followed the documentation of sockjs and stompjs can you please add some demo which demonstrate calling api from service file and component.ts using that api updating results on ui. — Bhagvat Lande, CommentedJun 20, 2018 at 7:44
hi @anirudha i will go through this , can you please tell me : i need to update my dashboard values in realtime , in his case i just need to subscribe this channel (/chat) which reply me data , i m in mess here can you please help — Bhagvat Lande, CommentedJun 20, 2018 at 8:04

user6579211user6579211 · Accepted Answer · 2018-06-20 11:20:51Z

@Bhagvat Lande

I think you are looking for this :

https://angular.io/guide/observables

getting live data from server continuosly and refelect changes in html in angular2

thanks . i need to get done this with help of SockJS and Stompjs , because my server is in Spring its recommended to use Sockjs and Stompjs — Bhagvat Lande, CommentedJun 21, 2018 at 5:14

Collectives™ on Stack Overflow

Update Angular app data in real time using websocket

2 Answers 2

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Linked

Related