Error: Cannot send until the transport is connected - SignalR

Error: Cannot send until the transport is connected - SignalR

我在我的 React 本机应用程序中使用 signalR 来评论 post。当我第一次尝试建立连接并在 post 上发表评论时,出现 错误:在连接传输之前无法发送 。但在第一次之后,它工作顺利。 我尝试了 库,例如@aspnet/signalr@microsoft/signalr。两个库都发生了同样的事情。我认为我的连接有问题。

因为我需要在我的应用程序的不同区域(如评论、通知和消息)发出信号,所以我以这种方式创建连接。

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();
  });
};

这个函数 return 连接实例,我正在像这样做进一步的处理

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);
  });

首先你应该使用 @microsoft/signalr 包,因为另一个已经过时了,这是维护和接收更新的包。

关于你的错误:你应该在开始连接之前注册监听器。所以在搭建hub的时候需要注册这行代码

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

所以它应该是这样的:

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);
      });