Websocket implementation in Angular7

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; } }

Note : You don't need to add service in providers [ ] from app.module.ts ,because you can see in above code we used "@Injectable({ providedIn: 'root' })"

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.

Remember : 

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';

@Component({

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