CODEWITHSUNDEEP
signalrsignalr-hubsignalr.clientasp.net-core-signalr
Aphicha Intaragumhaeng
Aphicha Intaragumhaeng

Reputation: 301

Add headers to @aspnet/signalr Javascript client

I'm using @aspnet/signalr Official Javascript client from This npm package

I wondering if there is the way to add Header configuration to the client connection header

How I build the connection

let connection = new signalR.HubConnectionBuilder() .withUrl( "https://some.signalr-host.com" ) .build();

Upvotes: 4

Views: 13009

Answers (4)

Arithmomaniac
Arithmomaniac

Reputation: 4804

The definition for IHttpConnectionOptions got a headers property in early 2020. (It's not visible on the documentation website, but is in the Typescript definition files.) You can now do as follows:

const connection = new signalR.HubConnectionBuilder()
  .withUrl("https://some.signalr-host.com", {
       headers: {"foo": "bar"}
   })
  .build();

Upvotes: 12

Ashish
Ashish

Reputation: 11

Library say

     *
 * @param {string} url The URL the connection will use.
 * @param {IHttpConnectionOptions} options An options object used to configure the connection.
 * @returns The {@link signalr.HubConnectionBuilder} instance, for chaining.
 */
withUrl(url: string, options: IHttpConnectionOptions): HubConnectionBuilder;

And the way it looks when we implement in code:

const connection = new signalR.HubConnectionBuilder()
.withUrl(url, {
  accessTokenFactory: () => {
    return getAccessToken();
  },
})
.withAutomaticReconnect()
.build();


async function getAccessToken() {
const scopes = {
  scopes: authenticationParameters.extraScopesToConsent,
};
const tokenObject = await authProvider.getAccessToken(scopes);
return tokenObject.accessToken;}

Upvotes: 1

lazizanie
lazizanie

Reputation: 514

Basically you can provide a custom HttpClient to the hubConnecitonBuilder which allows you do whatever you want with the signalR requests, it can be very interesting for the negotiation part which was behind an azure APIManagement for me:

 let options: IHttpConnectionOptions = {
      httpClient: <HttpClientSignalR>{
        getCookieString: (url) => {
          return '';
        },
        post: (url, httpOptions) => {
          return this.http.post(url, null, {
            headers: httpOptions.headers,
            withCredentials: false
          })
            .toPromise()
            .then(
              res => {
                return {
                  statusCode: 200,
                  statusText: null,
                  content: JSON.stringify(res)
                };
              },
              err => err
            );
        }
      }
    }

    this._hubConnection = new HubConnectionBuilder()
      .withUrl(environment.host_url + this.routes.notification + '?userId=' + userId, options)
      .build();

In my case, my custom headers (invisible here) are added by my angular app http interceptors which can now intercept the @aspnet/signalr http requests and add proper headers, as I m using my app HttpClient to emit my request instead of the library one.

Upvotes: 2

Aphicha Intaragumhaeng
Aphicha Intaragumhaeng

Reputation: 301

Update after doing some research

Seems like signalR js/ts client library doesn't support adding customize headers in anyways

So, our solution is sending parameters through query string instead and made the server API to support it

Since signal R URL connection is not shown in the address bar, so it a bit secure

e.g.

const connection = new HubConnectionBuilder()
      .withUrl(
        `${signalrUrl}&${key}=${value}`)
      .build();

Upvotes: 6

Related Questions