Encountering a 403 error with RXJS when attempting to subscribe to a websocket in Angular

Question

Encountering a 403 error with RXJS when attempting to subscribe to a websocket in Angular

I am currently searching for a resolution to this issue without making any upgrades to Angular or its dependencies, as it could potentially impact other parts of the code base

https://i.sstatic.net/Jeb55.png

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\" ",
    ...
    
    // (truncated for brevity)
  },
  ...
}

https://i.sstatic.net/fDcbH.png

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);
    
    
    // (truncated for brevity)
  };

code snippet causing the error - Guess the Subscribe part throws the error as when commenting it out it works fine https://i.sstatic.net/lrtZY.png

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

c#angular typescript websocket

Answer 1

Answer №1

If you find yourself without a constraint driving you, consider creating your own wrapper using RxJs for websockets. However, don't forget that RxJs already offers its native solution for websockets. This built-in wrapper provides support for:

1- Listening

2- Pushing

3- Multiplexing

Take a look at this example of how to use an RxJs websocket to listen to the server:

import { webSocket } from 'rxjs/webSocket';

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

subject.subscribe({
  next: msg => console.log('message received: ' + msg), // Triggered when a message is received from the server.
  error: err => console.log(err), // Executed if WebSocket API encounters an error.
  complete: () => console.log('complete') // Invoked when the connection is closed.
 });

Answer 2

If you find yourself without a constraint driving you, consider creating your own wrapper using RxJs for websockets. However, don't forget that RxJs already offers its native solution for websockets. This built-in wrapper provides support for:

1- Listening

2- Pushing

3- Multiplexing

Take a look at this example of how to use an RxJs websocket to listen to the server:

import { webSocket } from 'rxjs/webSocket';

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

subject.subscribe({
  next: msg => console.log('message received: ' + msg), // Triggered when a message is received from the server.
  error: err => console.log(err), // Executed if WebSocket API encounters an error.
  complete: () => console.log('complete') // Invoked when the connection is closed.
 });

Answer 3

Answer №2

Just an update - after some troubleshooting, I discovered that the issue stemmed from using an outdated version of Angular 5 and an incorrect approach to subscribing to the websocket. Here's a more reliable method using observables:

this.url = this.commonVariables.wssurl + '/api/AbcApi/' + id;
    this.wsService.createObservableSocket(this.url)
        .subscribe(
            data => {
                //TODO After received Response
                console.log('message from server with id: ' + data);
                this.UpdateUi(data);
            },
            err => console.log(err),
            () => console.log('The observable stream is complete')
    );

To implement this in the websocket.service class:

import { Observable } from "rxjs/Rx";

export class WebSocketService { ws: WebSocket;

createObservableSocket(url: string): Observable<string> {
    console.log('created observable socket');
    this.ws = new WebSocket(url);
    return new Observable(observer => {
        this.ws.onmessage = (event) => observer.next(event.data);
        this.ws.onerror = (event) => observer.error(event);
        this.ws.onclose = (event) => observer.complete();
    });
}
sendMessage(message: any) {
    this.ws.send(message);
}

}

Answer 4

Just an update - after some troubleshooting, I discovered that the issue stemmed from using an outdated version of Angular 5 and an incorrect approach to subscribing to the websocket. Here's a more reliable method using observables:

this.url = this.commonVariables.wssurl + '/api/AbcApi/' + id;
    this.wsService.createObservableSocket(this.url)
        .subscribe(
            data => {
                //TODO After received Response
                console.log('message from server with id: ' + data);
                this.UpdateUi(data);
            },
            err => console.log(err),
            () => console.log('The observable stream is complete')
    );

To implement this in the websocket.service class:

import { Observable } from "rxjs/Rx";

export class WebSocketService { ws: WebSocket;

createObservableSocket(url: string): Observable<string> {
    console.log('created observable socket');
    this.ws = new WebSocket(url);
    return new Observable(observer => {
        this.ws.onmessage = (event) => observer.next(event.data);
        this.ws.onerror = (event) => observer.error(event);
        this.ws.onclose = (event) => observer.complete();
    });
}
sendMessage(message: any) {
    this.ws.send(message);
}

}

Encountering a 403 error with RXJS when attempting to subscribe to a websocket in Angular

Answer №1

Answer №2

Similar questions

ts:Accessing the state within a Redux store

Is there a way to locate all projects impacted by `nx`?

What is the best way to implement multiple HTTP subscriptions in a loop using Angular?

TypeB should utilize InterfaceA for best practice

Having trouble resolving React within the Formik/dist package due to a custom webpack configuration

Exploring Angular's nested Routing within dynamically loading Modules using a specific router-outlet reference

Tips for adjusting the size of a textarea to perfectly fit within a table cell

.NET Third-Party Oracle Providers offering object type support

Typescript libraries built specifically for unique custom classes

Decoding Facebook JSON Game Invitation Information

Personalizing the appearance controls of A-frame with a unique TypeScript-written custom component?

What is the correct way to link an array with ngModel using ngFor loop in Angular?

Is it possible to set restrictions with the Calendar Extender?

Tips for enlarging the font size of a number as the number increases

Access the JSON data containing sub array values and showcase them on an HTML page by utilizing ngFor

Discover which references are yet to be resolved within a tsx file

Why does my WCF REST web service escape the JSON string response for weakly-typed JSON?

Multiple WAR files are nestled within an EAR file, facilitating the sharing of classes

Angular and Bootstrap combined to create a versatile navigation bar with a collapsible sidebar feature

TypeScript - the object may potentially be 'null'