Error during WebSocket handshake: Unexpected response code: 502 in angular - websocket

Question

I've followed the tutorial from https://tutorialedge.net/typescript/angular/angular-websockets-tutorial/
as I'm trying to setup a websocket connection but I'm getting an error after the socket gets connected. The error says "Error during WebSocket handshake: Unexpected response code: 502"
I've followed the tutorial and followed the steps but i still get the error after the socket gets connected.
websocket.service.ts
import { Injectable } from '#angular/core';
import * as Rx from 'rxjs/Rx';
#Injectable({
providedIn: 'root'
})
export class WebsocketService {
constructor() { }
private subject: Rx.Subject<MessageEvent>;
public connect(url): Rx.Subject<MessageEvent> {
if (!this.subject) {
this.subject =
this.create('ws://61c725fa.ngrok.io/auth/forgot_password/');
console.log("Successfully connected: " + url);
}
return this.subject;
}
private create(url): Rx.Subject<MessageEvent> {
let ws = new WebSocket(url);
let observable = Rx.Observable.create((obs:
Rx.Observer<MessageEvent>) => {
ws.onmessage = obs.next.bind(obs);
ws.onerror = obs.error.bind(obs);
ws.onclose = obs.complete.bind(obs);
return ws.close.bind(ws);
});
let observer = {
next: (data: Object) => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
}
}
};
return Rx.Subject.create(observer, observable);
}
}
notifier.service.ts
import { Injectable } from '#angular/core';
import { Observable, Subject } from "rxjs-compat/Rx";
import { WebsocketService } from "./websocket.service";
import { map } from 'rxjs/operators';
let ws_scheme = window.location.protocol == "https:" ? "wss" :
"ws";
let ws_path = ws_scheme + '://' +"61c725fa.ngrok.io" +
"/auth/forgot_password/";
const URL = ws_path;
export interface Message {
username: string;
}
#Injectable({
providedIn: 'root'
})
export class NotifierService {
public messages: Subject<Message>;
constructor(wsService: WebsocketService) {
this.messages = <Subject<Message>>wsService
.connect(URL).pipe(map((response: MessageEvent): Message => {
let data = JSON.parse(response.data);
return {
username: data.message
}
}));
}
}
component.ts
import { Component } from '#angular/core';
import { NotifierService } from './notifier.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ang-socket';
constructor(private notifier:NotifierService){
notifier.messages.subscribe(msg=>{
console.log("response from websocket:" + msg);
})
}
private message = {
username: "abc#gmail.com"
};
sendMsg() {
console.log("new message from client to websocket: ",
this.message);
this.notifier.messages.next(this.message);
this.message.username = "";
}
}
I would like to fix this issue. Great if someone helps.