将标头添加到 @aspnet/signalr Javascript 客户端答案

【问题标题】：Add headers to @aspnet/signalr Javascript client将标头添加到 @aspnet/signalr Javascript 客户端
【发布时间】：2019-02-22 11:06:22
【问题描述】：

我正在使用来自This npm package的@aspnet/signalr 官方Javascript客户端

想知道有没有办法在客户端连接头中添加Header配置

我如何建立连接

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

【问题讨论】：

标签： signalr signalr-hub signalr.client asp.net-core-signalr

【解决方案1】：

IHttpConnectionOptionsgot a headers property 在 2020 年初的定义。（在文档网站上不可见，但在 Typescript 定义文件中。）您现在可以执行以下操作：

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

【讨论】：

这是真正的答案。有时更改服务器 api 是不可能或非常困难的。

【解决方案2】：

做一些研究后更新

似乎 signalR js/ts 客户端库无论如何都不支持添加自定义标头

所以，我们的解决方案是通过查询字符串发送参数，并让服务器 API 支持它

由于地址栏中没有显示signal R URL连接，所以有点安全

例如

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

【讨论】：

【解决方案3】：

基本上你可以为 hubConnecitonBuilder 提供一个自定义的 HttpClient，它允许你对 signalR 请求做任何你想做的事情，这对于我来说是一个 azure APIManagement 背后的协商部分可能非常有趣：

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

就我而言，我的自定义标头（此处不可见）是由我的 Angular 应用程序 http 拦截器添加的，它现在可以拦截 @aspnet/signalr http 请求并添加正确的标头，因为我正在使用我的应用程序 HttpClient 来发出我的请求图书馆一号。

【讨论】：

【解决方案4】：

图书馆说

     *
 * @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;

以及我们在代码中实现时的样子：

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

【讨论】：