要解决Angular 7连接到SignalR Hub失败的问题,可以按照以下步骤进行操作:
@aspnet/signalr
库。npm install @aspnet/signalr --save
signalr.service.ts
的文件,并添加以下代码。import { Injectable } from '@angular/core';
import * as signalR from '@aspnet/signalr';
@Injectable({
providedIn: 'root'
})
export class SignalRService {
private hubConnection: signalR.HubConnection;
public startConnection = () => {
this.hubConnection = new signalR.HubConnectionBuilder()
.withUrl('http://localhost:5000/hub') // 替换为你的SignalR Hub的URL
.build();
this.hubConnection
.start()
.then(() => console.log('Connection started'))
.catch(err => console.log('Error while starting connection: ' + err));
}
public addTransferChartDataListener = () => {
this.hubConnection.on('transferchartdata', (data) => {
console.log(data);
// 处理接收到的数据
});
}
}
SignalRService
并使用它。import { Component, OnInit } from '@angular/core';
import { SignalRService } from './signalr.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
constructor(private signalRService: SignalRService) {}
ngOnInit() {
this.signalRService.startConnection();
this.signalRService.addTransferChartDataListener();
}
}
配置SignalR服务器:确保你的SignalR服务器正确配置并可以从Angular项目中访问。
运行Angular应用程序:在Angular项目的根目录下,使用以下命令运行应用程序。
ng serve
这样,你的Angular 7应用程序就应该能够成功连接到SignalR Hub了。如果遇到问题,可以检查控制台输出或浏览器开发者工具中的错误信息,以获取更多详细信息。