从 React Native Expo 应用程序连接到 SignalR

Question

我正在尝试从一个新的 React Native Expo 应用程序连接到我的 SignalR 集线器，但我不断收到错误消息，但错误的性质尚不清楚，因为没有随错误提供的数据。

正如我所说，这是一个全新的 Expo 应用程序，所以代码非常简单：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';

const connection = new HubConnectionBuilder()
  .withUrl('https://my-app.com/test-chat')
  .configureLogging(LogLevel.Information)
  .build();

async function start() {
  debugger;
  try {
    await connection.start();
    debugger;
    console.log('SignalR Connected.');
  } catch (err) {
    debugger;
    console.log(err);
    setTimeout(start, 5000);
  }
}

connection.onclose(async () => {
  await start();
});

// Start the connection.
start();

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是我在控制台中看到的内容：

我在应用中用于 SignalR 的 npm 包是 "@microsoft/signalr": "^5.0.9"。

这是我的test-chat hub 中的代码：

public class TestChat : Hub
{
    public override async Task OnConnectedAsync()
    {
        var connectionId = Context.ConnectionId;

        await Groups.AddToGroupAsync(connectionId, "test-chat");
        await base.OnConnectedAsync();
    }

    public override async Task OnDisconnectedAsync(Exception exception)
    {
        var connectionId = Context.ConnectionId;

        await Groups.RemoveFromGroupAsync(connectionId, "test-chat");
        await base.OnDisconnectedAsync(exception);
    }

    public async Task Send(string message)
    {
        await Clients.Groups("test-chat").SendAsync("new_message", message);
    }
}

我尝试在本地以调试模式连接。我还尝试在网络上的实际应用程序上连接到它。无论哪种方式，连接都失败了。我认为这可能是 CORS 问题，但我认为我们没有在移动应用的 CORS 设置中指定任何内容。

知道这里可能是什么问题吗？有没有人能够使用 React Native（Expo 与否）连接到 SignalR 集线器？

更新：我最初忘记提及的一个重要点是我正在使用 Azure SignalR。我的 Expo 客户端应用程序仍配置为访问我的 ASP.NET Core 后端上的集线器。

更新 2：首先，有一个 CORS 问题，因为我在我的 Windows 10 机器上使用 Android 模拟器对此进行了测试，我需要将 http://localhost:19000 添加到允许的来源。但第二个问题对我来说更重要：我确实使用 Azure SignalR 服务使事情变得更加可靠和可扩展，但这会产生问题。当我切换到只处理 ASP.NET Core 5 后端中的所有客户端连接时，它开始工作了。

Answer 1

鉴于问题的性质以及对所涉及的库缺乏了解，我无法给你一个很好的答案，但我可以尝试为你指明正确的方向。

我已经找到了您的错误在库代码中发出的位置。那将是HttpConnection 类。它本身是用更熟悉的HubConnectionBuilder 构造的。

我建议在库代码中放置一个断点以进一步调试您的问题。关于here 将是一个不错的地方。这样做应该可以让您轻松检查用于创建请求的参数，并发现潜在的错误。

现在，您本地磁盘中的库代码在哪里？那么可能有两个位置。虽然我确定有人知道如何确定这一点，但我不知道。 “问题” 是该库公开了两种类型的模块。 cjs 文件夹和 esm 一个（技术上还有 browser 和 webworker，但我认为不太可能是其中之一）。现在您可能想知道这些文件夹代表什么，该模块的package.json 至少在一定程度上回答了这些问题。 cjs 代表“普通 js”，esm 代表“ES 模块”。无论如何......说到点子上......就像我说的我不知道react-native的捆绑器使用的是什么类型的模块（很可能你可以通过某种配置来配置它），所以我会老实说，首先将断点放在node_modules/@microsoft/signalr/dist/esm/HttpConnection.js 中，如果该断点没有命中，请尝试node_modules/@microsoft/signalr/dist/cjs/HttpConnection.js。

给你。如果我可以提供任何进一步的帮助，请写评论！ ?