What steps should I follow to set up reconnect logic for SignalR in an Angular 8 application?

I have integrated

    "@aspnet/signalr": "^1.1.4",

into my Angular 8 project.

However, it seems like the documentation provided is not up to date?

https://learn.microsoft.com/en-us/aspnet/core/signalr/javascript-client?view=aspnetcore-3.1

The documentation mentions a method

withAutomaticReconnect()

that should be used like this:

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")
    .withAutomaticReconnect()
    .build();

But when I try to use this method, I encounter this error message:

Property 'WithAutomaticReconnect' does not exist on type 'HubConnectionBuilder'

Is this a case of outdated documentation or am I missing something in the configuration?

This is how my code looks BEFORE trying to add the aforementioned method:

    private _hubConnection: HubConnection;

...

        this._hubConnection = new HubConnectionBuilder()
        .withUrl(this.myAPIUrl + '/myHub', { accessTokenFactory: () => tokenFromCache })
        .configureLogging(signalR.LogLevel.Error)
        .build();

Answer №1

The guide you are pointing to mentions the npm package "@microsoft/signalr," while the one you are following uses "@aspnet/signalr"

Answer №2

Make sure to update to the latest version, which I think is version 3. To do so, simply execute the command below in your terminal. This has worked well for me on a project with a react front end.

npm install @microsoft/signalr

Answer №3

Here's a suggestion on how you could approach this:

this._hubConnection.start().catch(_ => setTimeout(() => {
            this._hubConnection.start();
        }, 1000));

This code snippet will help reconnect your client to the hub in case of any exceptions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When a two-sided object is rotated on the y-axis in THREE.js, the graphic vanishes into

class Game extends backbone.View constructor: -> @scene = new THREE.Scene() @camera = new THREE.PerspectiveCamera 75, window.innerWidth/window.innerHeight, 1, 100000 @camera.position.z = 300 @scene.add @camera ...

Exploring AngularJS unit testing: integrating async and await with Jasmine

I'm currently facing a challenge with unit testing my Angular service using the async/await keywords in the respective (Jasmine) unit tests below. The test for the built-in Promise is functioning correctly, however, I am encountering difficulties in g ...

leveraging the situation and a clever opening

Currently, I'm diving into mastering the proper utilization of context and hooks. Initially, everything worked flawlessly while all components remained within a single class. However, troubles arose when I segregated them into multiple classes leading ...

Are there alternative methods for anchoring an element in Vuetify aside from using the v-toolbar component?

I have been working on positioning certain elements in the app and I have found a method that seems to work, using code like this: <v-toolbar fixed></v-toolbar> Another option is something along these lines: <v-toolbar app></v-toolb ...

Issue with manipulating currency conversion data

Currently, I am embarking on a project to develop a currency conversion application resembling the one found on Google's platform. The main hurdle I am facing lies in restructuring the data obtained from fixer.io to achieve a similar conversion method ...

Execute a Node.JS query using an HTML select dropdown

My goal is to customize queries to a mySQL database based on the user's selection from select options on my website. Here is the HTML code: <select id = "year"> <option value = "yr" selected>Choose a Year</option> <option id = " ...

Triggering form submission through JavaScript by simulating keypress Enter does not work

Looking to incorporate some jQuery script into a website featuring keyword searching. I've encountered an issue where, upon inserting the code below into amazon.com to designate a keyword and simulate pressing the enter key using jQuery, the form fail ...

Issue with data not refreshing when using router push in NextJS version 13

I have implemented a delete user button on my user page (route: /users/[username]) which triggers the delete user API's route. After making this call, I use router.push('/users') to navigate back to the users list page. However, I notice tha ...

I'm puzzled as to why my recursive function is repeatedly calling itself without meeting the necessary logical condition. Can anyone provide guidance on

As I delve into a basic recursion, I am observing an interesting phenomenon where the logic governing the recursion is activated even when a false parameter is present in the return statement for the ternary rule. This particular recursive function perfor ...

Tips for creating a single rolling scroll over multiple rows in a grid layout

I successfully implemented a grid layout for displaying four book images in a row with CSS, including responsive overflow. However, the challenge lies in ensuring that only one row scrolls at a time while allowing other rows to scroll simultaneously when o ...

Optimal Angular Project Structure for Creating an App with Admin Backend

After finishing "ng-book: The complete book on Angular 6," I am diving into Angular as a newcomer. As I venture into building my application, I have a specific question that has been lingering in my mind. The vision for my project includes: MainLayout: ...

Error encountered while attempting to save user to mongoose due to bcrypt issue

I am currently dedicated to expanding my knowledge in node and react through a tutorial. If you want to check out the repository, here is the link: https://bitbucket.org/grtn/cloudstruct/src/develop/ While making a post request to /api/users/register, I ...

Enhancing TypeScript with Generic Proxyify Functionality

I'm attempting to enclose a basic interface provided through a type generic in order to alter the return value of each function within the interface. For instance: interface IBaseInterface { test(a?: boolean, b?: number): Promise<boolean>; ...

Problematic situation when using ng-repeat with dynamic ng-include and template variables scope conflict

When utilizing ng-repeat with dynamic ng-include that includes variables, the variables are not being properly recognized. Take a look at this code snippet. Here is the main HTML code: <table style> <tr> <th>Student</th> ...

The AJAX response is incorrect due to a PHP request, leading to the reloading

Whenever the 'signup' button is clicked, a function in my code initiates an HTML switch. The issue I am facing arises when I test for incorrect email or password during sign up. While I can successfully verify the data, it still loads the previou ...

Utilizing Headless Firefox with Selenium in C#

I am trying to configure Firefox to run in headless mode. While I know how to achieve this with Chrome, I am facing difficulties implementing the same for Firefox. Here is my current code snippet: using System; using System.Collections.Generic; using Sy ...

Exploring a JSON object using jQuery's iteration capabilities

Hello, I am currently working with a JSON array that is being returned from the server. Here is an example of what it looks like: [{ ImageUrl="http://www.google.com"}, { ImageUrl="http://www.bing.com"}] Currently, I have this code: <div id="images"&g ...

In Angular, the type 'MyModel' is incomplete without the properties _isScalar, source, operator, lift, and several others that are found in type 'Observable<MyModel>'

I have defined a TypeScript model called ResearchContentByCompany: export interface ResearchContentByCompany { companyId: number; companyOverview: string; industryAnalysis: string; qualityAssessment: string; financials: string; valu ...

Exploring data visualization within a JSX Component

I am attempting to dynamically render a Card component that is mapped from an array of objects. However, I am encountering an "unexpected token error" and the URL is not rendering as expected. The goal is to display five cards based on the data within the ...

R Web Scraping: Navigating Dynamic Web Pages with AJAX Button Clicks

Is there a way to modify the R code below in order to extract Quarterly data? I am attempting to retrieve data from Yahoo Finance, which is a dynamic web page using AJAX, resulting in the same address for both Annual and Quarterly data. The selector to u ...