【小编】使用SignalR实现实时通信教程（四）

发布时间：2024-05-05 12:48:17 所属栏目：Asp教程来源：小林写作

导读：4.服务器端实现
4.1.配置中心
在ASP.NET MVC项目中，首先需要安装SignalR NuGet包。接着，在Startup.cs文件中添加以下代码，以便在项目中启用SignalR：
```csharp
using Microsoft.AspNet.SignalR;
public

4.服务器端实现
4.1.配置中心
在ASP.NET MVC项目中，首先需要安装SignalR NuGet包。接着，在Startup.cs文件中添加以下代码，以便在项目中启用SignalR：
```csharp
using Microsoft.AspNet.SignalR;
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
//注册SignalR hub
  app.UseEndpoints(endpoints =>
{
endpoints.MapHub<BroadcastMessageHub>("/broadcastmessagehub");
});
}
```
4.2.创建BroadcastMessageHub类
在项目中创建一个名为BroadcastMessageHub的类，继承自Hub类。在该类中，定义一个名为SendMessage的方法，用于在服务器端发送消息到客户端：
```csharp
using Microsoft.AspNet.SignalR;
using System;
using System.Threading.Tasks;
public class BroadcastMessageHub : Hub
{
public async Task SendMessage(string message)
{
  await Clients.All.SendAsync("ReceiveMessage", message);
}
}
```
4.3.创建Angular客户端
在项目中创建一个Angular客户端，首先安装所需的依赖项，如Angular、jQuery和toaster.js。然后，在app.module.ts文件中，注入BroadcastMessageHub模块：
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SignalRModule } from 'ng-signalr';
import { BroadcastMessageHub } from './hubs/broadcastmessagehub.service';
@NgModule({
declarations: [
// ...
],
imports: [
BrowserModule,
SignalRModule,
// ...
],
providers: [
BroadcastMessageHub
],
bootstrap: [
// ...
]
})
export class AppModule { }
```
4.4.编写Angular客户端代码
在Angular客户端中，创建一个组件（如：message-component.ts），用于显示实时接收到的消息。同时，编写一个方法（如：receiveMessage）用于处理服务器端发送来的消息。
```typescript
import { Component, OnInit } from '@angular/core';
import { BroadcastMessageHub } from '../hubs/broadcastmessagehub.service';
@Component({
selector: 'app-message',
  templateUrl: './message.component.html',
styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit {
private messages: any[] = [];
constructor(private broadcastMessageHub: BroadcastMessageHub) { }
ngOnInit(): void {
  this.broadcastMessageHub.stateChanged.subscribe(message => {
  this.messages.push(message);
});
}
receiveMessage(message: any): void {
  this.messages.push(message);
}
}
```
4.5.实现消息推送
在Angular客户端中，编写一个方法（如：sendMessage）用于发送消息到服务器端。在发送消息后，调用服务器端的SendMessage方法，将消息推送到所有连接的客户端：
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
  templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private broadcastMessageHub: BroadcastMessageHub) { }
sendMessage(message: string): void {
  this.broadcastMessageHub.sendMessage(message);
}
}
```
4.6.显示实时消息
在Angular客户端的页面模板中（如：app.component.html），使用*ngFor指令循环显示接收到的消息：
```html
<div class="messages">
<div *ngFor="let

（编辑：51站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!