在 Angular 中集成 SignalR 的指南

Web 应用程序发展迅速，实时应用程序因其能够为用户提供即时更新和事件而越来越受欢迎。SignalR 可促进客户端和服务器之间的双向通信，利用 Web 套接字实现高效的实时消息交换。在本教程中，我将演示如何将 SignalR 与 Angular 集成，并在此过程中解决常见的实施难题。

了解 SignalR 概念：

SignalR 通过在客户端和服务器之间建立持久连接来促进实时通信。关键概念包括作为通信端点的集线器（Hubs）、代表前端连接的客户端（Client）以及客户端调用以在服务器上执行操作的服务器方法（Server methods）。理解这些概念对于构建有效的实时应用程序至关重要。

如何在 Angular 应用程序中使用 websocket：

1. 安装

要在 visual studio 代码中启用 signalR，需要安装 signalR 软件包

npm i @microsoft/signalr

接下来，配置您的 Angular 应用程序，使其能够使用 SignalR 和 WebSockets 进行双向通信。

现在将配置 Angular 应用程序，使其可以使用 signalR 和 Web socket 进行双向通信。在本示例中，创建的双向通信将从服务器向客户端发送推送通知。

import * as signalR from '@microsoft/signalr'; 
import { GeneralService } from './service/general.service';
@Injectable({ 

    providedIn: 'root', 
}) 
export class SignalRService { 
    private connection: signalR.HubConnection; 
    public ItemCreated$ = new Subject<ItemCreatedDto>
();
 

    constructor(private gs: GeneralService) {} 
 
    startConnection = () => { 
        const signalRUrl = `${environment.API_URL.replace('/api/', '')}/messageHub`; 
        this.connection = new signalR.HubConnectionBuilder() 
            .withUrl(signalRUrl, { 
                skipNegotiation: true, 
                //here we use webSocket for transport data 
                transport: signalR.HttpTransportType.WebSockets, 
                 //access token that is needed to open communication between the client and the server 
                 //if the application does not have implemented authentication, this part is not needed 
                accessTokenFactory: () => localStorage.getItem('token'), 
            }) 
            .build(); 
        this.registerEventHandlers(); 
        this.startHubConnection(); 
    }; 
 
    private registerEventHandlers() { 
        this.connection.on( 
            'ItemCreated', 
            (operaterIme: string, poruka: IPonudaKreiranaNotifikacijaDto) => { 
                console.log( 
                    'Received ItemCreated message:', 
                    message,
                ); 
                this.gs.success(null, message); 
            }, 
        ); 
 
    private startHubConnection() { 
        this.connection 
            .start() 
            .then(() => { 
                console.log('SignalR connection started successfully'); 
            }) 
            .catch((err) => { 
                console.error('Error starting SignalR connection:', err); 
            }); 
    } 
}

确保在应用程序中处理错误并实施验证令牌等安全措施。

在这种情况下，有必要在应用程序根组件中与 Angular 集成。

import { SignalRService } from './signalr.service'; 
@Component({ 
    selector: 'app-root', 
    template: ` <router-outlet></router-outlet> `, 
}) 
export class AppComponent implements OnInit { 
 
    constructor(private signalRService: SignalRService) {} 
 
    ngOnInit() { 
        this.signalRService.startConnection(); 
    } 
} 

这是一个实用示例，说明如何在应用程序前端部分的后台使用 signalR，以及如何在前端集成 Angular 服务。如果 Azure 网络应用程序是在 Windows 操作系统托管计划上创建的，那么在应用程序服务配置 -> 平台设置中将提供 Web 套接字选项。

如果 Azure Web 应用程序是在 Linux 操作系统中创建的，则无法在平台设置中启用 Web 套接字。

在这种情况下，您需要打开 Azure CLI 并使用以下命令启用该选项：

az webapp config set --web-sockets-enabled true --name [app service name] --resource-group [app service resource group] 

该功能可实现一些新功能，如实时更新、聊天功能或用户联合行动，从而改善用户的实时体验。

作者：Irfan Bucan