购物网站开发背景,博物馆网站微信公众号建设方案,辽宁建设执业信息网官网,上海搜索优化推广图片假设我们要创建一个监视Web应用程序#xff0c;该应用程序为用户提供了一个能够显示一系列信息的仪表板#xff0c;这些信息会随着时间的推移而更新。第一种方法是在定义的时间间隔#xff08;轮询#xff09;定期调用API 以更新仪表板上的数据。无论如何#xff0c;还… 图片假设我们要创建一个监视Web应用程序该应用程序为用户提供了一个能够显示一系列信息的仪表板这些信息会随着时间的推移而更新。第一种方法是在定义的时间间隔轮询定期调用API 以更新仪表板上的数据。无论如何还是有一个问题如果没有更新的数据我们会因请求而不必要地增加网络流量。一种替代方法是长轮询技术如果服务器没有可用数据则它可以使请求保持活动状态直到发生某种情况或达到预设的超时时间为止而不是发送空响应。如果存在新数据则完整的响应将到达客户端。完全不同的方法是反转角色当有新数据可用推送时后端与客户端联系。请记住HTML 5具有标准化的WebSocket这是一个永久的双向连接可以在兼容的浏览器中使用Javascript接口进行配置。不幸的是必须在客户端和服务器端都对WebSocket提供完全支持以使其可用。然后我们需要提供替代系统fallback无论如何该替代系统都允许我们的应用程序运行。微软于2013年发布了一个名为SignalR for ASP.NET的开源库该库已于 2018年为ASP.NET Core进行了重写。SignalR从与通信机制有关的所有细节中进行抽象并从可用的信息中选择最佳的一种。结果是有可能编写代码就像我们一直处于push-mode一样。使用SignalR服务器可以在其所有连接的客户端或特定客户端上调用JavaScript方法。我们使用web-api模板创建一个ASP.NET Core项目删除已生成的示例控制器。使用NuGet我们将Microsoft.AspNet.SignalR添加到项目中以创建Hub。集线器是能够调用客户端代码发送包含所请求方法的名称和参数的消息的高级管道。作为参数发送的对象将使用适当的协议反序列化。客户端在页面代码中搜索与名称相对应的方法如果找到该名称则将其调用并传递反序列化的数据作为参数。using Microsoft.AspNetCore.SignalR;namespace SignalR.Hubs
{public class NotificationHub : Hub { }
}
您可能知道在ASP.NET Core中可以配置HTTP请求的管理管道以添加一些中间件该中间件可拦截请求添加已配置的功能并使其进入下一个中间件。必须预先配置SignalR中间件在Startup 类的ConfigureServices方法中添加扩展方法services.AddSignalR。现在我们可以使用Startup类的Configure方法中的扩展方法app.UseSignalR将中间件添加到管道中。在此操作期间我们可以传递配置参数包括集线器的路由app.UseSignalR(route
{route.MapHubnotificationhub(/notificationHub);
})
一个有趣的场景允许我们查看ASP.NET Core中的另一个有趣功能即在后台工作进程上下文中托管SignalR Hub 。 假设我们要实现以下用例•运行业务逻辑•等一下•决定是停止还是重复该过程。在ASP.NET Core中我们可以使用框架提供的IHostedService接口在.NET Core应用程序中在后台实现进程的执行。方法要实现是StartAsync和StopAsync 。非常简单StartAsync调用到主机启动而StopAsync调用到主机关闭。然后我们将一个类DashboardHostedService添加到项目中该类实现IHostedService。我们在Startup类的ConfigureServices方法中添加接口注册services.AddHostedServicedashboardhostedservice();
在类构造函数DashboardHostedService中我们注入IHubContext访问添加到我们应用程序的集线器。在方法StartAsync中我们设置了一个计时器它将每两秒钟运行一次方法DoWork中包含的代码。此方法发送带有四个随意生成的字符串的消息。但是它向谁传播呢在我们的示例中我们正在将消息发送到所有连接的客户端。但是SignalR提供了向单个用户或用户组发送消息的机会。在本文中[1]您将找到涉及ASP.NET Core中的身份验证和授权功能的详细信息。有趣的是用户可以同时在台式机和移动设备上连接。每个设备都有一个单独的SignalR连接但是它们都将与同一用户关联。using Microsoft.AspNetCore.SignalR;
using Microsoft.Extensions.Hosting;
using SignalR.Hubs;
using System;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;namespace SignalR
{public class DashboardHostedService: IHostedService{private Timer _timer;private readonly IHubContextnotificationhub _hubContext;public DashboardHostedService(IHubContextnotificationhub hubContext){_hubContext hubContext;}public Task StartAsync(CancellationToken cancellationToken){_timer new Timer(DoWork, null, TimeSpan.Zero,TimeSpan.FromSeconds(2));return Task.CompletedTask;}private void DoWork(object state){_hubContext.Clients.All.SendAsync(SendMessage, new {val1 getRandomString(),val2 getRandomString(),val3 getRandomString(),val4 getRandomString()});}public Task StopAsync(CancellationToken cancellationToken){_timer?.Change(Timeout.Infinite, 0);return Task.CompletedTask;}}
}
让我们看看如何管理客户端部分。例如我们使用Angular CLI的ng new SignalR命令创建Angular应用程序。然后我们安装SignalR的包节点npm i aspnet / signalr。然后添加一个服务该服务使我们可以连接到先前创建的集线器并接收消息。在这里第一种可能的方法是基于服务getMessage中Observable 的服务通过使用私有声明的Subject 来返回Message是与从Object返回的对象相对应的Typescript接口。后端Injectable({providedIn: root
})
export class SignalRService {private message$: Subjectmessage;private connection: signalR.HubConnection;constructor() {this.message$ new Subjectmessage();this.connection new signalR.HubConnectionBuilder().withUrl(environment.hubUrl).build();this.connect();}private connect() {this.connection.start().catch(err console.log(err));this.connection.on(SendMessage, (message) {this.message$.next(message);});}public getMessage(): Observablemessage {return this.message$.asObservable();}public disconnect() {this.connection.stop();}
}
在constructor内部我们创建一个SignalR.HubConnection类型对象该对象将用于连接到服务器。我们通过使用文件environment.ts将其传递到其中心URLthis.connection new signalR.HubConnectionBuilder().withUrl(environment.hubUrl).build();
构造函数还负责调用connect方法该方法进行实际连接并在控制台中记录可能的错误。this.connection.start().catch(err console.log(err));
this.connection.on(SendMessage, (message) {this.message$.next(message);
});
想要显示来自后端的消息的组件将其注入到构造函数中的服务应该订阅getMessage方法并管理到达的消息。以AppComponent为例例如Component({selector: app-root,templateUrl: ./app.component.html,styleUrls: [./app.component.css]
})
export class AppComponent implements OnDestroy {private signalRSubscription: Subscription;public content: Message;constructor(private signalrService: SignalRService) {this.signalRSubscription this.signalrService.getMessage().subscribe((message) {this.content message;});}ngOnDestroy(): void {this.signalrService.disconnect();this.signalRSubscription.unsubscribe();}
}
使用主题允许我们同时管理更多组件而无论从中心返回的消息用于订阅还是用于取消订阅都可以但是我们必须注意对主题的粗心使用。让我们考虑以下getMessage版本public getMessage(): Observablemessage {return this.message$;
}
现在该组件也可以使用以下简单代码发送一条消息const produceMessage this.signalrService.getMessage() as Subjectany;produceMessage.next( {val1: a});
/any
如果方法getMessage返回SubjectasObservable则此代码将引发异常我们可以在单个组件的情况下使用的第二种方法更简单对管理来自后端的消息感兴趣Injectable({providedIn: root
})
export class SignalrService {connection: signalR.HubConnection;constructor() {this.connection new signalR.HubConnectionBuilder().withUrl(environment.hubAddress).build();this.connect();}public connect() {if (this.connection.state signalR.HubConnectionState.Disconnected) {this.connection.start().catch(err console.log(err));}}public getMessage(next) {this.connection.on(SendMessage, (message) {next(message);});}public disconnect() {this.connection.stop();}
}
我们可以简单地将函数回调传递给方法getMessage该函数将来自后端的消息作为参数。在这种情况下AppComponent可以成为public content: IMessage;
constructor(private signalrService: SignalrService) {this.signalrService.getMessage((message: IMessage) {this.content message;});
}
ngOnDestroy(): void {this.signalrService.disconnect();
}
最后几行代码分别位于app.component.html和app.component.css中以赋予一些时尚并且该应用程序已完成。div styletext-align:centerh1DASHBOARD/h1
/div
div classcard-containerdiv classcarddiv classcontainerh4bValore 1/b/h4p{{content.val1}}/p/div/divdiv classcarddiv classcontainerh4bValore 2/b/h4p{{content.val2}}/p/div/divdiv classcarddiv classcontainerh4bValore 3/b/h4p{{content.val3}}/p/div/divdiv classcarddiv classcontainerh4bValore 4/b/h4p{{content.val4}}/p/div/div
/div.card-container {display: flex;flex-wrap: wrap;
}.card {box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);transition: 0.3s;width: 40%;flex-grow: 1;margin: 10px;
}.card:hover {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}.container {padding: 2px 16px;
}
我们首先启动后端然后启动前端并检查最终结果看起来不错您可以在这里找到代码https[2] : //github.com/AARNOLD87/SignalRWithAngular[3]下次见References[1] 本文中: https://docs.microsoft.com/en-us/aspnet/core/signalr/groups?viewaspnetcore-2.2[2] https: https://github.com/AARNOLD87/SignalRWithAngular[3] //github.com/AARNOLD87/SignalRWithAngular: https://github.com/AARNOLD87/SignalRWithAngular
