Needs to add following dependencies
npm install sockjs-client --save
npm install stompjs --save
Problems Occurred while setup :
this error occured because they used 'net' dependency and node server not found that in sockjs-client library inside '/node_modules'
-Error : can not resolve module 'net'
Solution : install following dependency
npm install net -save
- Error : global is not defined
after running setup , if you found kind of error on browser console , this might be happened because yours app is not successfully convert to angular5=>6 , i found this at this stage , if you found at other stage please comment
Solution : to avoid this issue you need to update polyfills.js , add following line to end of the file
(window as any).global = window;
Angular Service Implementation for websocket
It is always better to use services for frequently used operations , it achieves code reusability and code modularity in yours application
In Following service , write a function which made connection with web-socket , you need to import this service in yours component to use its functions.
import { Injectable } from '@angular/core';
import * as Stomp from 'stompjs';
import * as SockJS from 'sockjs-client';
@Injectable({ providedIn: 'root' })
export class WebSocketService {
//connect to websocket server
public connect() {
let socket = new SockJS("http://192.168.1.9:8080/websocketapp");
let stompClient = Stomp.over(socket);
return stompClient;
}
}
In above code we imported installed dependencies , and use it in connect() function for establishing connection with websocket , above function returns "stompclient" instance which is used to subscribe to websocket api from server inside component.
let socket new SockJS("THIS IS YOURS SERVER WEBSOCKET CONN ADDRESS")
How to use Websocket Service In any.component.ts ?
Above , we successfully written service to establish connection with websocket , now we need to subscribe to websocket topic to get real time results .
Remember : Websocket is a live-stream of data, here you just need to subscribe once , whenever any events occured on server it sends data to all subscribed client to that specific client
import { Component } from '@angular/core';
import { WebSocketService } from '../../shared/WebSocketService.service';
selector: 'live-conference',
templateUrl: 'live-conference.component.html'
export class LiveConferenceComponent implements OnInit {
constructor(private webSocket: WebSocketService) {
let stompClient = this.webSocket.connect();
stompClient.connect({}, frame => {
// Subscribe to notification topic
stompClient.subscribe('/topic/realappstream', notifications => {
//needs to parse results and update view
//you get live data in 'notification'
In above component.ts file we injected websocket service and used its methods to subscribe to websocket api , you need to updated view as per results.
Please comments errors and queries always ready to help you :-)
