4

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();

4 Answers 4

11

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();
2
6

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();
2

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.

1

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;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.