403 RXJS error when trying to subscribe to websocket | Angular

Question

I'm trying to find a solution for this without upgrading angular or dependencies as it might affect rest of the code base

package.json

 { "name": "angular4", "version": "1.0.0", "description": "QuickStart package.json from the documentation for visual studio 2017 & WebApi", "scripts": { "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", "lint": "tslint./app/**/*.ts -t verbose", "lite": "lite-server", "pree2e": "webdriver-manager update", "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", "test-once": "tsc && karma start karma.conf.js --single-run", "tsc": "tsc", "tsc:w": "tsc -w", "gulp": "gulp", "rimraf": "rimraf", "build": "gulp build", "dev-build": "gulp dev-build" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/animations": "5.0.2", "@angular/common": "5.0.2", "@angular/compiler": "5.0.2", "@angular/core": "5.0.2", "@angular/forms": "5.0.2", "@angular/http": "5.0.2", "@angular/platform-browser": "5.0.2", "@angular/platform-browser-dynamic": "5.0.2", "@angular/router": "5.0.2", "@ng-bootstrap/ng-bootstrap": "1.0.0", "@progress/kendo-angular-buttons": "4.0.0", "@progress/kendo-angular-dateinputs": "3.7.2", "@progress/kendo-angular-dialog": "3.4.0", "@progress/kendo-angular-dropdowns": "3.5.3", "@progress/kendo-angular-excel-export": "^2.3.0", "@progress/kendo-angular-grid": "3.14.0", "@progress/kendo-angular-inputs": "4.2.1", "@progress/kendo-angular-intl": "1.7.0", "@progress/kendo-angular-l10n": "^1.4.0", "@progress/kendo-angular-layout": "3.1.1", "@progress/kendo-angular-notification": "^1.2.0", "@progress/kendo-angular-popup": "2.5.0", "@progress/kendo-angular-resize-sensor": "3.0.0", "@progress/kendo-angular-tooltip": "1.2.0", "@progress/kendo-data-query": "1.5.1", "@progress/kendo-drawing": "1.5.11", "@progress/kendo-popup-common": "1.6.0", "@progress/kendo-schematics": "0.2.5", "@progress/kendo-theme-default": "2.46.0", "core-js": "^2.4.1", "moment": "^2.20.1", "rxjs": "5.5.6", "systemjs": "0.19.40", "zone.js": "^0.7.4", "jszip": "3.2.2" }, "devDependencies": { "@types/jasmine": "2.5.36", "browserify": "^16.2.3", "canonical-path": "0.0.2", "concurrently": "^3.2.0", "gulp": "^3.9.1", "gulp-cache-bust": "^1.4.0", "gulp-clean": "^0.3.2", "gulp-concat": "^2.6.1", "gulp-inline-ng2-template": "2.0.1", "gulp-minify": "0.0.15", "gulp-minify-css": "^1.2.4", "gulp-typescript": "3.2.4", "gulp-uglify": "^3.0.1", "jasmine-core": "~2.4.1", "karma": "^1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-jasmine-html-reporter": "^0.2.2", "lite-server": "^2.2.2", "protractor": "~4.0.14", "rimraf": "^2.5.4", "systemjs-builder": "^0.15.16", "tslint": "^3.15.1", "typescript": "^3.0.3", "vinyl-source-stream": "^2.0.0" }, "repository": {} }

search.component.ts

 import { Subject, Subscription } from "rxjs"; import { WebSocketSubject } from "rxjs/observable/dom/WebSocketSubject"; import { webSocket } from "rxjs/observable/dom/webSocket"; public openWebSocket = async (uniqueId: string) => { const url: string = this.commonService.wssurl + '/api/ABCWebSocket/' + uniqueId; let socket: WebSocketSubject<any> = webSocket(url); console.log('socketsub = ' + WebSocketSubject.webSocket); console.log('url ' + url); let onWebSocketResponse = new Subject<any>(); onWebSocketResponse.subscribe(async (socketRes) => { if (socketRes.== "NULL") { console:log("message received with;" + uniqueId); } else { } }). this,subscribeToWebSocket( socket, uniqueId; onWebSocketResponse ); };

code snippet causing the error - Guess the Subscribe part throws the error as when commenting it out it works fine

The backend is a.Net project btw. Went through few answer in few forums but did not get what I expect as am not trying to update the packages

Answer 1

If you do not have a constraint that pushes you create your own wrapper around websockets with RxJs , RxJs has its own a native solution for websockets . This wrapper supports:

1- Listening

2- Pushing

3- Multiplexing

Here is an example of an RxJs websocket to listen to server

import { webSocket } from 'rxjs/webSocket';

const subject = webSocket('ws://localhost:8081');

subject.subscribe({
  next: msg => console.log('message received: ' + msg), // Called whenever there is a message from the server.
  error: err => console.log(err), // Called if at any point WebSocket API signals some kind of error.
  complete: () => console.log('complete') // Called when connection is closed (for whatever reason).
 });