CODEWITHSUNDEEP
javascriptnode.jsreact-nativesignalrsignalr.client
Ghayoor ul Haq
Ghayoor ul Haq

Reputation: 820

Error: Cannot send until the transport is connected - SignalR

I'm using signalR in my react native app for comments on post. When I try to make connection and comment on post for very first time, getting Error: Cannot send until the transport is connected. But after that first time, It works smoothly. I tried libraries like @aspnet/signalr and @microsoft/signalr. Same thing is happening with both libraries. In my opinion, there is issue with my connection.

As I need signal at different areas of my app like in comments, notification and messages so I'm creating connection in this way.

import {HubConnectionBuilder, LogLevel} from '@aspnet/signalr';

var connection_count = 0;
export const connectionSignalR = async (endPoint, token) => {
  return new Promise((resolve, reject) => {
    let _hubConnection = new HubConnectionBuilder()
      .withUrl(
        `http://www.XXXXXXX.com/${endPoint}?access_token=${token}`,
      )
      .configureLogging(LogLevel.Debug)
      .build();
    const startConnection = async () => {
      await _hubConnection.start();
      console.log('[SignalR Connection State]:', _hubConnection.state);
      if (_hubConnection.state === 1) {
        connection_count = 0;
        resolve(_hubConnection);
      } else {
        console.log('[Error with connection signalR]:   ');
        if (connection_count < 3) {
          connection_count = connection_count + 1;
          console.log('[Trying to connection again]:');
          startConnection();
        } else {
          connection_count = 0;
          reject('Error in connection');
        }
      }
    };

    startConnection();
  });
};

This function return connection instance and I'm doing further process like this

import {connectionSignalR} from '@services';

connectionSignalR('Comments', Token)
  .then(hubConnection => {
    let data = {
      UserId: 'XXX',
      Comment: 'My first Comment',
      PostId: 'XXXX',
    };
    hubConnection.invoke('AddCommentAsync', data).then(() => {
      hubConnection.on('AddComment', res => {
        console.log('[Response from add comment]', res);
      });
    });
  })
  .catch(error => {
    Toast.show('Network error!', error);
  });

Upvotes: 0

Views: 689

Answers (1)

Kiril1512
Kiril1512

Reputation: 3611

First of all you should use the @microsoft/signalr package because the other one is obsolete, and this is the package that is maintained and receives updates.

About your error: You should register the listener before you start the connection. So you need to register this line of code when you build the hub.

hubConnection.on('AddComment', res => {
        console.log('[Response from add comment]', res);
      });

So it should be something like this:

let _hubConnection = new HubConnectionBuilder()
      .withUrl(
        `http://www.XXXXXXX.com/${endPoint}?access_token=${token}`,
      )
      .configureLogging(LogLevel.Debug)
      .build();

hubConnection.on('AddComment', res => {
        console.log('[Response from add comment]', res);
      });

Upvotes: 1

Related Questions