Рей и Кайло Рен используют SignalR для связи с войсками. Изображение было изначально скопировано отсюда

SignalR от Microsoft - очень мощная технология, которая позволяет устанавливать соединения между клиентами через веб-сокеты. Эта технология существует уже довольно давно, но теперь с Azure начать работу стало еще проще.

Пакет Microsoft @ aspnet / signalr позволяет использовать как Azure, так и Angular для создания приложений, использующих SignalR. В этом посте я расскажу, как настроить его в приложении чата, и попутно обсудим технологию. Если вы хотите продолжить, ознакомьтесь с моим примером репозитория GitHub приложения.

Что такое служба SignalR?

SignalR - это технология от Microsoft, которая обеспечивает связь между клиентом и сервером в реальном времени через WebSockets. Чаще всего он используется для высокочастотных приложений, таких как приложения чата, игры, информационные панели, все, что требует обновлений в реальном времени.

SignalR предлагается либо как размещенная технология, либо вы можете использовать Azure для использования их службы SignalR. Служба Azure SignalR очень проста в использовании и поддерживает веб-клиенты, мобильные приложения, серверы и устройства Интернета вещей.

SignalR работает как для больших, так и для маленьких приложений. Если вы используете службу SignalR, которую предоставляет Azure, вы получаете всю эту технологию без необходимости управлять базовой инфраструктурой.

изображение было изначально скопировано отсюда

Служба Azure SignalR обеспечивает широкую языковую поддержку, включая SDK для ASP.NET Core, ASP.NET C # и JavaScript. Вы также можете использовать бессерверный режим с функциями Azure для подключения к службе SignalR, а также для обработки согласования сообщений.

SignalR также может доставлять сообщения в общем виде, когда они отправляются в концентратор, или может отправлять сообщения непосредственно определенным клиентам.

Если вы хотите узнать больше о технологии SignalR, я рекомендую заглянуть на страницу Microsoft об этом здесь.

Как это работает с Angular

Таким образом, с помощью SignalR вы можете подключать веб-клиентов для отправки и получения сообщений. На самом деле это довольно просто настроить с помощью пакета @ aspnet / signalr и специальной службы.

Базовая настройка выглядит следующим образом:

Слева вы видите процесс подключения:

  1. Клиент вызывает функцию согласования для установки соединения WebSocket между клиентом и службой SignalR.
  2. Служба SignalR подключается и создает соединение через вторую функцию, которую слушает веб-клиент.
  3. Веб-клиент отправляет сообщения через функцию сообщений, которые затем распространяются на любые другие веб-клиенты, подключенные к SignalR.

Справа вы видите конечное состояние после подключения клиентов. Сообщения, которые отправляются в службу SignalR, распространяются на клиентов в шаблоне концентратора. Вы также можете настроить передачу сообщений только между определенными клиентами. В приведенном здесь примере и в том, что я собираюсь пройти, я настраиваю концентратор, посредством которого все сообщения отправляются всем клиентам, подключенным к службе SignalR.

Эта же настройка может работать с другими фреймворками, кроме Angular. Ключевой частью является использование пакета @ aspnet / signalr и согласование рукопожатия с реальной службой SignalR.

Настройка в Azure

Поэтому, если вы хотите использовать службу SignalR с Angular, вам сначала нужно настроить инфраструктуру с помощью Azure. Одна из лучших сторон заключается в том, что Microsoft делает все это очень интуитивно понятным с помощью портала Azure.

Сначала вы буквально создаете сервис SignalR:

Затем необходимо перейти к разделу «Ключи» и записать строку подключения, которую Azure использует при первоначальном рукопожатии:

Затем вы создаете две функции Azure:

  1. negotiate для обработки начального процесса установления связи
  2. messages буквально передавать сообщения после успешного рукопожатия

Если вы используете вариант JavaScript, функции будут невероятно простыми, а negotiate будет выглядеть так:

а затем messages выглядит так:

Вам также необходимо добавить AzureSignalRConnectionString в качестве параметра приложения в свой экземпляр приложения Azure Functions:

Последний шаг в отношении инфраструктуры - просто включить CORS, если вы тестируете с URL-адресом и т. Д. Вы можете сделать это с помощью настройки CORS в службах.

