How to send client-specific messages using SignalR with automatic reconnection
Tags: angular, csharp, chat
Published: 2020-09-05 02:40:34

A class in my master made me reflect in the importance to share information that really will be useful for somebody in a simple and easy way to understand it, and now I have the perfect opportunity to do it, This week I had to do a task, I had to integrate a socket connection to a chat, it was needed that the messages will be sent to the specific user to whom it was sent, I knew I will be using SignalR and I started to investigate and I found really helpful articles but none of them had everything that I need it in one place with an easy example to understand, in this article, I will share how I developed my solution with a frontend built-in angular and the backend in c#.

First, you have to implement the respective libraries, I will link them, because in the pages will explain how to install and use them for basics better that I will, so for [angular](https://www.npmjs.com/package/@microsoft/signalr) and for [c#](https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&tabs=visual-studio)

SignalR allows messages to be sent to a particular client connection, that's because each client connecting to a SignalR hub has a unique connection id, the first thing that the program should do once is connected is calling a function to obtain that connectionId, like is showing in the example.
```javascript
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);
        });
      }
    );
  }
```

Through the invoke, you can get the connection to save it, associating it with the user that is logged in your application. As you can see I used *.withAutomaticReconnect()*, this method can be configured to automatically reconnect the HubConnection, and is really useful because that disconnection can happen for a billion reasons, but every time that the hub reconnects generates a new connectionId and that new id will be provided to the onreconnected callback, that's why I used *.onreconnected* to get that new id and save it.

```javascript
this.hubConnection.onreconnected(connectionId => {
      this.getConnectionId()
    });
```
Now is time to generate the method that will be listening to the backend. in this case, I name the connection *broadcastConversationUser* but could have any name, and could receive any type of object that you define. 

```javascript
this.hubConnection.on('broadcastConversationUser', (message: Message) => {      
      console.log('broadcastConversation', message);
    });
```
To send a message from the backend we just need to call the instance of the hub in the project, define the parameter *IdSocketConnection* as the previously save it connectionId, and name the method the same way you did it in the front, in this case, *broadcastConversationUser* 

```c#
public void sendMessage(string idSocketConnection, Message message){
 _hubContext.Clients.Client(idSocketConnection).SendAsync("broadcastConversationUser", message);
}
```
I hope that this will be useful for someone as it was for me, and good luck.