자동 재연결과 함께 SignalR을 사용하여 클라이언트별 메시지를 보내는 방법

스승님의 수업은 누군가에게 정말 유용할 정보를 간단하고 쉽게 이해할 수 있는 방법으로 공유하는 것의 중요성을 반성하게 했고, 지금은 그것을 할 수 있는 완벽한 기회를 얻었습니다. 이번 주에는 과제를 해야 했습니다. , 소켓 연결을 채팅에 통합해야 했습니다. 메시지가 전송된 특정 사용자에게 메시지가 전송되어야 했습니다. SignalR을 사용할 것이라는 것을 알고 조사를 시작했고 정말 유용한 기사를 찾았지만 그들 중 누구도 이해하기 쉬운 예와 함께 한 곳에서 필요한 모든 것을 가지고 있지 않았습니다. 이 기사에서는 프론트엔드 내장 앵귤러와 C# 백엔드를 사용하여 솔루션을 개발한 방법을 공유할 것입니다.

먼저 각 라이브러리를 구현해야 합니다. 링크할 것입니다. 페이지에서 angular 및 c#에 대해 설치하고 기본적으로 사용하는 방법을 더 잘 설명하기 때문입니다.

SignalR을 사용하면 특정 클라이언트 연결로 메시지를 보낼 수 있습니다. SignalR 허브에 연결하는 각 클라이언트에는 고유한 연결 ID가 있기 때문입니다. 프로그램이 연결되면 가장 먼저 해야 할 일은 다음과 같이 해당 connectionId를 얻기 위한 함수를 호출하는 것입니다. 예에서.

connectToWebSocket = () => {
    this.hubConnection = new HubConnectionBuilder().withUrl(url)
      .withAutomaticReconnect()
      .build();
    this.hubConnection 
      .start()
      .then(() => console.log('Connection started!'))
      .then(() => this.getConnectionId())
      .catch(err => console.log('Error while establishing connection :('));
}

public getConnectionId = () => {
    this.hubConnection.invoke('getconnectionid').then(
      (data) => {
        console.log('idConection', data);
        this.saveSocketConnection(data).subscribe(response => {
          console.log('save socket connection works', response);
        });
      }
    );
  }

호출을 통해 연결을 가져와 저장하고 응용 프로그램에 로그인한 사용자와 연결할 수 있습니다. 보시다시피 .withAutomaticReconnect()를 사용했는데 이 메서드는 HubConnection을 자동으로 다시 연결하도록 구성할 수 있으며 연결 끊김이 수십억 가지 이유로 발생할 수 있기 때문에 정말 유용하지만 허브가 다시 연결할 때마다 새로운 connectionId가 생성되고 새로운 id는 onreconnected 콜백에 제공되므로 .onreconnected를 사용하여 새 id를 가져와 저장했습니다.

this.hubConnection.onreconnected(connectionId => {
      this.getConnectionId()
    });

이제 백엔드를 수신할 메서드를 생성할 시간입니다. 이 경우 연결 이름을 broadcastConversationUser로 지정했지만 모든 이름을 가질 수 있으며 정의한 모든 유형의 개체를 수신할 수 있습니다.

this.hubConnection.on('broadcastConversationUser', (message: Message) => {      
      console.log('broadcastConversation', message);
    });

백엔드에서 메시지를 보내려면 프로젝트에서 허브의 인스턴스를 호출하고 IdSocketConnection 매개변수를 이전에 저장한 connectionId로 정의하고 메서드 이름을 앞에서 했던 것과 같은 방식으로 지정하면 됩니다. 이 경우에는 방송대화사용자

public void sendMessage(string idSocketConnection, Message message){
 _hubContext.Clients.Client(idSocketConnection).SendAsync("broadcastConversationUser", message);
}

나에게 그랬던 것처럼 누군가에게 도움이 되길 바라며 행운을 빕니다.