Angular 6 SignalR 在开始连接时给出“WebSocket 未处于 OPEN 状态”答案

【问题标题】：Angular 6 SignalR gives "WebSocket is not in the OPEN state" on start connectionAngular 6 SignalR 在开始连接时给出“WebSocket 未处于 OPEN 状态”
【发布时间】：2019-02-19 14:28:47
【问题描述】：

我在我的 Angular 6 项目中安装了@aspnet/signalr

对于信号器问题，我尝试了堆栈溢出流程中的所有其他选项。以下是我的服务代码：

import { Injectable } from '@angular/core';
import * as signalR from "@aspnet/signalr";
import { UserService } from 'app/@core/data/users.service';

@Injectable()
export class SignalRService {

  private url = baseurl+'&users='
  public data;

  private hubConnection: signalR.HubConnection;

  constructor(private user: UserService) { }

  public startConnection = () => {
    let loggedInuser = this.user.getUserEmail();
    let accessToken ="some token";
    var options = {
      transport: signalR.HttpTransportType.WebSockets,
      logging: signalR.LogLevel.Trace,
    accessTokenFactory: () => accessToken
  };

    this.hubConnection = new signalR.HubConnectionBuilder()
                            .withUrl(this.url + loggedInuser , options)
                            .build();
    this.hubConnection.serverTimeoutInMilliseconds = 9999999999999;
    this.hubConnection
      .start()
      .then(() => console.log('Connection started'))
      .catch(err => {
        console.log('url: ' + this.url + loggedInuser)
        console.log('Error while starting connection: ', err)
      })
  }

  public addTransferChartDataListener = () => {
    this.hubConnection.on('AppNotifications', (data) => {
      this.data = data;
      console.log(data);
    });
  }
}

当我运行通知组件的 ngOninit() 时，我在控制台中收到“Websocket 未处于 OPEN 状态”消息。我哪里做错了？

我遵循的示例是https://code-maze.com/netcore-signalr-angular/

【问题讨论】：

这里有一个很好的例子来帮助你入门：code-maze.com/netcore-signalr-angular
这是我遵循的相同示例来实现它。但是遇到了“Websocket is not in the OPEN state”的问题

标签： angular signalr azure-signalr

【解决方案1】：

将传输从“WebSockets”更改为“ServerSentEvents”并将 hubConnection.on 移动到 hubConnection.start() 之前所以，这是我最终的工作状态代码

import { Injectable } from '@angular/core';
import * as signalR from "@aspnet/signalr";
import { UserService } from 'app/@core/data/users.service';

@Injectable()
export class SignalRService {

    private url = baseurl + '&users='
    public data;

    private hubConnection: signalR.HubConnection;

    constructor(private user: UserService) { }

    public startConnection = () => {
        let loggedInuser = this.user.getUserEmail();
        let accessToken = "some token";
        var options = {
            transport: signalR.HttpTransportType.ServerSentEvents,
            logging: signalR.LogLevel.Trace,
            accessTokenFactory: () => accessToken
        };

        this.hubConnection = new signalR.HubConnectionBuilder()
            .withUrl(this.url + loggedInuser, options)
            .build();
        this.hubConnection.serverTimeoutInMilliseconds = 9999999999999;
        this.hubConnection.on('AppNotifications', (data: string) => {
            this.data = data;
            console.log('AppNotifications data');
            console.log(data);
        });

        this.hubConnection
            .start()
            .then(() => console.log('Connection started'))
            .catch(err => {
                console.log('Error while starting connection: ', err)
            })
    }

    public addTransferChartDataListener = () => {
        // this.hubConnection.on('AppNotifications', (data) => {
        //     this.data = data;
        //     console.log(data);
        // });
    }
}

【讨论】：