Я также настоятельно рекомендую использовать Расширение VSCode для Функций Azure для разработки Функций Azure. С ним очень легко работать, и его сборка и развертывание выполняются всего за несколько шагов.

Здание Angular

После настройки инфраструктуры пора подключить приложение Angular.

Если вы посмотрите мой репозиторий на GitHub, вы увидите, как это работает.

Я создал службу, которая обертывает пакет @ aspnet / signalr двумя способами, например следующими:

export class SignalRService {
  private readonly _http: HttpClient;
  // private readonly _baseUrl: string = "http://localhost:7071/api/";
  private readonly _baseUrl: string = environment.azureConnection;
  private hubConnection: HubConnection;
  messages: Subject<string> = new Subject();

  constructor(http: HttpClient) {
    this._http = http;
  }

  private getConnectionInfo(): Observable<SignalRConnectionInfo> {
    let requestUrl = `${this._baseUrl}negotiate`;
    return this._http.get<SignalRConnectionInfo>(requestUrl);
  }

  init() {
    this.getConnectionInfo().subscribe((info) => {
      let options = {
        accessTokenFactory: () => info.accessToken,
      };

      this.hubConnection = new signalR.HubConnectionBuilder()
        .withUrl(info.url, options)
        .configureLogging(signalR.LogLevel.Information)
        .build();

      this.hubConnection.start().catch((err) => console.error(err.toString()));

      this.hubConnection.on("notify", (data: any) => {
        this.messages.next(data);
      });
    });
  }

При инициализации службы она получает ссылку на конечную точку SignalR, которая предоставляется службой SignalR, и согласовывает рукопожатие. Затем он использует Angular Subject для отправки любых новых сообщений, полученных из события «notify» от SignalR.

Что касается фактических сообщений, я решил использовать localStorage для обработки истории разговоров, как вы видите здесь:

send(message: string): Observable<void> {
    console.log("called2");
    let requestUrl = `${this._baseUrl}messages`;
    return this._http.post(requestUrl, message).pipe(map((result: any) => {}));
  }

  receieve(message: Message): Message[] {
    // read in from local strorage
    const messages = this.load();
    messages.unshift(message);
    localStorage.setItem("messages", JSON.stringify(messages));
    return messages;
  }

  load(): Message[] {
    const messagesLocal = localStorage.getItem("messages");
    let messagesResponse = [];
    if (messagesLocal !== null) {
      messagesResponse = JSON.parse(messagesLocal);
    }
    return messagesResponse;
  }

  clear(): Observable<void> {
    const messagesLocal = localStorage.getItem("messages");
    let messagesResponse = [];
    if (messagesLocal !== null) {
      localStorage.setItem("messages", JSON.stringify(messagesResponse));
    }
    return of(null);
  }

В реальных компонентах приложения Angular, которые управляют функцией чата, я создаю ссылку на службу SignalR и обрабатываю события, поступающие из потока, соответственно:

this.signalRService.messages.subscribe((message) => {
      // create message
      const result = message.split("|");
      const sendMessage = new Message();
      sendMessage.sender = result[0];
      sendMessage.body = result[1];
      // this.messages.unshift(sendMessage);
      this.store.dispatch(
        MessagesActions.messageRecieved({ message: sendMessage })
      );
    });

Я использую NgRx для обработки различных потоков в приложении, и вы видите это здесь с отправкой действия messageReceived.

Заключительные мысли

Итак, в этом посте я рассказал, как можно использовать службу SignalR в Azure с Angular. Это очень мощный сервис, который вы можете легко интегрировать со своими интерфейсными приложениями.

С помощью этой технологии вы можете создать множество замечательных вещей. Как я уже упоминал во вступлении, это отлично подходит для любого приложения, которому требуется обратная связь в реальном времени.

Я рассмотрел Angular здесь, но есть аналогичные шаблоны, которые вы могли бы применить к другим основным библиотекам внешнего интерфейса. Я рекомендую вам посмотреть мой образец приложения, чтобы узнать больше.

Спасибо, что прочитали мой пост! Следуйте за мной на andrewevans.dev и пишите мне в Твиттере по адресу @ AndrewEvans0102, если у вас есть какие-либо вопросы или вы хотите узнать больше.

Первоначально опубликовано на https://rhythmandbinary.com.