icrosoft Signal을 Angular에 연결

Rey and Kylo Ren use SignalR to communicate with the force. Image was orginally copied from here

마이크로소프트의 신호기는 매우 강력한 기술로 클라이언트 간의 웹소켓 연결을 실현할 수 있다.이 기술은 이미 오랫동안 존재해 왔지만, 지금은 Azure가 있어서 더욱 쉽게 시작할 수 있다.
마이크로소프트@aspnet/signalr의 소프트웨어 패키지는 Azure와 Angular를 이용하여 Signaler를 이용한 응용 프로그램을 만드는 것을 가능하게 한다.본고에서 나는 채팅 응용 프로그램에서 그것을 어떻게 설정하는지 보여주고 이 과정에서 이 기술을 토론할 것이다.계속하려면 my sample application GitHub repo 을 참조하십시오.

무엇이 신호기 서비스입니까?

SignalR은 마이크로소프트의 기술로 WebSockets를 통해 클라이언트와 서버 간에 실시간 통신을 제공한다.채팅 프로그램, 게임, 계기판, 실시간 업데이트가 필요한 모든 응용 프로그램 등 고주파 응용 프로그램에 사용되는 것을 자주 볼 수 있다.
SignalR은 위탁 관리 기술로 제공되거나 Azure를 이용하여 그들의 SignalR 서비스를 사용할 수 있습니다.Azure Signal 서비스는 웹 클라이언트, 모바일 응용 프로그램, 서버와 사물인터넷 장치를 지원하기 쉽습니다.
신호기는 대형과 소형 응용에 적용된다.Azure에서 제공하는 신호기 서비스를 사용하면 이 모든 기술을 얻을 수 있으며 밑바닥 인프라를 관리할 필요가 없습니다.

image was originally copied from here

Azure의 신호기 서비스는 ASP용 SDK를 포함한 광범위한 언어 지원을 제공합니다.NET 코어, ASP.NET C# 및 JavaScriptAzure 기능이 있는 서버 없이 신호기 서비스에 연결하고 메시지 협상을 처리할 수도 있습니다.
신호기는 메시지가 집선기에 전송될 때 일반적으로 메시지를 전달할 수도 있고 특정한 클라이언트에게 직접 메시지를 보낼 수도 있다.
신호기 기술에 대한 정보를 더 알고 싶으시면 Microsoft page on it here 를 보십시오.

그것은 어떻게 각도와

따라서 신호기가 있으면 네트워크 클라이언트를 연결해서 메시지를 보내고 받을 수 있습니다.@aspnet/signalr 패키지와 맞춤형 서비스를 사용하면 실제로 설정하기 쉽다.
기본 설정은 다음과 같습니다.

왼쪽에서 연결 프로세스를 볼 수 있습니다.

클라이언트가 협상 함수를 호출하여 클라이언트와 신호기 서비스 간의 WebSocket 연결을 설정합니다.

신호기 서비스는 네트워크 클라이언트가 탐지하는 두 번째 함수를 통해 연결되고 연결을 만듭니다

네트워크 클라이언트는 메시지 기능을 통해 메시지를 보내고 신호기

에 연결된 다른 네트워크 클라이언트에게 메시지를 전파한다
오른쪽에서 클라이언트 연결 후의 종료 상태를 볼 수 있습니다.신호기 서비스에 보내는 메시지는 집선기 모드로 클라이언트에게 전파됩니다.특정 클라이언트 간에만 메시지를 전달하도록 설정할 수도 있습니다.이 예시와 제가 소개할 내용에서 저는 이 집선기를 통해 모든 메시지가 신호기 서비스에 연결된 모든 클라이언트에게 전송되도록 집선기를 설치했습니다.
같은 설정은 Angular 이외의 다른 프레임에 사용할 수 있습니다.관건은 @aspnet/signalr 패키지를 사용하고 악수를 실제 신호 서비스와 조화롭게 하는 것이다.

Azure에서 설정

따라서 Angular에서 신호기 서비스를 사용하려면 우선 Azure에 인프라 시설을 설치해야 한다.그 중 가장 좋은 점은 마이크로소프트가 Azure 포털을 통해 이 모든 것을 매우 직관적으로 만들었다는 것이다.
우선 신호기 서비스만 만들면 됩니다.

그런 다음 키를 돌려 Azure가 처음 악수할 때 사용하는 연결 문자열을 캡처합니다.

다음 두 개의 Azure 함수를 생성합니다.

negotiate 초기 악수 프로세스 처리

messages 악수가 좋을 때 메시지 전송

JavaScript 옵션을 사용하는 경우 함수는 다음과 같이 간단합니다negotiate.

그리고 messages 이렇게 보입니다.

응용 프로그램 설정으로 Azure Functions 응용 프로그램 인스턴스AzureSignalRConnectionString를 추가해야 합니다.

인프라에 대한 마지막 단계는 URL 등을 사용하여 테스트를 진행 중인 경우 CORS만 활성화하는 것입니다. 서비스의 CORS 설정을 사용하여 이를 수행할 수 있습니다.
나는 또한 Azure Functions VSCode extension를 사용하여 Azure 기능을 개발하는 것을 강력히 건의한다.그것은 매우 사용하기 쉬워서 몇 걸음이면 구축하고 배치할 수 있다.

건축 각도

일단 인프라 시설 설정이 생기면, 각도 프로그램을 연결할 때가 되었다.
만약 네가 나의 sample application GitHub repo을 본다면, 너는 이 점의 행동을 보게 될 것이다.
다음 두 가지 방법으로 패키지@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);
      });
    });
  }

서비스가 초기화될 때, 신호기 단점에 대한 인용을 얻고, 이 단점은 신호기 서비스에서 공개되며, 악수를 협상합니다.그리고 각도 주체를 이용하여 신호기에서 "notify"이벤트에서 받은 새로운 메시지를 보냅니다.
실제 메시지에 관해서 저는 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 응용 프로그램에서 채팅 기능을 조작하는 실제 구성 요소에서 신호기 서비스에 대한 참조를 만들고 흐름에서 오는 이벤트를 처리합니다.

    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 동작의 스케줄링을 볼 수 있습니다.

생각을 끝내다

그래서 이 글에서 저는 Azure의 신호기 서비스를 어떻게 Angular에 사용하는지 소개했습니다.이것은 기능이 강한 서비스로 전방 응용 프로그램과 쉽게 통합할 수 있습니다.
이 기술을 사용하면 매우 좋은 것을 세울 수 있다.내가 프로필에서 언급한 바와 같이 이것은 실시간 피드백을 필요로 하는 모든 응용 프로그램에 매우 좋다.
나는 여기에서 Angular를 소개했지만, 몇몇 유사한 모델은 다른 주요 전단 라이브러리에 응용할 수 있다.자세한 내용은 내 sample application 를 참조하십시오.
내 댓글을 읽어줘서 고마워!andrewevans.dev로 연락 주세요. 질문이 있거나 더 알고 싶으면 언제든지 트위터에 메시지를 보내주세요.